@splunk/themes 0.23.0 → 1.0.0-beta.2

package/types/mixins/typography.d.ts

@@ -1,20 +1,20 @@
 import { AnyTheme, Interpolation, ThemedProps } from '../types';
-declare const typographyVariants: readonly ["body", "title1", "title2", "title3", "title4", "title5", "title6", "title7", "largeBody", "smallBody", "footnote", "monoBody", "monoSmallBody"];
+declare const typographyVariants: readonly ["body", "title1", "title2", "title3", "title4", "title5", "title6", "largeBody", "smallBody", "monoBody", "monoSmallBody"];
 type TypographyVariant = typeof typographyVariants[number];
 type TypographyTitleVariant = Extract<TypographyVariant, 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6' | 'title7'>;
 interface TypographyParams {
     /**
      * Set the font-family to sans-serif or monospace based on current theme.
      */
-    family?: 'sansSerif' | 'monospace';
+    family?: 'sansSerif' | 'monospace' | 'title';
     /**
      * Set the size to a system-standard size.
      */
-    size?: 56 | 36 | 32 | 24 | 20 | 18 | 16 | 14 | 12 | 10;
+    size?: 24 | 20 | 18 | 16 | 14 | 12;
     /**
      * Set the line-height to a system-standard size.
      */
-    lineHeight?: 64 | 40 | 32 | 28 | 24 | 22 | 20 | 16 | 13;
+    lineHeight?: 'single' | 'tight' | 'snug' | 'comfortable' | 'relaxed' | 'spacious' | 'normal';
     /**
      * Set the color to a system-standard color: e.g. `active` for `@splunk/themes/variables.contentColorActive`.
      */
@@ -23,10 +23,6 @@ interface TypographyParams {
      * Set the font-weight to a system-standard value.
      */
     weight?: 'light' | 'normal' | 'semiBold' | 'bold' | 'extraBold' | 'heavy';
-    /**
-     * Apply a reset to the element's margin and padding. This defaults to true if using a `variant`.
-     */
-    withReset?: boolean;
 }
 /**
  * A mixin for styling text content using predefined typography variants
@@ -63,19 +59,16 @@ interface TypographyParams {
  *  `'title4'`,
  *  `'title5'`,
  *  `'title6'`,
- *  `'title7'`,
  *  `'largeBody'`,
  *  `'smallBody'`,
- *  `'footnote'`,
  *  `'monoBody'`, or
  *  `'monoSmallBody'`,
  * @param {object} [typographyParams] Customize the font settings or element using system values for: `family`, `size`, `lineHeight`, `color`, and `weight`.
- * Default margin and padding can be removed with `withReset`.
  * @public
  */
 declare function typography<T extends AnyTheme, A extends ThemedProps>(): Interpolation<T, A>;
 declare function typography<T extends AnyTheme, A extends ThemedProps>(variant: TypographyVariant): Interpolation<T, A>;
-declare function typography<T extends AnyTheme, A extends ThemedProps>({ family, size, lineHeight, color, weight, withReset, }: TypographyParams): Interpolation<T, A>;
+declare function typography<T extends AnyTheme, A extends ThemedProps>({ family, size, lineHeight, color, weight, }: TypographyParams): Interpolation<T, A>;
 declare function typography<T extends AnyTheme, A extends ThemedProps>(variant: TypographyVariant, additionalParams: TypographyParams): Interpolation<T, A>;
 export default typography;
 export { typographyVariants, TypographyTitleVariant, TypographyVariant, TypographyParams };

package/types/prisma/base.d.ts

@@ -2,6 +2,7 @@ import { ColorScheme } from '../types';
 declare function createPrismaBase({ colorScheme }: {
     colorScheme: ColorScheme;
 }): {
+    linkColor: string;
     zindexLayer: number;
     zindexFixedNavbar: number;
     zindexModalBackdrop: number;
@@ -9,13 +10,12 @@ declare function createPrismaBase({ colorScheme }: {
     zindexPopover: number;
     zindexToastMessages: number;
     draggableBackground: string;
-    activeBorder: string;
     borderColor: string;
     borderColorWeak: string;
     borderColorStrong: string;
-    hoverShadow: string;
     focusShadow: string;
     focusShadowInset: string;
+    hoverShadow: string;
     highLow4LHigh: string;
     highLow4LLow: string;
     highLow4DHigh: string;
@@ -175,11 +175,7 @@ declare function createPrismaBase({ colorScheme }: {
     categorical2L1: string;
     categorical2L2: string;
     categorical2L3: string;
-    categorical2L4: string; /**
-     * ## Font family
-     *
-     * @valueSet
-     */
+    categorical2L4: string;
     categorical2L5: string;
     categorical2L6: string;
     categorical2L7: string;
@@ -220,29 +216,29 @@ declare function createPrismaBase({ colorScheme }: {
     static14: string;
     static15: string;
     static16: string;
-    /**
-     * ## Interactive state shadows
-     *
-     * @shadowSet
-     *
-     */
     static17: string;
     static18: string;
     static19: string;
     static20: string;
     focusColor: string;
-    transparent: string;
-    linkColor: 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;
-    fontFamily: string;
 };
 type PrismaBase = ReturnType<typeof createPrismaBase>;
 export default createPrismaBase;

package/types/prisma/comfortable.d.ts

@@ -1,3 +1,4 @@
+import { SpacingSizing } from '../design-tokens';
 /**
  * ## Measures
  * Spacing is used for margin on any element or padding on containers, but can be used for other
@@ -5,23 +6,7 @@
  *
  * @valueSet
  */
-declare const measures: {
-    spacingXSmall: string;
-    spacingSmall: string;
-    spacingMedium: string;
-    spacingLarge: string;
-    spacingXLarge: string;
-    spacingXXLarge: string;
-    spacingXXXLarge: string;
-    fontSizeSmall: string;
-    fontSize: string;
-    fontSizeLarge: string;
-    fontSizeXLarge: string;
-    fontSizeXXLarge: string;
-    lineHeight: string;
-    inputHeight: string;
-    borderRadius: string;
-};
+declare const measures: SpacingSizing;
 type Comfortable = typeof measures;
 export default measures;
 export { Comfortable };

package/types/prisma/compact.d.ts

@@ -1,3 +1,4 @@
+import { SpacingSizing } from '../design-tokens';
 /**
  * ## Measures
  * Spacing is used for margin on any element or padding on containers, but can be used for other
@@ -9,23 +10,7 @@
  *
  * @valueSet
  */
-declare const measures: {
-    spacingXSmall: string;
-    spacingSmall: string;
-    spacingMedium: string;
-    spacingLarge: string;
-    spacingXLarge: string;
-    spacingXXLarge: string;
-    spacingXXXLarge: string;
-    fontSizeSmall: string;
-    fontSize: string;
-    fontSizeLarge: string;
-    fontSizeXLarge: string;
-    fontSizeXXLarge: string;
-    lineHeight: string;
-    inputHeight: string;
-    borderRadius: string;
-};
+declare const measures: SpacingSizing;
 type Compact = typeof measures;
 export default measures;
 export { Compact };

package/types/prisma/dark.d.ts

@@ -1,4 +1,8 @@
 declare const theme: {
+    accentColorPositive: string;
+    accentColorWarning: string;
+    accentColorAlert: string;
+    accentColorNegative: string;
     syntaxBlue: string;
     syntaxBrown: string;
     syntaxGray: string;
@@ -19,6 +23,9 @@ declare const theme: {
     interactiveColorOverlayDrag: string;
     interactiveColorBackground: string;
     interactiveColorBackgroundDisabled: string;
+    interactiveColorAccent: string;
+    interactiveColorAccentError: string;
+    interactiveColorAccentErrorStrong: string;
     black: string;
     neutral100: string;
     neutral200: string;
@@ -26,18 +33,33 @@ declare const theme: {
     neutral400: string;
     neutral500: string;
     white: string;
+    transparent: string;
+    contentBackgroundColorNegativeWeak: string;
+    contentColorLink: string;
+    contentColorAccent: string;
+    contentColorAccentStrong: string;
+    contentColorAccentWeak: string;
     contentColorActive: string;
     contentColorDefault: string;
     contentColorDisabled: string;
+    contentColorInfo: string;
     contentColorInverted: string;
     contentColorMuted: string;
-    backgroundColorPopup: string;
-    backgroundColorSection: string;
-    backgroundColorSidebar: string;
-    backgroundColorPage: string;
+    contentColorNegative: string;
+    contentColorNegativeStrong: string;
+    contentColorNegativeWeak: string;
+    contentColorPositive: string;
+    contentColorWarning: string;
+    borderColor: string;
+    borderColorWeak: string;
+    borderColorStrong: string;
     backgroundColorNavigation: string;
-    backgroundColorFloating: string;
+    backgroundColorPage: string;
+    backgroundColorSidebar: string;
+    backgroundColorSection: string;
     backgroundColorDialog: string;
+    backgroundColorPopup: string;
+    backgroundColorFloating: string;
     backgroundColorScrim: string;
     embossShadow: string;
     overlayShadow: string;
@@ -61,10 +83,39 @@ declare const theme: {
     statusColorCritical: string;
     statusColorCriticalWeak: string;
     statusColorCriticalStrong: string;
-    accentColorPositive: string;
-    accentColorWarning: string;
-    accentColorAlert: string;
-    accentColorNegative: string;
+    actionColorBackgroundPrimary: string; /**
+     * ## Background colors
+     * Background colors should be used only for backgrounds of higher level sections & containers of a UI.
+     *
+     * @colorSet verbose
+     */
+    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;
 };
 type Dark = typeof theme;
 export default theme;