@dxc-technology/halstack-react 0.0.0-5aa300b → 0.0.0-5b15506

package/chip/Chip.stories.tsx

@@ -3,6 +3,7 @@ import { userEvent, within } from "@storybook/testing-library";
 import DxcChip from "./Chip";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Chip",
@@ -12,7 +13,6 @@ export default {
 const iconSVG = (
   <svg
     version="1.1"
-    id="Capa_1"
     x="0px"
     y="0px"
     width="438.536px"
@@ -39,6 +39,14 @@ const smallIconSVG = (
   </svg>
 );
 
+const opinionatedTheme = {
+  chip: {
+    baseColor: "#e6e6e6",
+    fontColor: "#000000",
+    iconColor: "#4d4d4d",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -55,46 +63,45 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with prefix (SVG) and suffix (URL)" theme="light" level={4} />
-      <DxcChip
-        label="Chip with prefix and suffix"
-        prefixIcon={iconSVG}
-        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
-      />
+      <DxcChip label="Chip with prefix and suffix" prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled chip" theme="light" level={4} />
-      <DxcChip
-        label="Disabled"
-        disabled
-        prefixIcon={iconSVG}
-        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
-      />
+      <DxcChip label="Disabled" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with ellipsis" theme="light" level={4} />
-      <DxcChip label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fg ssssssssssss ssss" />
+      <div style={{ width: "200px" }}>
+        <DxcChip label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fg ssssssssssss ssss" />
+      </div>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with ellipsis and suffix" theme="light" level={4} />
-      <DxcChip
-        suffixIcon={iconSVG}
-        label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fgsss"
-      />
+      <div style={{ width: "200px" }}>
+        <DxcChip
+          suffixIcon={iconSVG}
+          label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fgsss"
+        />
+      </div>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with ellipsis and prefix" theme="light" level={4} />
-      <DxcChip
-        prefixIcon={iconSVG}
-        label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fgsss"
-      />
+      <div style={{ width: "200px" }}>
+        <DxcChip
+          prefixIcon={iconSVG}
+          label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fgsss"
+        />
+      </div>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with ellipsis, suffix and prefix" theme="light" level={4} />
-      <DxcChip
-        prefixIcon={iconSVG}
-        suffixIcon={iconSVG}
-        label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasdf"
-      />
+      <div style={{ width: "200px" }}>
+        <DxcChip
+          prefixIcon={iconSVG}
+          suffixIcon={iconSVG}
+          label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasdf"
+        />
+      </div>
     </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
@@ -125,6 +132,43 @@ export const Chromatic = () => (
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcChip label="xxlarge" margin="xxlarge" />
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Chip with prefix and suffix" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip label="Chip" prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Chip with prefix and suffix" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip label="Chip" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip
+          label="Chip"
+          prefixIcon={iconSVG}
+          suffixIcon={iconSVG}
+          onClickPrefix={() => {}}
+          onClickSuffix={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip
+          label="Chip"
+          prefixIcon={iconSVG}
+          suffixIcon={iconSVG}
+          onClickPrefix={() => {}}
+          onClickSuffix={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 const ChipPrefixFocused = () => (
@@ -136,16 +180,16 @@ const ChipPrefixFocused = () => (
 const ChipSuffixFocused = () => (
   <ExampleContainer>
     <Title title="Chip with suffix" theme="light" level={4} />
-    <DxcChip label="Chip with suffix" suffixIcon={iconSVG} onClickSuffix={() => {}} />
+    <DxcChip label="Chip with suffix" suffixIcon="filled_delete" onClickSuffix={() => {}} />
   </ExampleContainer>
 );
 
 export const PrefixFocused = ChipPrefixFocused.bind({});
-PrefixFocused.play = async ({ canvasElement }) => {
+PrefixFocused.play = async () => {
   await userEvent.tab();
 };
 
 export const SuffixFocused = ChipSuffixFocused.bind({});
-SuffixFocused.play = async ({ canvasElement }) => {
+SuffixFocused.play = async () => {
   await userEvent.tab();
 };

package/chip/Chip.test.js

@@ -1,56 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
-var _Chip = _interopRequireDefault(require("./Chip"));
-
-var _invision = _interopRequireDefault(require("../../app/src/images/invision.svg"));
-
+var _Chip = _interopRequireDefault(require("./Chip.tsx"));
 describe("Chip component tests", function () {
   test("Chip renders with correct text", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
-      label: "Chip"
-    })),
-        getByText = _render.getByText;
-
+        label: "Chip"
+      })),
+      getByText = _render.getByText;
     expect(getByText("Chip")).toBeTruthy();
   });
   test("Calls correct function when clicking on prefix icon", function () {
     var onClick = jest.fn();
-
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
-      label: "Chip",
-      prefixIcon: _invision["default"],
-      onClickPrefix: onClick
-    })),
-        getByText = _render2.getByText,
-        getByRole = _render2.getByRole;
-
+        label: "Chip",
+        prefixIcon: "nutrition",
+        onClickPrefix: onClick
+      })),
+      getByText = _render2.getByText,
+      getByRole = _render2.getByRole;
     expect(getByText("Chip")).toBeTruthy();
-
-    _react2.fireEvent.click(getByRole("img"));
-
+    _react2.fireEvent.click(getByRole("button"));
     expect(onClick).toHaveBeenCalled();
   });
   test("Calls correct function when clicking on suffix icon", function () {
     var onClick = jest.fn();
-
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
-      label: "Chip",
-      suffixIcon: _invision["default"],
-      onClickSuffix: onClick
-    })),
-        getByText = _render3.getByText,
-        getByRole = _render3.getByRole;
-
+        label: "Chip",
+        suffixIcon: "nutrition",
+        onClickSuffix: onClick
+      })),
+      getByText = _render3.getByText,
+      getByRole = _render3.getByRole;
     expect(getByText("Chip")).toBeTruthy();
