@splunk/themes 0.23.0 → 1.0.0-beta.2

package/types/enterprise/light.d.ts

@@ -1,71 +1,77 @@
 declare const theme: {
-    borderLightColor: string;
-    zindexLayer: number;
-    zindexFixedNavbar: number;
-    zindexModalBackdrop: number;
-    zindexModal: number;
-    zindexPopover: number;
-    zindexToastMessages: number;
-    border: string;
-    activeBorder: string;
-    focusShadow: string;
-    focusShadowInset: string;
-    overlayShadow: string;
-    draggableBackground: string;
+    accentColorPositive: string;
+    accentColorWarning: string;
+    accentColorAlert: string;
+    accentColorNegative: string;
     textColor: string;
     textGray: string;
-    textDisabledColor: string;
     linkColor: string;
     linkColorHover: string;
-    borderActiveColor: string;
-    borderColor: string;
-    borderColorWeak: string;
-    borderColorStrong: string;
-    focusColor: string;
-    backgroundColorHover: string;
+    borderLightColor: string;
+    textDisabledColor: string;
     backgroundColor: string;
-    transparent: string;
-    fontWeightLight: number;
-    fontWeightNormal: number;
-    fontWeightSemiBold: number;
-    fontWeightBold: number;
-    fontWeightHeavy: number;
-    fontWeightExtraBold: number;
-    sansFontFamily: string;
-    serifFontFamily: string;
-    monoFontFamily: string;
-    fontFamily: string;
-    syntaxBlue: string;
-    syntaxBlueLight: string;
-    syntaxBrown: string;
-    syntaxGray: string;
-    syntaxGreen: string;
-    syntaxGreenLight: string;
-    syntaxOrange: string;
-    syntaxPink: string;
-    syntaxPurple: string;
-    syntaxPurpleLight: string;
-    syntaxRed: string;
-    syntaxRedLight: string;
-    syntaxTeal: string;
-    statusColorInfo: string;
-    statusColorInfoWeak: string;
-    statusColorInfoStrong: string;
-    statusColorNormal: string;
-    statusColorNormalWeak: string;
-    statusColorNormalStrong: string;
-    statusColorLow: string;
-    statusColorLowWeak: string;
-    statusColorLowStrong: string;
-    statusColorMedium: string;
-    statusColorMediumWeak: string;
-    statusColorMediumStrong: string;
-    statusColorHigh: string;
-    statusColorHighWeak: string;
-    statusColorHighStrong: string;
-    statusColorCritical: string;
-    statusColorCriticalWeak: string;
-    statusColorCriticalStrong: string;
+    border: string;
+    brandColorL50: string;
+    brandColorL40: string;
+    brandColorL30: string;
+    brandColorL20: string;
+    brandColorL10: string;
+    brandColorD10: string;
+    brandColorD20: string;
+    brandColorD30: string;
+    brandColorD40: string;
+    brandColorD50: string;
+    gray25: string;
+    gray22: string;
+    gray20: string;
+    accentColorL50: string;
+    accentColorL40: string;
+    accentColorL30: string;
+    accentColorL20: string;
+    accentColorL10: string;
+    accentColorD20: string;
+    accentColorD30: string;
+    accentColorD40: string;
+    accentColorD50: string;
+    errorColorL50: string;
+    errorColorL40: string;
+    errorColorL30: string;
+    errorColorL20: string;
+    errorColorD30: string;
+    errorColorD40: string;
+    errorColorD50: string;
+    alertColorL50: string;
+    alertColorL40: string;
+    alertColorL30: string;
+    alertColorL20: string;
+    alertColorD20: string;
+    alertColorD30: string;
+    alertColorD40: string;
+    alertColorD50: string;
+    warningColorL50: string;
+    warningColorL40: string;
+    warningColorL30: string;
+    warningColorL20: string;
+    warningColorD20: string;
+    warningColorD30: string;
+    warningColorD40: string;
+    warningColorD50: string;
+    successColorL50: string;
+    successColorL40: string;
+    successColorL30: string;
+    successColorL20: string;
+    successColorD20: string;
+    successColorD30: string;
+    successColorD40: string;
+    successColorD50: string;
+    infoColorL50: string;
+    infoColorL40: string;
+    infoColorL30: string;
+    infoColorL20: string;
+    infoColorD20: string;
+    infoColorD30: string;
+    infoColorD40: string;
+    infoColorD50: string;
     diverging1ColorA: string;
     diverging1ColorB: string;
     diverging2ColorA: string;
@@ -136,95 +142,389 @@ declare const theme: {
     cat29ColorL: string;
     cat30Color: string;
     cat30ColorL: string;
-    infoColorL50: string;
-    infoColorL40: string;
-    infoColorL30: string;
-    infoColorL20: string;
-    infoColorL10: string;
+    syntaxBlueLight: string;
+    syntaxGreenLight: string;
+    syntaxPurpleLight: string;
+    syntaxRedLight: string;
+    highLow4LHigh: string;
+    highLow4LLow: string;
+    highLow4DHigh: string;
+    highLow4DLow: string;
+    highLow3LHigh: string;
+    highLow3LLow: string;
+    highLow3DHigh: string;
+    highLow3DLow: string;
+    highLow2LHigh: string;
+    highLow2LLow: string;
+    highLow2DHigh: string;
+    highLow2DLow: string;
+    highLow1LHigh: string;
+    highLow1LLow: string;
+    highLow1DHigh: string;
+    highLow1DLow: string;
+    sequential6L1: string;
+    sequential6L2: string;
+    sequential6L3: string;
+    sequential6L4: string;
+    sequential6L5: string;
+    sequential6L6: string;
+    sequential6L7: string;
+    sequential6D1: string;
+    sequential6D2: string;
+    sequential6D3: string;
+    sequential6D4: string;
+    sequential6D5: string;
+    sequential6D6: string;
+    sequential6D7: string;
+    sequential5L1: string;
+    sequential5L2: string;
+    sequential5L3: string;
+    sequential5L4: string;
+    sequential5L5: string;
+    sequential5L6: string;
+    sequential5L7: string;
+    sequential5D1: string;
+    sequential5D2: string;
+    sequential5D3: string;
+    sequential5D4: string;
+    sequential5D5: string;
+    sequential5D6: string;
+    sequential5D7: string;
+    sequential4L1: string;
+    sequential4L2: string;
+    sequential4L3: string;
+    sequential4L4: string;
+    sequential4L5: string;
+    sequential4L6: string;
+    sequential4L7: string;
+    sequential4D1: string;
+    sequential4D2: string;
+    sequential4D3: string;
+    sequential4D4: string;
+    sequential4D5: string;
+    sequential4D6: string;
+    sequential4D7: string;
+    sequential3L1: string;
+    sequential3L2: string;
+    sequential3L3: string;
+    sequential3L4: string;
+    sequential3L5: string;
+    sequential3L6: string;
+    sequential3L7: string;
+    sequential3D1: string;
+    sequential3D2: string;
+    sequential3D3: string;
+    sequential3D4: string;
+    sequential3D5: string;
+    sequential3D6: string;
+    sequential3D7: string;
+    sequential2L1: string;
+    sequential2L2: string;
+    sequential2L3: string;
+    sequential2L4: string;
+    sequential2L5: string;
+    sequential2L6: string;
+    sequential2L7: string;
+    sequential2D1: string;
+    sequential2D2: string;
+    sequential2D3: string;
+    sequential2D4: string;
+    sequential2D5: string;
+    sequential2D6: string;
+    sequential2D7: string;
+    sequential1L1: string;
+    sequential1L2: string;
+    sequential1L3: string;
+    sequential1L4: string;
+    sequential1L5: string;
+    sequential1L6: string;
+    sequential1L7: string;
+    sequential1D1: string;
+    sequential1D2: string;
+    sequential1D3: string;
+    sequential1D4: string;
+    sequential1D5: string;
+    sequential1D6: string;
+    sequential1D7: string;
+    divergent4L1: string;
+    divergent4L2: string;
+    divergent4L3: string;
+    divergent4L4: string;
+    divergent4L5: string;
+    divergent4L6: string;
+    divergent4L7: string;
+    divergent4D1: string;
+    divergent4D2: string;
+    divergent4D3: string;
+    divergent4D4: string;
+    divergent4D5: string;
+    divergent4D6: string;
+    divergent4D7: string;
+    divergent3L1: string;
+    divergent3L2: string;
+    divergent3L3: string;
+    divergent3L4: string;
+    divergent3L5: string;
+    divergent3L6: string;
+    divergent3L7: string;
+    divergent3D1: string;
+    divergent3D2: string;
+    divergent3D3: string;
+    divergent3D4: string;
+    divergent3D5: string;
+    divergent3D6: string;
+    divergent3D7: string;
+    divergent2L1: string;
+    divergent2L2: string;
+    divergent2L3: string;
+    divergent2L4: string;
+    divergent2L5: string;
+    divergent2L6: string;
+    divergent2L7: string;
+    divergent2D1: string;
+    divergent2D2: string;
+    divergent2D3: string;
+    divergent2D4: string;
+    divergent2D5: string;
+    divergent2D6: string;
+    divergent2D7: string;
+    divergent1L1: string;
+    divergent1L2: string;
+    divergent1L3: string;
+    divergent1L4: string;
+    divergent1L5: string;
+    divergent1L6: string; /**
+     * ## Neutral colors
+     * Neutrals are used for dividers and as backup colors that can sparingly be used for cases, when the other defined colors are not enough.
+     *
+     * @colorSet verbose
+     */
+    divergent1L7: string;
+    divergent1D1: string;
+    divergent1D2: string;
+    divergent1D3: string;
+    divergent1D4: string;
+    divergent1D5: string;
+    divergent1D6: string;
+    divergent1D7: string;
+    categorical2L1: string;
+    categorical2L2: string;
+    categorical2L3: string;
+    categorical2L4: string;
+    categorical2L5: string;
+    categorical2L6: string;
+    categorical2L7: string;
+    categorical2D1: string;
+    categorical2D2: string;
+    categorical2D3: string;
+    categorical2D4: string;
+    categorical2D5: string;
+    categorical2D6: string;
+    categorical2D7: string;
+    categorical1L1: string;
+    categorical1L2: string;
+    categorical1L3: string;
+    categorical1L4: string;
+    categorical1L5: string;
+    categorical1L6: string;
+    categorical1L7: string;
+    categorical1D1: string;
+    categorical1D2: string;
+    categorical1D3: string;
+    categorical1D4: string;
+    categorical1D5: string;
+    categorical1D6: string;
+    categorical1D7: string;
+    static1: string;
+    static2: string;
+    static3: string;
+    static4: string;
+    static5: string;
+    static6: string;
+    static7: string;
+    static8: string;
+    static9: string;
+    static10: string;
+    static11: string;
+    static12: string;
+    static13: string;
+    static14: string;
+    static15: string;
+    static16: string;
+    static17: string;
+    static18: string;
+    static19: string;
+    static20: string;
+    zindexLayer: number;
+    zindexFixedNavbar: number;
+    zindexModalBackdrop: number;
+    zindexModal: number;
+    zindexPopover: number;
+    zindexToastMessages: number;
+    interactiveColorPrimary: string;
+    interactiveColorBorder: string;
+    interactiveColorBorderActive: string;
+    interactiveColorBorderHover: string;
+    interactiveColorBorderDisabled: string;
+    interactiveColorOverlaySelected: string;
+    interactiveColorOverlayHover: string;
+    interactiveColorOverlayActive: string;
+    interactiveColorOverlayDrag: string;
+    interactiveColorBackground: string;
+    interactiveColorBackgroundDisabled: string;
+    interactiveColorAccent: string;
+    interactiveColorAccentError: string;
+    interactiveColorAccentErrorStrong: string;
+    contentBackgroundColorNegativeWeak: string;
+    contentColorLink: string;
+    contentColorAccent: string;
+    contentColorAccentStrong: string;
+    contentColorAccentWeak: string;
+    contentColorActive: string;
+    contentColorDefault: string;
+    contentColorDisabled: string;
+    contentColorInfo: string;
+    contentColorInverted: string;
+    contentColorMuted: string;
+    contentColorNegative: string;
+    contentColorNegativeStrong: string;
+    contentColorNegativeWeak: string;
+    contentColorPositive: string;
+    contentColorWarning: string;
+    lineLength: string;
+    lineHeight: string;
+    fontSizeSmall: string;
+    fontSize: string;
+    fontSizeLarge: string;
+    fontSizeXLarge: string;
+    fontSizeXXLarge: string;
+    fontWeightLight: number;
+    fontWeightNormal: number;
+    fontWeightSemiBold: number;
+    fontWeightBold: number;
+    fontWeightHeavy: number;
+    fontWeightExtraBold: number;
+    fontFamily: string;
+    fontFamilyTitle: string;
+    sansFontFamily: string;
+    serifFontFamily: string;
+    monoFontFamily: string;
+    focusShadow: string;
+    focusShadowInset: string;
+    draggableBackground: string;
+    borderActiveColor: string;
+    backgroundColorHover: string;
+    borderColor: string;
+    borderColorWeak: string;
+    borderColorStrong: string;
+    focusColor: string;
+    syntaxBlue: string;
+    syntaxBrown: string;
+    syntaxGray: string;
+    syntaxGreen: string;
+    syntaxOrange: string;
+    syntaxPink: string;
+    syntaxPurple: string;
+    syntaxRed: string;
+    syntaxTeal: string;
+    embossShadow: string;
+    overlayShadow: string;
+    dragShadow: string;
+    modalShadow: string;
+    statusColorInfo: string;
+    statusColorInfoWeak: string;
+    statusColorInfoStrong: string;
+    statusColorNormal: string;
+    statusColorNormalWeak: string;
+    statusColorNormalStrong: string;
+    statusColorLow: string;
+    statusColorLowWeak: string;
+    statusColorLowStrong: string;
+    statusColorMedium: string;
+    statusColorMediumWeak: string;
+    statusColorMediumStrong: string;
+    /**
+     * ## Layers
+     * If a variable does not suit your purpose, set a value relatively, such as zindexModal +1.
+     *
+     * @valueSet
+     */
+    statusColorHigh: string;
+    statusColorHighWeak: string;
+    statusColorHighStrong: string;
+    statusColorCritical: string;
+    statusColorCriticalWeak: string;
+    statusColorCriticalStrong: string;
+    black: string;
+    neutral100: string;
+    neutral200: string;
+    neutral300: string;
+    neutral400: string;
+    neutral500: string;
+    white: string;
+    transparent: string;
+    actionColorBackgroundPrimary: string;
+    actionColorBackgroundPrimaryActive: string;
+    actionColorBackgroundPrimaryDisabled: string;
+    actionColorBackgroundPrimaryHover: string;
+    actionColorBackgroundSecondary: string;
+    actionColorBackgroundSecondaryActive: string;
+    actionColorBackgroundSecondaryDisabled: string;
+    actionColorBackgroundSecondaryHover: string;
+    actionColorBackgroundSubtle: string;
+    actionColorBackgroundSubtleActive: string;
+    actionColorBackgroundSubtleDisabled: string;
+    actionColorBackgroundSubtleHover: string;
+    actionColorBackgroundDestructive: string;
+    actionColorBackgroundDestructiveActive: string;
+    actionColorBackgroundDestructiveDisabled: string;
+    actionColorBackgroundDestructiveHover: string;
+    actionColorBackgroundDestructiveSecondary: string;
+    actionColorBackgroundDestructiveSecondaryActive: string;
+    actionColorBackgroundDestructiveSecondaryDisabled: string;
+    actionColorBackgroundDestructiveSecondaryHover: string;
+    actionColorBorderSecondary: string;
+    actionColorBorderSecondaryActive: string;
+    actionColorBorderSecondaryDisabled: string;
+    actionColorBorderSecondaryHover: string;
+    actionColorBorderDestructiveSecondary: string;
+    actionColorBorderDestructiveSecondaryActive: string;
+    actionColorBorderDestructiveSecondaryDisabled: string;
+    actionColorBorderDestructiveSecondaryHover: string;
+    backgroundColorNavigation: string;
+    backgroundColorPage: string;
+    backgroundColorSidebar: string;
+    backgroundColorSection: string;
+    backgroundColorDialog: string;
+    backgroundColorPopup: string;
+    backgroundColorFloating: string;
+    backgroundColorScrim: string;
+    gray30: string;
+    gray45: string;
+    gray60: string;
+    gray80: string;
+    gray92: string;
+    gray96: string;
+    gray98: string;
+    successColor: string;
+    warningColor: string;
+    alertColor: string;
+    errorColor: string;
+    accentColorD10: string;
+    accentColor: string;
     infoColor: string;
+    infoColorL10: string;
     infoColorD10: string;
-    infoColorD20: string;
-    infoColorD30: string;
-    infoColorD40: string;
-    infoColorD50: string;
-    successColorL50: string;
-    successColorL40: string;
-    successColorL30: string;
-    successColorL20: string;
     successColorL10: string;
-    successColor: string;
     successColorD10: string;
-    successColorD20: string;
-    successColorD30: string;
-    successColorD40: string;
-    successColorD50: string;
-    warningColorL50: string;
-    warningColorL40: string;
-    warningColorL30: string;
-    warningColorL20: string;
     warningColorL10: string;
-    warningColor: string;
     warningColorD10: string;
-    warningColorD20: string;
-    warningColorD30: string;
-    warningColorD40: string;
-    warningColorD50: string;
-    alertColorL50: string;
-    alertColorL40: string;
-    alertColorL30: string;
-    alertColorL20: string;
     alertColorL10: string;
-    alertColor: string;
     alertColorD10: string;
-    alertColorD20: string;
-    alertColorD30: string;
-    alertColorD40: string;
-    alertColorD50: string;
-    errorColorL50: string;
-    errorColorL40: string;
-    errorColorL30: string;
-    errorColorL20: string;
     errorColorL10: string;
-    errorColor: string;
     errorColorD10: string;
     errorColorD20: string;
-    errorColorD30: string;
-    errorColorD40: string;
-    errorColorD50: string;
-    accentColorL50: string;
-    accentColorL40: string;
-    accentColorL30: string;
-    accentColorL20: string;
-    accentColorL10: string;
-    accentColor: string;
-    accentColorD10: string;
-    accentColorD20: string;
-    accentColorD30: string;
-    accentColorD40: string;
-    accentColorD50: string;
-    white: string;
-    gray98: string;
-    gray96: string;
-    gray92: string;
-    gray80: string;
-    gray60: string;
-    gray45: string;
-    gray30: string;
-    gray25: string;
-    gray22: string;
-    gray20: string;
-    black: string;
-    brandColorL50: string;
-    brandColorL40: string;
-    brandColorL30: string;
-    brandColorL20: string;
-    brandColorL10: string;
     brandColor: string;
-    brandColorD10: string;
-    brandColorD20: string;
-    brandColorD30: string;
-    brandColorD40: string;
-    brandColorD50: string;
 };
 type Light = typeof theme;
 export default theme;

package/types/index.d.ts

@@ -4,6 +4,7 @@ export { default as mixins } from './mixins';
 export { default as pick } from './pick';
 export { default as pickVariant } from './pickVariant';
 export { default as SplunkThemeProvider } from './SplunkThemeProvider';
+export { default as unstable_splunkMagneticThemeCustomizer } from './splunk-magnetic';
 export { default as useSplunkTheme } from './useSplunkTheme';
 export { default as withSplunkTheme } from './withSplunkTheme';
 export { default as variables } from './variables';

package/types/mixins/index.d.ts

@@ -1,8 +1,16 @@
 import typography from './typography';
+import prose from './prose';
+import layout from './layout';
 export * from './utilityMixins';
+export { default as layout } from './layout';
+export * from './layout';
+export { default as prose } from './prose';
+export * from './prose';
 export { default as typography } from './typography';
 export * from './typography';
 declare const _default: {
+    layout: typeof layout;
+    prose: typeof prose;
     typography: typeof typography;
     reset: <T extends import("../types").AnyTheme, A extends import("../types").ThemedProps<import("../types").AnyTheme>>(display?: string) => import("../types").Interpolation<T, A>;
     clearfix: typeof import("./utilityMixins").clearfix;

package/types/mixins/layout.d.ts

@@ -0,0 +1,21 @@
+import { AnyTheme, Interpolation, ThemedProps } from '../types';
+/**
+ * Layout styles elements for common layout use cases
+ *
+ * #### Example
+ * ```
+ *  import styled from 'styled-components';
+ *  import { layout } from '@splunk/themes/mixins';
+ *
+ *  const Wrapper = styled.div`
+ *      ${layout()};
+ *  `;
+ * ```
+ *
+ * @name layout
+ * @kind function
+ *
+ * @public
+ */
+declare function layout<T extends AnyTheme, A extends ThemedProps>(): Interpolation<T, A>;
+export default layout;

package/types/mixins/prose.d.ts

@@ -0,0 +1,41 @@
+import { FlattenSimpleInterpolation } from 'styled-components';
+import { AnyTheme, Interpolation, ThemedProps } from '../types';
+type ProseElementSelectors = {
+    h1?: string | FlattenSimpleInterpolation;
+    h2?: string | FlattenSimpleInterpolation;
+    h3?: string | FlattenSimpleInterpolation;
+    h4?: string | FlattenSimpleInterpolation;
+    h5?: string | FlattenSimpleInterpolation;
+    h6?: string | FlattenSimpleInterpolation;
+    ul?: string | FlattenSimpleInterpolation;
+    ol?: string | FlattenSimpleInterpolation;
+    dl?: string | FlattenSimpleInterpolation;
+    p?: string | FlattenSimpleInterpolation;
+    figure?: string | FlattenSimpleInterpolation;
+    img?: string | FlattenSimpleInterpolation;
+    pre?: string | FlattenSimpleInterpolation;
+    table?: string | FlattenSimpleInterpolation;
+    fieldset?: string | FlattenSimpleInterpolation;
+    hr?: string | FlattenSimpleInterpolation;
+    blockquote?: string | FlattenSimpleInterpolation;
+};
+type ProseConfiguration = {
+    elementSelectors?: ProseElementSelectors;
+};
+/**
+ * Prose styles block-level HTML elements to create a compliant and optimal
+ * reading experience for long form text content.
+ *
+ * @name prose
+ * @kind function
+ *
+ * @param {object} [elementSelectors]
+ * By default, all elements are selected by their html tag using `*:is(<tag>)`;
+ * override that selector by setting `elementSelectors`.
+ *
+ * For example, paragraph elements are styled with the selector `*:where(p)` but that can be overridden:
+ * e.g. prose({ elementSelectors: { p: '.foo' }}) will instead style `p` elements that match `*:where(.foo)`
+ */
+declare function prose<T extends AnyTheme, A extends ThemedProps>({ elementSelectors, }?: ProseConfiguration): Interpolation<T, A>;
+export default prose;
+export { ProseElementSelectors };

package/types/mixins/tests/prose.unit.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';