@storybook/react-native-theming 9.0.0-alpha.8 → 9.0.0-beta.10

package/dist/index.d.ts

@@ -3,114 +3,6 @@ import { ImageSourcePropType, ImageProps, TextStyle } from 'react-native';
 import * as React$1 from 'react';
 import { ReactElement } from 'react';
 
-declare const color: {
-    primary: string;
-    secondary: string;
-    secondaryLighter: string;
-    tertiary: string;
-    ancillary: string;
-    orange: string;
-    gold: string;
-    green: string;
-    seafoam: string;
-    purple: string;
-    ultraviolet: string;
-    lightest: string;
-    lighter: string;
-    light: string;
-    mediumlight: string;
-    medium: string;
-    mediumdark: string;
-    dark: string;
-    darker: string;
-    darkest: string;
-    border: string;
-    positive: string;
-    negative: string;
-    warning: string;
-    critical: string;
-    defaultText: string;
-    inverseText: string;
-    positiveText: string;
-    negativeText: string;
-    warningText: string;
-};
-declare const background: {
-    app: string;
-    bar: string;
-    content: string;
-    preview: string;
-    gridCellSize: number;
-    hoverable: string;
-    positive: string;
-    negative: string;
-    warning: string;
-    critical: string;
-};
-declare const typography: {
-    weight: {
-        regular: TextStyle["fontWeight"];
-        bold: TextStyle["fontWeight"];
-    };
-    size: {
-        s1: number;
-        s2: number;
-        s3: number;
-        m1: number;
-        m2: number;
-        m3: number;
-        l1: number;
-        l2: number;
-        l3: number;
-        code: number;
-    };
-};
-type Color = typeof color;
-type Background = typeof background;
-type Typography = typeof typography;
-interface Brand {
-    title?: string | undefined;
-    url?: string | null | undefined;
-    image?: ImageSourcePropType | ReactElement | null | undefined;
-    resizeMode?: ImageProps['resizeMode'] | null | undefined;
-    target?: string | null | undefined;
-}
-interface StorybookThemeWeb {
-    base: 'light' | 'dark';
-    color: Color;
-    background: Background;
-    typography: Typography;
-    textMutedColor: string;
-    input: {
-        border: string;
-        background: string;
-        color: string;
-        borderRadius: number;
-        paddingHorizontal: number;
-        paddingVertical: number;
-    };
-    button: {
-        background: string;
-        border: string;
-    };
-    boolean: {
-        background: string;
-        selectedBackground: string;
-    };
-    layoutMargin: number;
-    appBorderColor: string;
-    appBorderRadius: number;
-    barTextColor: string;
-    barHoverColor: string;
-    barSelectedColor: string;
-    barBg: string;
-    brand?: Brand;
-}
-
-type StorybookTheme = StorybookThemeWeb;
-declare const theme: StorybookThemeWeb;
-declare const darkTheme: StorybookThemeWeb;
-
 type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
   ? true
   : false
@@ -495,4 +387,112 @@ interface CreateStyled extends CreateStyled$1, StyledComponents {}
 
 declare const styled: CreateStyled
 
