@guardian/stand 0.0.4 → 0.0.6

package/dist/types/styleD/build/typescript/component/tagTable.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentTagTable: {
+    heading: {
+        backgroundColor: string;
+        fontWeight: number;
+        paddingTop: string;
+        paddingRight: string;
+        paddingBottom: string;
+        paddingLeft: string;
+    };
+    cell: {
+        paddingX: string;
+        paddingY: string;
+        firstCellPaddingLeft: string;
+        borderBetweenCells: {
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+        };
+    };
+    row: {
+        height: string;
+        backgroundColor: string;
+        backgroundHoverColor: string;
+        borderBottom: {
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+        };
+        firstRowBackgroundColor: string;
+        firstRowBackgroundHoverColor: string;
+    };
+    addButton: {
+        color: string;
+        paddingX: string;
+        paddingY: string;
+        backgroundColor: string;
+        backgroundHoverColor: string;
+        fontWeight: number;
+        fontSize: string;
+    };
+    typeBadge: {
+        color: string;
+        backgroundColor: string;
+        paddingX: string;
+        paddingY: string;
+        fontWeight: number;
+        fontSize: string;
+    };
+};
+export type ComponentTagTable = typeof componentTagTable;

package/dist/types/styleD/build/typescript/semantic/colors.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const semanticColors: {
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        'inverse-default': string;
+        'inverse-secondary': string;
+        'inverse-tertiary': string;
+        'inverse-strong': string;
+        warning: string;
+        success: string;
+    };
+    surface: {
+        'light-1': string;
+        'light-2': string;
+        'dark-1': string;
+    };
+    border: {
+        subtle: string;
+        default: string;
+        strong: string;
+        'inverse-strong': string;
+    };
+    bg: {
+        'default-onDark': string;
+        'default-onLight': string;
+    };
+    status: {
+        'status-draft': string;
+        'status-live': string;
+        'status-selected': string;
+    };
+};
+export type SemanticColors = typeof semanticColors;

package/dist/types/styleD/build/typescript/semantic/typography.d.ts

@@ -0,0 +1,462 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const semanticTypography: {
+    'title-sm': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'title-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'title-lg': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'title-xl': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-xs': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-sm': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-lg': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-xl': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-2xl': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-compact-xs': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-compact-sm': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-compact-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-compact-lg': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-compact-xl': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'heading-compact-2xl': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-sm': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-lg': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-xl': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-italic-sm': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-italic-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-italic-lg': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-italic-xl': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-sm': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-lg': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-xl': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-italic-sm': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-italic-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-italic-lg': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'body-compact-italic-xl': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'meta-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'meta-compact-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'article-body-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'article-body-bold-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'article-body-italic-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'article-body-bold-italic-md': {
+        font: {
+            fontFamily: string;
+            fontWeight: number;
+            fontSize: string;
+            fontStyle: string;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        letterSpacing: string;
+        fontWidth: number;
+    };
+};
+export type SemanticTypography = typeof semanticTypography;

package/dist/types/styleD/stories/base/Typography.d.ts

@@ -0,0 +1 @@
+export declare const Typography: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/styleD/stories/base/storybookColorPalette.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+type Colors = string[] | Record<string, string>;
+/**
+ * A single color row your styleguide showing title, subtitle and one or more colors, used
+ * as a child of `ColorPalette`.
+ */
+export declare const ColorItem: ({ title, colors, }: {
+    title: string;
+    colors: Colors;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+interface ColorPaletteProps {
+    children?: React.ReactNode;
+}
+/**
+ * Styleguide documentation for colors, including names, captions, and color swatches,
+ * all specified as `ColorItem` children of this wrapper component.
+ */
+export declare const ColorPalette: ({ children, ...props }: ColorPaletteProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/styleD/stories/semantic/TypographyPresets.d.ts

@@ -0,0 +1 @@
+export declare const TypographyPresets: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/styleD/utils/semantic/typography.d.ts

@@ -0,0 +1,15 @@
+import type { SerializedStyles } from '@emotion/react';
+type SemanticTypography = {
+    font: {
+        fontFamily: string;
+        fontWeight: number;
+        fontSize: string;
+        fontStyle: string;
+        lineHeight: number;
+        letterSpacing: string;
+    };
+    letterSpacing: string;
+    fontWidth: number;
+};
+export declare const convertTypographyToEmotion: (typography: SemanticTypography) => SerializedStyles;
+export {};

package/dist/types/styleD/utils/semantic/typography.test.d.ts

@@ -0,0 +1 @@
+export {};