@guardian/stand 0.0.6 → 0.0.8

package/dist/styleD/build/typescript/semantic/typography.js

@@ -1,458 +1,192 @@
 const semanticTypography = {
   "title-sm": {
-    font: {
-      fontFamily: "GH Guardian Headline",
-      fontWeight: 700,
-      fontSize: "18px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 700 1.125rem/1.15 GH Guardian Headline",
+    letterSpacing: "0rem",
     fontWidth: 100
   },
   "title-md": {
-    font: {
-      fontFamily: "GH Guardian Headline",
-      fontWeight: 700,
-      fontSize: "20px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 700 1.25rem/1.15 GH Guardian Headline",
+    letterSpacing: "0rem",
     fontWidth: 100
   },
   "title-lg": {
-    font: {
-      fontFamily: "GH Guardian Headline",
-      fontWeight: 700,
-      fontSize: "24px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 700 1.5rem/1.15 GH Guardian Headline",
+    letterSpacing: "0rem",
     fontWidth: 100
   },
   "title-xl": {
-    font: {
-      fontFamily: "GH Guardian Headline",
-      fontWeight: 700,
-      fontSize: "32px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 700 2rem/1.15 GH Guardian Headline",
+    letterSpacing: "0rem",
     fontWidth: 100
   },
   "heading-xs": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "12px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 700 0.75rem/1.15 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 95
   },
   "heading-sm": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "14px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "-0.2px"
-    },
-    letterSpacing: "-0.2px",
+    font: "normal 700 0.875rem/1.15 Open Sans",
+    letterSpacing: "-0.0125rem",
     fontWidth: 95
   },
   "heading-md": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "16px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "-0.5px"
-    },
-    letterSpacing: "-0.5px",
+    font: "normal 700 1rem/1.15 Open Sans",
+    letterSpacing: "-0.03125rem",
     fontWidth: 95
   },
   "heading-lg": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "18px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "-0.5px"
-    },
-    letterSpacing: "-0.5px",
+    font: "normal 700 1.125rem/1.15 Open Sans",
+    letterSpacing: "-0.03125rem",
     fontWidth: 95
   },
   "heading-xl": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "20px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "-0.5px"
-    },
-    letterSpacing: "-0.5px",
+    font: "normal 700 1.25rem/1.15 Open Sans",
+    letterSpacing: "-0.03125rem",
     fontWidth: 95
   },
   "heading-2xl": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "24px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "-1px"
-    },
-    letterSpacing: "-1px",
+    font: "normal 700 1.5rem/1.15 Open Sans",
+    letterSpacing: "-0.0625rem",
     fontWidth: 95
   },
   "heading-compact-xs": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "12px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 700 0.75rem/1.15 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 88
   },
   "heading-compact-sm": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "14px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 700 0.875rem/1.15 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 88
   },
   "heading-compact-md": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "16px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "-0.2px"
-    },
-    letterSpacing: "-0.2px",
+    font: "normal 700 1rem/1.15 Open Sans",
+    letterSpacing: "-0.0125rem",
     fontWidth: 88
   },
   "heading-compact-lg": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "18px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "-0.2px"
-    },
-    letterSpacing: "-0.2px",
+    font: "normal 700 1.125rem/1.15 Open Sans",
+    letterSpacing: "-0.0125rem",
     fontWidth: 88
   },
   "heading-compact-xl": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "20px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "-0.5px"
-    },
-    letterSpacing: "-0.5px",
+    font: "normal 700 1.25rem/1.15 Open Sans",
+    letterSpacing: "-0.03125rem",
     fontWidth: 88
   },
   "heading-compact-2xl": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 700,
-      fontSize: "24px",
-      fontStyle: "normal",
-      lineHeight: 1.15,
-      letterSpacing: "-0.5px"
-    },
-    letterSpacing: "-0.5px",
+    font: "normal 700 1.5rem/1.15 Open Sans",
+    letterSpacing: "-0.03125rem",
     fontWidth: 88
   },
   "body-sm": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "14px",
-      fontStyle: "normal",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 95
   },
   "body-md": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "16px",
-      fontStyle: "normal",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 95
   },
   "body-lg": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "18px",
-      fontStyle: "normal",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 460 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 95
   },
   "body-xl": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "20px",
-      fontStyle: "normal",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 460 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 95
   },
   "body-italic-sm": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "14px",
-      fontStyle: "italic",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "italic 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 95
   },
   "body-italic-md": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "16px",