+declare const color: {
+    primary: string;
+    secondary: string;
+    secondaryLighter: string;
+    tertiary: string;
+    ancillary: string;
+    orange: string;
+    gold: string;
+    green: string;
+    seafoam: string;
+    purple: string;
+    ultraviolet: string;
+    lightest: string;
+    lighter: string;
+    light: string;
+    mediumlight: string;
+    medium: string;
+    mediumdark: string;
+    dark: string;
+    darker: string;
+    darkest: string;
+    border: string;
+    positive: string;
+    negative: string;
+    warning: string;
+    critical: string;
+    defaultText: string;
+    inverseText: string;
+    positiveText: string;
+    negativeText: string;
+    warningText: string;
+};
+declare const background: {
+    app: string;
+    bar: string;
+    content: string;
+    preview: string;
+    gridCellSize: number;
+    hoverable: string;
+    positive: string;
+    negative: string;
+    warning: string;
+    critical: string;
+};
+declare const typography: {
+    weight: {
+        regular: TextStyle["fontWeight"];
+        bold: TextStyle["fontWeight"];
+    };
+    size: {
+        s1: number;
+        s2: number;
+        s3: number;
+        m1: number;
+        m2: number;
+        m3: number;
+        l1: number;
+        l2: number;
+        l3: number;
+        code: number;
+    };
+};
+type Color = typeof color;
+type Background = typeof background;
+type Typography = typeof typography;
+interface Brand {
+    title?: string | undefined;
+    url?: string | null | undefined;
+    image?: ImageSourcePropType | ReactElement | null | undefined;
+    resizeMode?: ImageProps['resizeMode'] | null | undefined;
+    target?: string | null | undefined;
+}
+interface StorybookThemeWeb {
+    base: 'light' | 'dark';
+    color: Color;
+    background: Background;
+    typography: Typography;
+    textMutedColor: string;
+    input: {
+        border: string;
+        background: string;
+        color: string;
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    button: {
+        background: string;
+        border: string;
+    };
+    boolean: {
+        background: string;
+        selectedBackground: string;
+    };
+    layoutMargin: number;
+    appBorderColor: string;
+    appBorderRadius: number;
+    barTextColor: string;
+    barHoverColor: string;
+    barSelectedColor: string;
+    barBg: string;
+    brand?: Brand;
+}
+
+type StorybookTheme = StorybookThemeWeb;
+declare const theme: StorybookThemeWeb;
+declare const darkTheme: StorybookThemeWeb;
+
 export { StorybookTheme, StyledComponent, ThemeProvider, darkTheme, styled, theme, useTheme, withTheme };

package/dist/index.js

@@ -1436,9 +1436,9 @@ var require_css_to_react_native = __commonJS({
   }
 });
 
