@guardian/stand 0.0.6 → 0.0.8

package/dist/types/styleD/build/typescript/base/spacing.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const baseSpacing: {
+    readonly '2-px': "2px";
+    readonly '4-px': "4px";
+    readonly '8-px': "8px";
+    readonly '12-px': "12px";
+    readonly '16-px': "16px";
+    readonly '20-px': "20px";
+    readonly '24-px': "24px";
+    readonly '32-px': "32px";
+    readonly '36-px': "36px";
+    readonly '40-px': "40px";
+    readonly '48-px': "48px";
+    readonly '64-px': "64px";
+    readonly '72-px': "72px";
+    readonly '80-px': "80px";
+    readonly '96-px': "96px";
+    readonly '2-rem': "0.125rem";
+    readonly '4-rem': "0.25rem";
+    readonly '8-rem': "0.5rem";
+    readonly '12-rem': "0.75rem";
+    readonly '16-rem': "1rem";
+    readonly '20-rem': "1.25rem";
+    readonly '24-rem': "1.5rem";
+    readonly '32-rem': "2rem";
+    readonly '36-rem': "2.25rem";
+    readonly '40-rem': "2.5rem";
+    readonly '48-rem': "3rem";
+    readonly '64-rem': "4rem";
+    readonly '72-rem': "4.5rem";
+    readonly '80-rem': "5rem";
+    readonly '96-rem': "6rem";
+};
+export type BaseSpacing = typeof baseSpacing;

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

@@ -20,13 +20,24 @@ export declare const baseTypography: {
         readonly '36-px': "36px";
         readonly '42-px': "42px";
         readonly '48-px': "48px";
+        readonly '12-rem': "0.75rem";
+        readonly '14-rem': "0.875rem";
+        readonly '16-rem': "1rem";
+        readonly '18-rem': "1.125rem";
+        readonly '20-rem': "1.25rem";
+        readonly '24-rem': "1.5rem";
+        readonly '28-rem': "1.75rem";
+        readonly '32-rem': "2rem";
+        readonly '36-rem': "2.25rem";
+        readonly '42-rem': "2.625rem";
+        readonly '48-rem': "3rem";
     };
     readonly weight: {
-        readonly 'Guardian Text Egyptian': {
-            readonly normal: 400;
+        readonly 'Guardian Headline': {
             readonly bold: 700;
         };
-        readonly 'Guardian Headline': {
+        readonly 'Guardian Text Egyptian': {
+            readonly normal: 400;
             readonly bold: 700;
         };
         readonly 'Open Sans': {
@@ -60,6 +71,10 @@ export declare const baseTypography: {
         readonly 'denser-px': "-0.5px";
         readonly 'dense-px': "-0.2px";
         readonly 'default-px': "0px";
+        readonly 'densest-rem': "-0.0625rem";
+        readonly 'denser-rem': "-0.03125rem";
+        readonly 'dense-rem': "-0.0125rem";
+        readonly 'default-rem': "0rem";
     };
 };
 export type BaseTypography = typeof baseTypography;

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

@@ -3,15 +3,20 @@
  */
 export declare const semanticColors: {
     text: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
+        default: string;
+        subdued: string;
         'inverse-default': string;
-        'inverse-secondary': string;
-        'inverse-tertiary': string;
+        'inverse-subdued': string;
         'inverse-strong': string;
+        error: string;
         warning: string;
         success: string;
+        information: string;
+        disabled: string;
+    };
+    bg: {
+        'default-onDark': string;
+        'default-onLight': string;
     };
     surface: {
         'light-1': string;
@@ -24,14 +29,11 @@ export declare const semanticColors: {
         strong: string;
         'inverse-strong': string;
     };
-    bg: {
-        'default-onDark': string;
-        'default-onLight': string;
-    };
     status: {
         'status-draft': string;
         'status-live': string;
         'status-selected': string;
+        'status-focused': string;
     };
 };
 export type SemanticColors = typeof semanticColors;

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

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const semanticSizing: {
+    height: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    icon: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    border: {
+        md: string;
+    };
+};
+export type SemanticSizing = typeof semanticSizing;

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

@@ -3,458 +3,192 @@
  */
 export declare const semanticTypography: {
     'title-sm': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'title-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'title-lg': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'title-xl': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-xs': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-sm': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-lg': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-xl': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-2xl': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-compact-xs': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-compact-sm': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-compact-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-compact-lg': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-compact-xl': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'heading-compact-2xl': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-sm': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-lg': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-xl': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-italic-sm': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-italic-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-italic-lg': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-italic-xl': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-compact-sm': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-compact-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-compact-lg': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-compact-xl': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-compact-italic-sm': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-compact-italic-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-compact-italic-lg': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'body-compact-italic-xl': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'meta-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'meta-compact-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'article-body-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'article-body-bold-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'article-body-italic-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };
     'article-body-bold-italic-md': {
-        font: {
-            fontFamily: string;
-            fontWeight: number;
-            fontSize: string;
-            fontStyle: string;
-            lineHeight: number;
-            letterSpacing: string;
-        };
+        font: string;
         letterSpacing: string;
         fontWidth: number;
     };

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

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

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

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

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

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

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

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

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

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