-
-    _react2.fireEvent.click(getByRole("img"));
-
+    _react2.fireEvent.click(getByRole("button"));
     expect(onClick).toHaveBeenCalled();
   });
 });

package/chip/types.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-declare type Props = {
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type Props = {
     /**
      * Text to be placed on the chip.
      */

package/common/coreTokens.d.ts

@@ -0,0 +1,237 @@
+/**
+ * Halstack Color Palette
+ * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
+ */
+declare const CoreColorTokens: {
+    color_black: string;
+    color_white: string;
+    color_transparent: string;
+    color_grey_50: string;
+    color_grey_100: string;
+    color_grey_200: string;
+    color_grey_300: string;
+    color_grey_400: string;
+    color_grey_500: string;
+    color_grey_600: string;
+    color_grey_700: string;
+    color_grey_800: string;
+    color_grey_900: string;
+    color_grey_50_a: string;
+    color_grey_100_a: string;
+    color_grey_200_a: string;
+    color_grey_300_a: string;
+    color_grey_400_a: string;
+    color_grey_500_a: string;
+    color_grey_600_a: string;
+    color_grey_700_a: string;
+    color_grey_800_a: string;
+    color_grey_900_a: string;
+    color_purple_50: string;
+    color_purple_100: string;
+    color_purple_200: string;
+    color_purple_300: string;
+    color_purple_400: string;
+    color_purple_500: string;
+    color_purple_600: string;
+    color_purple_700: string;
+    color_purple_800: string;
+    color_purple_900: string;
+    color_blue_50: string;
+    color_blue_100: string;
+    color_blue_200: string;
+    color_blue_300: string;
+    color_blue_400: string;
+    color_blue_500: string;
+    color_blue_600: string;
+    color_blue_700: string;
+    color_blue_800: string;
+    color_blue_900: string;
+    color_red_50: string;
+    color_red_100: string;
+    color_red_200: string;
+    color_red_300: string;
+    color_red_400: string;
+    color_red_500: string;
+    color_red_600: string;
+    color_red_700: string;
+    color_red_800: string;
+    color_red_900: string;
+    color_green_50: string;
+    color_green_100: string;
+    color_green_200: string;
+    color_green_300: string;
+    color_green_400: string;
+    color_green_500: string;
+    color_green_600: string;
+    color_green_700: string;
+    color_green_800: string;
+    color_green_900: string;
+    color_yellow_50: string;
+    color_yellow_100: string;
+    color_yellow_200: string;
+    color_yellow_300: string;
+    color_yellow_400: string;
+    color_yellow_500: string;
+    color_yellow_600: string;
+    color_yellow_700: string;
+    color_yellow_800: string;
+    color_yellow_900: string;
+    color_orange_50: string;
+    color_orange_100: string;
+    color_orange_200: string;
+    color_orange_300: string;
+    color_orange_400: string;
+    color_orange_500: string;
+    color_orange_600: string;
+    color_orange_700: string;
+    color_orange_800: string;
+    color_orange_900: string;
+};
+export declare const getCoreColorToken: (key: CoreColorTokens) => string;
+export type CoreColorTokens = keyof typeof CoreColorTokens;
+declare const CoreTokens: {
+    inherit: string;
+    type_sans: string;
+    type_scale_root: string;
+    type_scale_08: string;
+    type_scale_07: string;
+    type_scale_06: string;
+    type_scale_05: string;
+    type_scale_04: string;
+    type_scale_03: string;
+    type_scale_02: string;
+    type_scale_01: string;
+    type_light: string;
+    type_regular: string;
+    type_semibold: string;
+    type_bold: string;
+    type_italic: string;
+    type_normal: string;
+    type_spacing_tight_02: string;
+    type_spacing_tight_01: string;
+    type_spacing_normal: string;
+    type_spacing_wide_01: string;
+    type_spacing_wide_02: string;
+    type_spacing_wide_03: string;
+    type_initial: string;
+    type_uppercase: string;
+    type_no_line: string;
+    type_underline: string;
+    type_line_through: string;
+    type_leading_compact_03: string;
+    type_leading_compact_02: string;
+    type_leading_compact_01: string;
+    type_leading_normal: string;
+    type_leading_loose_01: string;
+    type_leading_loose_02: string;
+    border_width_0: string;
+    border_width_1: string;
+    border_width_2: string;
+    border_width_4: string;
+    border_radius_none: string;
+    border_radius_small: string;
+    border_radius_medium: string;
+    border_radius_large: string;
+    border_solid: string;
+    border_dashed: string;
+    border_none: string;
+    spacing_0: string;
+    spacing_2: string;
+    spacing_4: string;
+    spacing_8: string;
+    spacing_12: string;
+    spacing_16: string;
+    spacing_24: string;
+    spacing_32: string;
+    spacing_40: string;
+    spacing_48: string;
+    spacing_56: string;
+    spacing_64: string;
+    spacing_80: string;
+    spacing_96: string;
+    spacing_112: string;
+    color_black: string;
+    color_white: string;
+    color_transparent: string;
+    color_grey_50: string;
+    color_grey_100: string;
+    color_grey_200: string;
+    color_grey_300: string;
+    color_grey_400: string;
+    color_grey_500: string;
+    color_grey_600: string;
+    color_grey_700: string;
+    color_grey_800: string;
+    color_grey_900: string;
+    color_grey_50_a: string;
+    color_grey_100_a: string;
+    color_grey_200_a: string;
+    color_grey_300_a: string;
+    color_grey_400_a: string;
+    color_grey_500_a: string;
+    color_grey_600_a: string;
+    color_grey_700_a: string;
+    color_grey_800_a: string;
+    color_grey_900_a: string;
+    color_purple_50: string;
+    color_purple_100: string;
+    color_purple_200: string;
+    color_purple_300: string;
+    color_purple_400: string;
+    color_purple_500: string;
+    color_purple_600: string;
+    color_purple_700: string;
+    color_purple_800: string;
+    color_purple_900: string;
+    color_blue_50: string;
+    color_blue_100: string;
+    color_blue_200: string;
+    color_blue_300: string;
+    color_blue_400: string;
+    color_blue_500: string;
+    color_blue_600: string;
+    color_blue_700: string;
+    color_blue_800: string;
+    color_blue_900: string;
+    color_red_50: string;
+    color_red_100: string;
+    color_red_200: string;
+    color_red_300: string;
+    color_red_400: string;
+    color_red_500: string;
+    color_red_600: string;
+    color_red_700: string;
+    color_red_800: string;
+    color_red_900: string;
+    color_green_50: string;
+    color_green_100: string;
+    color_green_200: string;
+    color_green_300: string;
+    color_green_400: string;
+    color_green_500: string;
+    color_green_600: string;
+    color_green_700: string;
+    color_green_800: string;
+    color_green_900: string;
+    color_yellow_50: string;
+    color_yellow_100: string;
+    color_yellow_200: string;
+    color_yellow_300: string;
+    color_yellow_400: string;
+    color_yellow_500: string;
+    color_yellow_600: string;
+    color_yellow_700: string;
+    color_yellow_800: string;
+    color_yellow_900: string;
+    color_orange_50: string;
+    color_orange_100: string;
+    color_orange_200: string;
+    color_orange_300: string;
+    color_orange_400: string;
+    color_orange_500: string;
+    color_orange_600: string;
+    color_orange_700: string;
+    color_orange_800: string;
+    color_orange_900: string;
+};
+export default CoreTokens;

package/common/coreTokens.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCoreColorToken = exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Halstack Color Palette
+ * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
+ */
+var CoreColorTokens = {
+  // Color
+  // Absolutes
+  color_black: "#000000",
+  color_white: "#ffffff",
+  color_transparent: "transparent",
+  // Greyscale
+  // Solid variants
+  color_grey_50: "#fafafa",
+  color_grey_100: "#f2f2f2",
+  color_grey_200: "#e6e6e6",
+  color_grey_300: "#cccccc",
+  color_grey_400: "#bfbfbf",
+  color_grey_500: "#999999",
+  color_grey_600: "#808080",
+  color_grey_700: "#666666",
+  color_grey_800: "#4d4d4d",
+  color_grey_900: "#333333",
+  // Transparent variants
+  color_grey_50_a: "#00000005",
+  color_grey_100_a: "#0000000d",
+  color_grey_200_a: "#0000001a",
+  color_grey_300_a: "#00000033",
+  color_grey_400_a: "#0000004d",
+  color_grey_500_a: "#00000066",
+  color_grey_600_a: "#00000080",
+  color_grey_700_a: "#00000099",
+  color_grey_800_a: "#000000b3",
+  color_grey_900_a: "#000000cc",
+  // Purple
+  color_purple_50: "#faf7fd",
+  color_purple_100: "#f2eafa",
+  color_purple_200: "#e5d5f6",
+  color_purple_300: "#cbacec",
+  color_purple_400: "#b182e3",
+  color_purple_500: "#a46ede",
+  color_purple_600: "#7d2fd0",
+  color_purple_700: "#5f249f",
+  color_purple_800: "#4b1c7d",
+  color_purple_900: "#321353",
+  // Blue
+  color_blue_50: "#f5fbff",
+  color_blue_100: "#e6f4ff",
+  color_blue_200: "#cceaff",
+  color_blue_300: "#99d5ff",
+  color_blue_400: "#66bfff",
+  color_blue_500: "#33aaff",
+  color_blue_600: "#0095ff",
+  color_blue_700: "#0086e6",
+  color_blue_800: "#0067b3",
+  color_blue_900: "#003c66",
+  // Red
+  color_red_50: "#fff5f6",
+  color_red_100: "#ffe6e9",
+  color_red_200: "#ffccd3",
+  color_red_300: "#fe9aa7",
+  color_red_400: "#fe677b",
+  color_red_500: "#fe344f",
+  color_red_600: "#fe0123",
+  color_red_700: "#d0011b",
+  color_red_800: "#980115",
+  color_red_900: "#65010e",
+  // Green
+  color_green_50: "#f7fdf9",
+  color_green_100: "#eafaef",
+  color_green_200: "#d5f6df",
+  color_green_300: "#acecbe",
+  color_green_400: "#82e39e",
+  color_green_500: "#59d97d",
+  color_green_600: "#2fd05d",
+  color_green_700: "#24a148",
+  color_green_800: "#1c7d38",
+  color_green_900: "#135325",
+  // Yellow
+  color_yellow_50: "#fffdf5",
+  color_yellow_100: "#fef9e6",
+  color_yellow_200: "#fdf4ce",
+  color_yellow_300: "#fbe89d",
+  color_yellow_400: "#fadd6b",
+  color_yellow_500: "#f7cf2b",
+  color_yellow_600: "#f6c709",
+  color_yellow_700: "#c59f07",
+  color_yellow_800: "#947705",
+  color_yellow_900: "#624f04",
+  // Orange
+  color_orange_50: "#fefaf5",
+  color_orange_100: "#fef3e7",
+  color_orange_200: "#fce7cf",
+  color_orange_300: "#facf9e",
+  color_orange_400: "#f7b76e",
+  color_orange_500: "#f59f3d",
+  color_orange_600: "#f38f20",
+  color_orange_700: "#c26c0a",
+  color_orange_800: "#915108",
+  color_orange_900: "#613605"
+};
+var getCoreColorToken = exports.getCoreColorToken = function getCoreColorToken(key) {
+  return CoreColorTokens[key];
+};
+/**
+ * Halstack Spacing Principles
+ * @link https://developer.dxc.com/halstack/next/principles/spacing/
+ */
+var SpacingTokens = {
+  spacing_0: "0rem",
+  spacing_2: "0.125rem",
+  spacing_4: "0.25rem",
+  spacing_8: "0.5rem",
+  spacing_12: "0.75rem",
+  spacing_16: "1rem",
+  spacing_24: "1.5rem",
+  spacing_32: "2rem",
+  spacing_40: "2.5rem",
+  spacing_48: "3rem",
+  spacing_56: "3.5rem",
+  spacing_64: "4rem",
+  spacing_80: "5rem",
+  spacing_96: "6rem",
+  spacing_112: "7rem"
+};
+var CoreTokens = _objectSpread(_objectSpread(_objectSpread({}, CoreColorTokens), SpacingTokens), {}, {
+  inherit: "inherit",
+  // Typography
+  type_sans: "Open Sans, sans-serif",
+  type_scale_root: "16px",
+  type_scale_08: "3.75rem",
+  type_scale_07: "2.5rem",
+  type_scale_06: "2rem",
+  type_scale_05: "1.5rem",
+  type_scale_04: "1.25rem",
+  type_scale_03: "1rem",
+  type_scale_02: "0.875rem",
+  type_scale_01: "0.75rem",
+  type_light: "300",
+  type_regular: "400",
+  type_semibold: "600",
+  type_bold: "bold",
+  type_italic: "italic",
+  type_normal: "normal",
+  type_spacing_tight_02: "-0.05em",
+  type_spacing_tight_01: "-0.025em",
+  type_spacing_normal: "0em",
+  type_spacing_wide_01: "0.025em",
+  type_spacing_wide_02: "0.05em",
+  type_spacing_wide_03: "0.1em",
+  type_initial: "initial",
+  type_uppercase: "uppercase",
+  type_no_line: "none",
+  type_underline: "underline",
+  type_line_through: "line-through",
+  type_leading_compact_03: "1em",
+  type_leading_compact_02: "1.25em",
+  type_leading_compact_01: "1.365em",
+  type_leading_normal: "1.5em",
+  type_leading_loose_01: "1.715em",
+  type_leading_loose_02: "2em",
+  // Border
+  border_width_0: "0px",
+  border_width_1: "1px",
+  border_width_2: "2px",
+  border_width_4: "4px",
+  border_radius_none: "0rem",
+  border_radius_small: "0.125rem",
+  border_radius_medium: "0.25rem",
+  border_radius_large: "0.375rem",
+  border_solid: "solid",
+  border_dashed: "dashed",
+  border_none: "none"
+});
+var _default = exports["default"] = CoreTokens;

package/common/utils.d.ts

@@ -0,0 +1 @@
+export declare const getMargin: (marginProp: string | object, side: string) => any;