-// ../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js
+// ../../node_modules/react-is/cjs/react-is.production.min.js
 var require_react_is_production_min = __commonJS({
-  "../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js"(exports) {
+  "../../node_modules/react-is/cjs/react-is.production.min.js"(exports) {
     "use strict";
     var b = "function" === typeof Symbol && Symbol.for;
     var c = b ? Symbol.for("react.element") : 60103;
@@ -1549,9 +1549,9 @@ var require_react_is_production_min = __commonJS({
   }
 });
 
-// ../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.development.js
+// ../../node_modules/react-is/cjs/react-is.development.js
 var require_react_is_development = __commonJS({
-  "../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.development.js"(exports) {
+  "../../node_modules/react-is/cjs/react-is.development.js"(exports) {
     "use strict";
     if (process.env.NODE_ENV !== "production") {
       (function() {
@@ -1704,9 +1704,9 @@ var require_react_is_development = __commonJS({
   }
 });
 
-// ../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js
+// ../../node_modules/react-is/index.js
 var require_react_is = __commonJS({
-  "../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js"(exports, module2) {
+  "../../node_modules/react-is/index.js"(exports, module2) {
     "use strict";
     if (process.env.NODE_ENV === "production") {
       module2.exports = require_react_is_production_min();
@@ -1833,315 +1833,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/web-theme.ts
-var import_polished = require("polished");
-var color = {
-  // Official color palette
-  primary: "#FF4785",
-  // coral
-  secondary: "#029CFD",
-  // ocean
-  secondaryLighter: "rgba(2, 157, 253, 0.9)",
-  // ocean
-  tertiary: "#FAFBFC",
-  ancillary: "#22a699",
-  // Complimentary
-  orange: "#FC521F",
-  gold: "#FFAE00",
-  green: "#66BF3C",
-  seafoam: "#37D5D3",
-  purple: "#6F2CAC",
-  ultraviolet: "#2A0481",
-  // Monochrome
-  lightest: "#FFFFFF",
-  lighter: "#F7FAFC",
-  light: "#EEF3F6",
-  mediumlight: "#ECF4F9",
-  medium: "#D9E8F2",
-  mediumdark: "#73828C",
-  dark: "#5C6870",
-  darker: "#454E54",
-  darkest: "#2E3438",
-  // For borders
-  border: "hsla(203, 50%, 30%, 0.15)",
-  // Status
-  positive: "#66BF3C",
-  negative: "#FF4400",
-  warning: "#E69D00",
-  critical: "#FFFFFF",
-  // Text
-  defaultText: "#2E3438",
-  inverseText: "#FFFFFF",
-  positiveText: "#448028",
-  negativeText: "#D43900",
-  warningText: "#A15C20"
-};
-var background = {
-  app: "#F6F9FC",
-  bar: color.lightest,
-  content: color.lightest,
-  preview: color.lightest,
-  gridCellSize: 10,
-  hoverable: (0, import_polished.transparentize)(0.9, color.secondary),
-  // hover state for items in a list
-  // Notification, error, and warning backgrounds
-  positive: "#E1FFD4",
-  negative: "#FEDED2",
-  warning: "#FFF5CF",
-  critical: "#FF4400"
-};
-var light = {
-  base: "light",
-  // Storybook-specific color palette
-  colorPrimary: "#FF4785",
-  // coral
-  colorSecondary: "#029CFD",
-  // ocean
-  // UI
-  appBg: background.app,
-  appContentBg: color.lightest,
-  appPreviewBg: color.lightest,
-  appBorderColor: color.border,
-  appBorderRadius: 4,
-  // Fonts
-  // Text colors
-  textColor: color.darkest,
-  textInverseColor: color.lightest,
-  textMutedColor: color.dark,
-  // Toolbar default and active colors
-  barTextColor: color.mediumdark,
-  barHoverColor: color.secondary,
-  barSelectedColor: color.secondary,
-  barBg: color.lightest,
-  // Form colors
-  buttonBg: background.app,
-  buttonBorder: color.medium,
-  booleanBg: color.mediumlight,
-  booleanSelectedBg: color.lightest,
-  inputBg: color.lightest,
-  inputBorder: color.border,
-  inputTextColor: color.darkest,
-  inputBorderRadius: 4
-};
-var dark = {
-  base: "dark",
-  // Storybook-specific color palette
-  colorPrimary: "#FF4785",
-  // coral
-  colorSecondary: "#029CFD",
-  // ocean
-  // UI
-  appBg: "#222425",
-  appContentBg: "#1B1C1D",
-  appPreviewBg: color.lightest,
-  appBorderColor: "rgba(255,255,255,.1)",
-  appBorderRadius: 4,
-  // Text colors
-  textColor: "#C9CDCF",
-  textInverseColor: "#222425",
-  textMutedColor: "#798186",
-  // Toolbar default and active colors
-  barTextColor: color.mediumdark,
-  barHoverColor: color.secondary,
-  barSelectedColor: color.secondary,
-  barBg: "#292C2E",
-  // Form colors
-  buttonBg: "#222425",
-  buttonBorder: "rgba(255,255,255,.1)",
-  booleanBg: "#222425",
-  booleanSelectedBg: "#2E3438",
-  inputBg: "#1B1C1D",
-  inputBorder: "rgba(255,255,255,.1)",
-  inputTextColor: color.lightest,
-  inputBorderRadius: 4
-};
-
-// src/theme.ts
-var typography = {
-  weight: {
-    regular: "400",
-    bold: "700"
-  },
-  size: {
-    s1: 12,
-    s2: 14,
-    s3: 16,
-    m1: 20,
-    m2: 24,
-    m3: 28,
-    l1: 32,
-    l2: 40,
-    l3: 48,
-    code: 90
-  }
-};
-var theme = {
-  base: "light",
-  textMutedColor: color.dark,
-  color: {
-    primary: light.colorPrimary,
-    secondary: light.colorSecondary,
-    secondaryLighter: color.secondaryLighter,
-    tertiary: color.tertiary,
-    ancillary: color.ancillary,
-    // Complimentary
-    orange: color.orange,
-    gold: color.gold,
-    green: color.green,
-    seafoam: color.seafoam,
-    purple: color.purple,
-    ultraviolet: color.ultraviolet,
-    // Monochrome
-    lightest: color.lightest,
-    lighter: color.lighter,
-    light: color.light,
-    mediumlight: color.mediumlight,
-    medium: color.medium,
-    mediumdark: color.mediumdark,
-    dark: color.dark,
-    darker: color.darker,
-    darkest: color.darkest,
-    // For borders
-    border: color.border,
-    // Status
-    positive: color.positive,
-    negative: color.negative,
-    warning: color.warning,
-    critical: color.critical,
-    defaultText: light.textColor || color.darkest,
-    inverseText: light.textInverseColor || color.lightest,
-    positiveText: color.positiveText,
-    negativeText: color.negativeText,
-    warningText: color.warningText
-  },
-  background: {
-    app: light.appBg,
-    bar: light.barBg,
-    content: light.appContentBg,
-    preview: light.appPreviewBg,
-    gridCellSize: light.gridCellSize || background.gridCellSize,
-    hoverable: background.hoverable,
-    positive: background.positive,
-    negative: background.negative,
-    warning: background.warning,
-    critical: background.critical
-  },
-  typography: {
-    weight: typography.weight,
-    size: typography.size
-  },
-  input: {
-    background: light.inputBg,
-    border: light.inputBorder,
-    borderRadius: light.inputBorderRadius,
-    color: light.inputTextColor,
-    paddingHorizontal: 10,
-    paddingVertical: 6
-  },
-  button: {
-    background: light.buttonBg || light.inputBg,
-    border: light.buttonBorder || light.inputBorder
-  },
-  boolean: {
-    background: light.booleanBg || light.inputBorder,
-    selectedBackground: light.booleanSelectedBg || light.inputBg
-  },
-  // UI
-  layoutMargin: 10,
-  appBorderColor: light.appBorderColor,
-  appBorderRadius: light.appBorderRadius,
-  // Toolbar default/active colors
-  barTextColor: light.barTextColor,
-  barHoverColor: light.barHoverColor || light.colorSecondary,
-  barSelectedColor: light.barSelectedColor || light.colorSecondary,
-  barBg: light.barBg,
-  // Brand logo/text
-  brand: void 0
-};
-var darkTheme = {
-  base: "dark",
-  textMutedColor: "#798186",
-  color: {
-    primary: dark.colorPrimary,
-    secondary: dark.colorSecondary,
-    secondaryLighter: color.secondaryLighter,
-    tertiary: color.tertiary,
-    ancillary: color.ancillary,
-    // Complimentary
-    orange: color.orange,
-    gold: color.gold,
-    green: color.green,
-    seafoam: color.seafoam,
-    purple: color.purple,
-    ultraviolet: color.ultraviolet,
-    // Monochrome
-    lightest: color.lightest,
-    lighter: color.lighter,
-    light: color.light,
-    mediumlight: color.mediumlight,
-    medium: color.medium,
-    mediumdark: color.mediumdark,
-    dark: color.dark,
-    darker: color.darker,
-    darkest: color.darkest,
-    // For borders
-    border: color.border,
-    // Status
-    positive: color.positive,
-    negative: color.negative,
-    warning: color.warning,
-    critical: color.critical,
-    defaultText: dark.textColor || color.darkest,
-    inverseText: dark.textInverseColor || color.lightest,
-    positiveText: color.positiveText,
-    negativeText: color.negativeText,
-    warningText: color.warningText
-  },
-  background: {
-    app: dark.appBg,
-    bar: dark.barBg,
-    content: dark.appContentBg,
-    preview: dark.appPreviewBg,
-    gridCellSize: dark.gridCellSize || background.gridCellSize,
-    hoverable: background.hoverable,
-    positive: background.positive,
-    negative: background.negative,
-    warning: background.warning,
-    critical: background.critical
-  },
-  typography: {
-    weight: typography.weight,
-    size: typography.size
-  },
-  input: {
-    background: dark.inputBg,
-    border: dark.inputBorder,
-    borderRadius: dark.inputBorderRadius,
-    color: dark.inputTextColor,
-    paddingHorizontal: 10,
-    paddingVertical: 6
-  },
-  button: {
-    background: dark.buttonBg || dark.inputBg,
-    border: dark.buttonBorder || dark.inputBorder
-  },
-  boolean: {
-    background: dark.booleanBg || dark.inputBorder,
-    selectedBackground: dark.booleanSelectedBg || dark.inputBg
-  },
-  // UI
-  layoutMargin: 10,
-  appBorderColor: dark.appBorderColor,
-  appBorderRadius: dark.appBorderRadius,
-  // Toolbar default/active colors
-  barTextColor: dark.barTextColor,
-  barHoverColor: dark.barHoverColor || dark.colorSecondary,
-  barSelectedColor: dark.barSelectedColor || dark.colorSecondary,
-  barBg: dark.barBg,
-  // Brand logo/text
-  brand: void 0
-};
-
 // ../../node_modules/@emotion/native/dist/emotion-native.esm.js
 var reactNative = __toESM(require("react-native"));
 var import_react_native = require("react-native");
@@ -3176,82 +2867,391 @@ function convertStyles(str) {
       console.error(errorMsg);
     }
   }
-}
-var testOmitPropsOnComponent = function testOmitPropsOnComponent2(prop) {
-  return prop !== "theme" && prop !== "as";
+}
+var testOmitPropsOnComponent = function testOmitPropsOnComponent2(prop) {
+  return prop !== "theme" && prop !== "as";
+};
+function createStyled(StyleSheet4, options) {
+  var _options$getShouldFor;
+  var getShouldForwardProp = (_options$getShouldFor = options == null ? void 0 : options.getShouldForwardProp) != null ? _options$getShouldFor : function() {
+    return testOmitPropsOnComponent;
+  };
+  var css2 = createCss(StyleSheet4);
+  return function createEmotion(component, options2) {
+    var shouldForwardProp = options2 && options2.shouldForwardProp ? options2.shouldForwardProp : void 0;
+    var defaultShouldForwardProp = shouldForwardProp || getShouldForwardProp(component);
+    var shouldUseAs = !defaultShouldForwardProp("as");
+    return function createStyledComponent() {
+      var styles2;
+      for (var _len = arguments.length, rawStyles = new Array(_len), _key = 0; _key < _len; _key++) {
+        rawStyles[_key] = arguments[_key];
+      }
+      if (rawStyles[0] == null || rawStyles[0].raw === void 0) {
+        styles2 = rawStyles;
+      } else {
+        styles2 = interleave(rawStyles);
+      }
+      var Styled = /* @__PURE__ */ React4.forwardRef(function(props, ref) {
+        var finalTag = shouldUseAs && props.as || component;
+        var mergedProps = props;
+        if (props.theme == null) {
+          mergedProps = {};
+          for (var key in props) {
+            mergedProps[key] = props[key];
+          }
+          mergedProps.theme = React4.useContext(ThemeContext);
+        }
+        var finalShouldForwardProp = shouldUseAs && shouldForwardProp === void 0 ? getShouldForwardProp(finalTag) : defaultShouldForwardProp;
+        var newProps = {};
+        for (var _key2 in props) {
+          if (shouldUseAs && _key2 === "as")
+            continue;
+          if (finalShouldForwardProp(_key2)) {
+            newProps[_key2] = props[_key2];
+          }
+        }
+        newProps.style = [css2.apply(mergedProps, styles2), props.style];
+        if (ref) {
+          newProps.ref = ref;
+        }
+        return /* @__PURE__ */ React4.createElement(finalTag, newProps);
+      });
+      Styled.displayName = "emotion(" + getDisplayName(component) + ")";
+      var withComponent = function withComponent2(newComponent) {
+        return createEmotion(newComponent).apply(void 0, styles2);
+      };
+      var castedStyled = Styled;
+      castedStyled.withComponent = withComponent;
+      return castedStyled;
+    };
+  };
+}
+var getDisplayName = function getDisplayName2(primitive) {
+  return typeof primitive === "string" ? primitive : primitive.displayName || primitive.name || "Styled";
+};
+
+// ../../node_modules/@emotion/native/dist/emotion-native.esm.js
+var styled = createStyled(import_react_native.StyleSheet);
+var css = createCss(reactNative.StyleSheet);
+var components = ["ActivityIndicator", "Button", "DatePickerIOS", "DrawerLayoutAndroid", "FlatList", "Image", "ImageBackground", "KeyboardAvoidingView", "ListView", "Modal", "NavigatorIOS", "Picker", "PickerIOS", "Pressable", "ProgressBarAndroid", "ProgressViewIOS", "RecyclerViewBackedScrollView", "RefreshControl", "SafeAreaView", "ScrollView", "SectionList", "SegmentedControlIOS", "Slider", "SnapshotViewIOS", "StatusBar", "SwipeableListView", "Switch", "SwitchIOS", "TabBarIOS", "Text", "TextInput", "ToolbarAndroid", "TouchableHighlight", "TouchableNativeFeedback", "TouchableOpacity", "TouchableWithoutFeedback", "View", "ViewPagerAndroid"];
+var index = components.reduce(function(acc, comp) {
+  return Object.defineProperty(acc, comp, {
+    enumerable: true,
+    configurable: false,
+    get: function get() {
+      return styled(reactNative[comp]);
+    }
+  });
+}, styled);
+
+// src/web-theme.ts
+var import_polished = require("polished");
+var color = {
+  // Official color palette
+  primary: "#FF4785",
+  // coral
+  secondary: "#029CFD",
+  // ocean
+  secondaryLighter: "rgba(2, 157, 253, 0.9)",
+  // ocean
+  tertiary: "#FAFBFC",
+  ancillary: "#22a699",
+  // Complimentary
+  orange: "#FC521F",
+  gold: "#FFAE00",
+  green: "#66BF3C",
+  seafoam: "#37D5D3",
+  purple: "#6F2CAC",
+  ultraviolet: "#2A0481",
+  // Monochrome
+  lightest: "#FFFFFF",
+  lighter: "#F7FAFC",
+  light: "#EEF3F6",
+  mediumlight: "#ECF4F9",
+  medium: "#D9E8F2",
+  mediumdark: "#73828C",
+  dark: "#5C6870",
+  darker: "#454E54",
+  darkest: "#2E3438",
+  // For borders
+  border: "hsla(203, 50%, 30%, 0.15)",
+  // Status
+  positive: "#66BF3C",
+  negative: "#FF4400",
+  warning: "#E69D00",
+  critical: "#FFFFFF",
+  // Text
+  defaultText: "#2E3438",
+  inverseText: "#FFFFFF",
+  positiveText: "#448028",
+  negativeText: "#D43900",
+  warningText: "#A15C20"
+};
+var background = {
+  app: "#F6F9FC",
+  bar: color.lightest,
+  content: color.lightest,
+  preview: color.lightest,
+  gridCellSize: 10,
+  hoverable: (0, import_polished.transparentize)(0.9, color.secondary),
+  // hover state for items in a list
+  // Notification, error, and warning backgrounds
+  positive: "#E1FFD4",
+  negative: "#FEDED2",
+  warning: "#FFF5CF",
+  critical: "#FF4400"
+};
+var light = {
+  base: "light",
+  // Storybook-specific color palette
+  colorPrimary: "#FF4785",
+  // coral
+  colorSecondary: "#029CFD",
+  // ocean
+  // UI
+  appBg: background.app,
+  appContentBg: color.lightest,
+  appPreviewBg: color.lightest,
+  appBorderColor: color.border,
+  appBorderRadius: 4,
+  // Fonts
+  // Text colors
+  textColor: color.darkest,
+  textInverseColor: color.lightest,
+  textMutedColor: color.dark,
+  // Toolbar default and active colors
+  barTextColor: color.mediumdark,
+  barHoverColor: color.secondary,
+  barSelectedColor: color.secondary,
+  barBg: color.lightest,
+  // Form colors
+  buttonBg: background.app,
+  buttonBorder: color.medium,
+  booleanBg: color.mediumlight,
+  booleanSelectedBg: color.lightest,
+  inputBg: color.lightest,
+  inputBorder: color.border,
+  inputTextColor: color.darkest,
+  inputBorderRadius: 4
+};
+var dark = {
+  base: "dark",
+  // Storybook-specific color palette
+  colorPrimary: "#FF4785",
+  // coral
+  colorSecondary: "#029CFD",
+  // ocean
+  // UI
+  appBg: "#222425",
+  appContentBg: "#1B1C1D",
+  appPreviewBg: color.lightest,
+  appBorderColor: "rgba(255,255,255,.1)",
+  appBorderRadius: 4,
+  // Text colors
+  textColor: "#C9CDCF",
+  textInverseColor: "#222425",
+  textMutedColor: "#798186",
+  // Toolbar default and active colors
+  barTextColor: color.mediumdark,
+  barHoverColor: color.secondary,
+  barSelectedColor: color.secondary,
+  barBg: "#292C2E",
+  // Form colors
+  buttonBg: "#222425",
+  buttonBorder: "rgba(255,255,255,.1)",
+  booleanBg: "#222425",
+  booleanSelectedBg: "#2E3438",
+  inputBg: "#1B1C1D",
+  inputBorder: "rgba(255,255,255,.1)",
+  inputTextColor: color.lightest,
+  inputBorderRadius: 4
+};
+
+// src/theme.ts
+var typography = {
+  weight: {
+    regular: "400",
+    bold: "700"
+  },
+  size: {
+    s1: 12,
+    s2: 14,
+    s3: 16,
+    m1: 20,
+    m2: 24,
+    m3: 28,
+    l1: 32,
+    l2: 40,
+    l3: 48,
+    code: 90
+  }
 };
-function createStyled(StyleSheet4, options) {
-  var _options$getShouldFor;
-  var getShouldForwardProp = (_options$getShouldFor = options == null ? void 0 : options.getShouldForwardProp) != null ? _options$getShouldFor : function() {
-    return testOmitPropsOnComponent;
-  };
-  var css2 = createCss(StyleSheet4);
-  return function createEmotion(component, options2) {
-    var shouldForwardProp = options2 && options2.shouldForwardProp ? options2.shouldForwardProp : void 0;
-    var defaultShouldForwardProp = shouldForwardProp || getShouldForwardProp(component);
-    var shouldUseAs = !defaultShouldForwardProp("as");
-    return function createStyledComponent() {
-      var styles2;
-      for (var _len = arguments.length, rawStyles = new Array(_len), _key = 0; _key < _len; _key++) {
-        rawStyles[_key] = arguments[_key];
-      }
-      if (rawStyles[0] == null || rawStyles[0].raw === void 0) {
-        styles2 = rawStyles;
-      } else {
-        styles2 = interleave(rawStyles);
-      }
-      var Styled = /* @__PURE__ */ React4.forwardRef(function(props, ref) {
-        var finalTag = shouldUseAs && props.as || component;
-        var mergedProps = props;
-        if (props.theme == null) {
-          mergedProps = {};
-          for (var key in props) {
-            mergedProps[key] = props[key];
-          }
-          mergedProps.theme = React4.useContext(ThemeContext);
-        }
-        var finalShouldForwardProp = shouldUseAs && shouldForwardProp === void 0 ? getShouldForwardProp(finalTag) : defaultShouldForwardProp;
-        var newProps = {};
-        for (var _key2 in props) {
-          if (shouldUseAs && _key2 === "as")
-            continue;
-          if (finalShouldForwardProp(_key2)) {
-            newProps[_key2] = props[_key2];
-          }
-        }
-        newProps.style = [css2.apply(mergedProps, styles2), props.style];
-        if (ref) {
-          newProps.ref = ref;
-        }
-        return /* @__PURE__ */ React4.createElement(finalTag, newProps);
-      });
-      Styled.displayName = "emotion(" + getDisplayName(component) + ")";
-      var withComponent = function withComponent2(newComponent) {
-        return createEmotion(newComponent).apply(void 0, styles2);
-      };
-      var castedStyled = Styled;
-      castedStyled.withComponent = withComponent;
-      return castedStyled;
-    };
-  };
-}
-var getDisplayName = function getDisplayName2(primitive) {
-  return typeof primitive === "string" ? primitive : primitive.displayName || primitive.name || "Styled";
+var theme = {
+  base: "light",
+  textMutedColor: color.dark,
+  color: {
+    primary: light.colorPrimary,
+    secondary: light.colorSecondary,
+    secondaryLighter: color.secondaryLighter,
+    tertiary: color.tertiary,
+    ancillary: color.ancillary,
+    // Complimentary
+    orange: color.orange,
+    gold: color.gold,
+    green: color.green,
+    seafoam: color.seafoam,
+    purple: color.purple,
+    ultraviolet: color.ultraviolet,
+    // Monochrome
+    lightest: color.lightest,
+    lighter: color.lighter,
+    light: color.light,
+    mediumlight: color.mediumlight,
+    medium: color.medium,
+    mediumdark: color.mediumdark,
+    dark: color.dark,
+    darker: color.darker,
+    darkest: color.darkest,
+    // For borders
+    border: color.border,
+    // Status
+    positive: color.positive,
+    negative: color.negative,
+    warning: color.warning,
+    critical: color.critical,
+    defaultText: light.textColor || color.darkest,
+    inverseText: light.textInverseColor || color.lightest,
+    positiveText: color.positiveText,
+    negativeText: color.negativeText,
+    warningText: color.warningText
+  },
+  background: {
+    app: light.appBg,
+    bar: light.barBg,
+    content: light.appContentBg,
+    preview: light.appPreviewBg,
+    gridCellSize: light.gridCellSize || background.gridCellSize,
+    hoverable: background.hoverable,
+    positive: background.positive,
+    negative: background.negative,
+    warning: background.warning,
+    critical: background.critical
+  },
+  typography: {
+    weight: typography.weight,
+    size: typography.size
+  },
+  input: {
+    background: light.inputBg,
+    border: light.inputBorder,
+    borderRadius: light.inputBorderRadius,
+    color: light.inputTextColor,
+    paddingHorizontal: 10,
+    paddingVertical: 6
+  },
+  button: {
+    background: light.buttonBg || light.inputBg,
+    border: light.buttonBorder || light.inputBorder
+  },
+  boolean: {
+    background: light.booleanBg || light.inputBorder,
+    selectedBackground: light.booleanSelectedBg || light.inputBg
+  },
+  // UI
+  layoutMargin: 10,
+  appBorderColor: light.appBorderColor,
+  appBorderRadius: light.appBorderRadius,
+  // Toolbar default/active colors
+  barTextColor: light.barTextColor,
+  barHoverColor: light.barHoverColor || light.colorSecondary,
+  barSelectedColor: light.barSelectedColor || light.colorSecondary,
+  barBg: light.barBg,
+  // Brand logo/text
+  brand: void 0
+};
+var darkTheme = {
+  base: "dark",
+  textMutedColor: "#798186",
+  color: {
+    primary: dark.colorPrimary,
+    secondary: dark.colorSecondary,
+    secondaryLighter: color.secondaryLighter,
+    tertiary: color.tertiary,
+    ancillary: color.ancillary,
+    // Complimentary
+    orange: color.orange,
+    gold: color.gold,
+    green: color.green,
+    seafoam: color.seafoam,
+    purple: color.purple,
+    ultraviolet: color.ultraviolet,
+    // Monochrome
+    lightest: color.lightest,
+    lighter: color.lighter,
+    light: color.light,
+    mediumlight: color.mediumlight,
+    medium: color.medium,
+    mediumdark: color.mediumdark,
+    dark: color.dark,
+    darker: color.darker,
+    darkest: color.darkest,
+    // For borders
+    border: color.border,
+    // Status
+    positive: color.positive,
+    negative: color.negative,
+    warning: color.warning,
+    critical: color.critical,
+    defaultText: dark.textColor || color.darkest,
+    inverseText: dark.textInverseColor || color.lightest,
+    positiveText: color.positiveText,
+    negativeText: color.negativeText,
+    warningText: color.warningText
+  },
+  background: {
+    app: dark.appBg,
+    bar: dark.barBg,
+    content: dark.appContentBg,
+    preview: dark.appPreviewBg,
+    gridCellSize: dark.gridCellSize || background.gridCellSize,
+    hoverable: background.hoverable,
+    positive: background.positive,
+    negative: background.negative,
+    warning: background.warning,
+    critical: background.critical
+  },
+  typography: {
+    weight: typography.weight,
+    size: typography.size
+  },
+  input: {
+    background: dark.inputBg,
+    border: dark.inputBorder,
+    borderRadius: dark.inputBorderRadius,
+    color: dark.inputTextColor,
+    paddingHorizontal: 10,
+    paddingVertical: 6
+  },
+  button: {
+    background: dark.buttonBg || dark.inputBg,
+    border: dark.buttonBorder || dark.inputBorder
+  },
+  boolean: {
+    background: dark.booleanBg || dark.inputBorder,
+    selectedBackground: dark.booleanSelectedBg || dark.inputBg
+  },
+  // UI
+  layoutMargin: 10,
+  appBorderColor: dark.appBorderColor,
+  appBorderRadius: dark.appBorderRadius,
+  // Toolbar default/active colors
+  barTextColor: dark.barTextColor,
+  barHoverColor: dark.barHoverColor || dark.colorSecondary,
+  barSelectedColor: dark.barSelectedColor || dark.colorSecondary,
+  barBg: dark.barBg,
+  // Brand logo/text
+  brand: void 0
 };
-
-// ../../node_modules/@emotion/native/dist/emotion-native.esm.js
-var styled = createStyled(import_react_native.StyleSheet);
-var css = createCss(reactNative.StyleSheet);
-var components = ["ActivityIndicator", "Button", "DatePickerIOS", "DrawerLayoutAndroid", "FlatList", "Image", "ImageBackground", "KeyboardAvoidingView", "ListView", "Modal", "NavigatorIOS", "Picker", "PickerIOS", "Pressable", "ProgressBarAndroid", "ProgressViewIOS", "RecyclerViewBackedScrollView", "RefreshControl", "SafeAreaView", "ScrollView", "SectionList", "SegmentedControlIOS", "Slider", "SnapshotViewIOS", "StatusBar", "SwipeableListView", "Switch", "SwitchIOS", "TabBarIOS", "Text", "TextInput", "ToolbarAndroid", "TouchableHighlight", "TouchableNativeFeedback", "TouchableOpacity", "TouchableWithoutFeedback", "View", "ViewPagerAndroid"];
-var index = components.reduce(function(acc, comp) {
-  return Object.defineProperty(acc, comp, {
-    enumerable: true,
-    configurable: false,
-    get: function get() {
-      return styled(reactNative[comp]);
-    }
-  });
-}, styled);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ThemeProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-theming",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-beta.10",
   "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook",
   "keywords": [
     "react",
@@ -43,5 +43,5 @@
     "dist/**/*",
     "README.md"
   ],
-  "gitHead": "16659266d8aa9816490af41d0a840579a2f96805"
+  "gitHead": "bce7f35509d03e5a5efabb8862e993ea98e201d6"
 }