-      fontStyle: "italic",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "italic 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 95
   },
   "body-italic-lg": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "18px",
-      fontStyle: "italic",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "italic 460 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 95
   },
   "body-italic-xl": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "20px",
-      fontStyle: "italic",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "italic 460 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 95
   },
   "body-compact-sm": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "14px",
-      fontStyle: "normal",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 88
   },
   "body-compact-md": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "16px",
-      fontStyle: "normal",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 88
   },
   "body-compact-lg": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "18px",
-      fontStyle: "normal",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 460 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 88
   },
   "body-compact-xl": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "20px",
-      fontStyle: "normal",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 460 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 88
   },
   "body-compact-italic-sm": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "14px",
-      fontStyle: "italic",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "italic 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 88
   },
   "body-compact-italic-md": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "16px",
-      fontStyle: "italic",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "italic 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 88
   },
   "body-compact-italic-lg": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "18px",
-      fontStyle: "italic",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "italic 460 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 88
   },
   "body-compact-italic-xl": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "20px",
-      fontStyle: "italic",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "italic 460 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 88
   },
   "meta-md": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "12px",
-      fontStyle: "normal",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 460 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 95
   },
   "meta-compact-md": {
-    font: {
-      fontFamily: "Open Sans",
-      fontWeight: 460,
-      fontSize: "12px",
-      fontStyle: "normal",
-      lineHeight: 1.3,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 460 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
     fontWidth: 88
   },
   "article-body-md": {
-    font: {
-      fontFamily: "GuardianTextEgyptian",
-      fontWeight: 400,
-      fontSize: "16px",
-      fontStyle: "normal",
-      lineHeight: 1.4,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 400 1rem/1.4 GuardianTextEgyptian",
+    letterSpacing: "0rem",
     fontWidth: 100
   },
   "article-body-bold-md": {
-    font: {
-      fontFamily: "GuardianTextEgyptian",
-      fontWeight: 700,
-      fontSize: "16px",
-      fontStyle: "normal",
-      lineHeight: 1.4,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "normal 700 1rem/1.4 GuardianTextEgyptian",
+    letterSpacing: "0rem",
     fontWidth: 100
   },
   "article-body-italic-md": {
-    font: {
-      fontFamily: "GuardianTextEgyptian",
-      fontWeight: 400,
-      fontSize: "16px",
-      fontStyle: "italic",
-      lineHeight: 1.4,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "italic 400 1rem/1.4 GuardianTextEgyptian",
+    letterSpacing: "0rem",
     fontWidth: 100
   },
   "article-body-bold-italic-md": {
-    font: {
-      fontFamily: "GuardianTextEgyptian",
-      fontWeight: 700,
-      fontSize: "16px",
-      fontStyle: "italic",
-      lineHeight: 1.4,
-      letterSpacing: "0px"
-    },
-    letterSpacing: "0px",
+    font: "italic 700 1rem/1.4 GuardianTextEgyptian",
+    letterSpacing: "0rem",
     fontWidth: 100
   }
 };

package/dist/styleD/utils/semantic/typography.cjs

@@ -2,16 +2,20 @@
 
 var react = require('@emotion/react');
 
-const convertTypographyToEmotion = (typography) => {
+const convertTypographyToEmotionStringStyle = (typography) => {
   return react.css`
-		font-family: ${typography.font.fontFamily};
-		font-weight: ${typography.font.fontWeight};
-		font-size: ${typography.font.fontSize};
-		font-style: ${typography.font.fontStyle};
-		line-height: ${typography.font.lineHeight};
+		font: ${typography.font};
 		letter-spacing: ${typography.letterSpacing};
 		font-variation-settings: \"wdth\" ${typography.fontWidth};
 	`;
 };
+const convertTypographyToEmotionObjectStyle = (typography) => {
+  return {
+    font: typography.font,
+    letterSpacing: typography.letterSpacing,
+    fontVariationSettings: `"wdth" ${typography.fontWidth}`
+  };
+};
 
-exports.convertTypographyToEmotion = convertTypographyToEmotion;
+exports.convertTypographyToEmotionObjectStyle = convertTypographyToEmotionObjectStyle;
+exports.convertTypographyToEmotionStringStyle = convertTypographyToEmotionStringStyle;

package/dist/styleD/utils/semantic/typography.js

@@ -1,15 +1,18 @@
 import { css } from '@emotion/react';
 
-const convertTypographyToEmotion = (typography) => {
+const convertTypographyToEmotionStringStyle = (typography) => {
   return css`
-		font-family: ${typography.font.fontFamily};
-		font-weight: ${typography.font.fontWeight};
-		font-size: ${typography.font.fontSize};
-		font-style: ${typography.font.fontStyle};
-		line-height: ${typography.font.lineHeight};
+		font: ${typography.font};
 		letter-spacing: ${typography.letterSpacing};
 		font-variation-settings: \"wdth\" ${typography.fontWidth};
 	`;
 };
+const convertTypographyToEmotionObjectStyle = (typography) => {
+  return {
+    font: typography.font,
+    letterSpacing: typography.letterSpacing,
+    fontVariationSettings: `"wdth" ${typography.fontWidth}`
+  };
+};
 
-export { convertTypographyToEmotion };
+export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle };

package/dist/types/index.d.ts

@@ -13,6 +13,12 @@ export { baseColors } from './styleD/build/typescript/base/colors';
 export type { BaseColors } from './styleD/build/typescript/base/colors';
 export { baseTypography } from './styleD/build/typescript/base/typography';
 export type { BaseTypography } from './styleD/build/typescript/base/typography';
+export { baseSpacing } from './styleD/build/typescript/base/spacing';
+export type { BaseSpacing } from './styleD/build/typescript/base/spacing';
+export { baseSizing } from './styleD/build/typescript/base/sizing';
+export type { BaseSizing } from './styleD/build/typescript/base/sizing';
+export { baseRadius } from './styleD/build/typescript/base/radius';
+export type { BaseRadius } from './styleD/build/typescript/base/radius';
 /**
  * style dictionary exports - semantic
  */
@@ -20,7 +26,9 @@ export { semanticColors } from './styleD/build/typescript/semantic/colors';
 export type { SemanticColors } from './styleD/build/typescript/semantic/colors';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography';
 export type { SemanticTypography } from './styleD/build/typescript/semantic/typography';
+export { semanticSizing } from './styleD/build/typescript/semantic/sizing';
+export type { SemanticSizing } from './styleD/build/typescript/semantic/sizing';
 /**
  * utils exports
  */
-export { convertTypographyToEmotion } from './styleD/utils/semantic/typography';
+export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle, } from './styleD/utils/semantic/typography';

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

@@ -82,7 +82,7 @@ export declare const baseColors: {
     };
     readonly yellow: {
         readonly '50': "#433608";
-        readonly '100': "#6f590c";
+        readonly '100': "#5b4a0b";
         readonly '200': "#9a7c11";
         readonly '300': "#c69f16";
         readonly '400': "#f1c21b";
@@ -94,7 +94,7 @@ export declare const baseColors: {
     };
     readonly orange: {
         readonly '50': "#45260e";
-        readonly '100': "#713e17";
+        readonly '100': "#693c16";
         readonly '200': "#9d5621";
         readonly '300': "#c96e2a";
         readonly '400': "#f58633";
@@ -131,7 +131,7 @@ export declare const baseColors: {
     readonly 'cool-purple': {
         readonly '50': "#232740";
         readonly '100': "#394069";
-        readonly '200': "#505a92";
+        readonly '200': "#485084";
         readonly '300': "#6773bb";
         readonly '400': "#7d8ce4";
         readonly '500': "#94a1e9";

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

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const baseRadius: {
+    readonly 'corner-2-px': "2px";
+    readonly 'corner-4-px': "4px";
+    readonly 'corner-8-px': "8px";
+    readonly 'corner-2-rem': "0.125rem";
+    readonly 'corner-4-rem': "0.25rem";
+    readonly 'corner-8-rem': "0.5rem";
+};
+export type BaseRadius = typeof baseRadius;

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

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const baseSizing: {
+    readonly 'size-2-px': "2px";
+    readonly 'size-16-px': "16px";
+    readonly 'size-18-px': "18px";
+    readonly 'size-20-px': "20px";
+    readonly 'size-24-px': "24px";
+    readonly 'size-32-px': "32px";
+    readonly 'size-40-px': "40px";
+    readonly 'size-48-px': "48px";
+    readonly 'size-2-rem': "0.125rem";
+    readonly 'size-16-rem': "1rem";
+    readonly 'size-18-rem': "1.125rem";
+    readonly 'size-20-rem': "1.25rem";
+    readonly 'size-24-rem': "1.5rem";
+    readonly 'size-32-rem': "2rem";
+    readonly 'size-40-rem': "2.5rem";
+    readonly 'size-48-rem': "3rem";
+};
+export type BaseSizing = typeof baseSizing;