@dnanpm/styleguide 3.2.0 → 3.3.1

package/build/cjs/themes/themeComponents/color.js

@@ -2,88 +2,88 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const defaultColors = {
-    pink: '#DA0070',
-    plum: '#551C3E',
-    white: '#FFFFFF',
-    black: '#121212',
-};
-const accentColors = {
-    lemon: '#FFF347',
-    sky: '#2ECAF0',
-    orange: '#FFA633',
-};
-const color = {
-    default: defaultColors,
-    accent: accentColors,
-    hover: {
-        pink: '#AE005A',
-    },
-    text: Object.assign(Object.assign({}, defaultColors), { gray: '#505050' }),
-    line: {
-        L01: '#948B89',
-        L02: '#D4D2CE',
-        L03: '#E7E5E3',
-        L04: '#EFEEED',
-    },
-    notification: {
-        info: '#0B7C99',
-        success: '#008500',
-        warning: '#EB6600',
-        error: '#DD0A0A',
-    },
-    background: {
-        sand: {
-            default: '#FDFBFA',
-            E01: '#F8F4F1',
-            E02: '#EDE8E1',
-        },
-        pink: {
-            default: defaultColors.pink,
-            E01: '#FF82C1',
-            E02: '#FFBFDF',
-        },
-        plum: {
-            default: defaultColors.plum,
-            E01: '#69214C',
-            E02: '#792A59',
-        },
-        lemon: {
-            default: accentColors.lemon,
-            E01: '#FFF9A3',
-            E02: '#FFFABA',
-        },
-        sky: {
-            default: accentColors.sky,
-            E01: '#77DCF5',
-            E02: '#96E4F8',
-        },
-        orange: {
-            default: accentColors.orange,
-            E01: '#FFCA85',
-            E02: '#FFDBAD',
-        },
-        white: {
-            default: defaultColors.white,
-        },
-    },
-    focus: {
-        dark: '#0064E2',
-        light: '#D8E9FF',
-    },
-    transparency: {
-        T0: '00',
-        T10: '1A',
-        T20: '33',
-        T30: '4D',
-        T40: '66',
-        T50: '80',
-        T60: '99',
-        T70: 'B3',
-        T80: 'CC',
-        T90: 'E6',
-        T100: 'FF',
-    },
+const defaultColors = {
+    pink: '#DA0070',
+    plum: '#551C3E',
+    white: '#FFFFFF',
+    black: '#121212',
+};
+const accentColors = {
+    lemon: '#FFF347',
+    sky: '#2ECAF0',
+    orange: '#FFA633',
+};
+const color = {
+    default: defaultColors,
+    accent: accentColors,
+    hover: {
+        pink: '#AE005A',
+    },
+    text: Object.assign(Object.assign({}, defaultColors), { gray: '#505050' }),
+    line: {
+        L01: '#948B89',
+        L02: '#D4D2CE',
+        L03: '#E7E5E3',
+        L04: '#EFEEED',
+    },
+    notification: {
+        info: '#0B7C99',
+        success: '#008500',
+        warning: '#EB6600',
+        error: '#DD0A0A',
+    },
+    background: {
+        sand: {
+            default: '#FDFBFA',
+            E01: '#F8F4F1',
+            E02: '#EDE8E1',
+        },
+        pink: {
+            default: defaultColors.pink,
+            E01: '#FF82C1',
+            E02: '#FFBFDF',
+        },
+        plum: {
+            default: defaultColors.plum,
+            E01: '#69214C',
+            E02: '#792A59',
+        },
+        lemon: {
+            default: accentColors.lemon,
+            E01: '#FFF9A3',
+            E02: '#FFFABA',
+        },
+        sky: {
+            default: accentColors.sky,
+            E01: '#77DCF5',
+            E02: '#96E4F8',
+        },
+        orange: {
+            default: accentColors.orange,
+            E01: '#FFCA85',
+            E02: '#FFDBAD',
+        },
+        white: {
+            default: defaultColors.white,
+        },
+    },
+    focus: {
+        dark: '#0064E2',
+        light: '#D8E9FF',
+    },
+    transparency: {
+        T0: '00',
+        T10: '1A',
+        T20: '33',
+        T30: '4D',
+        T40: '66',
+        T50: '80',
+        T60: '99',
+        T70: 'B3',
+        T80: 'CC',
+        T90: 'E6',
+        T100: 'FF',
+    },
 };
 
 exports["default"] = color;

package/build/cjs/themes/themeComponents/fontFamily.d.ts

@@ -1,6 +1,6 @@
-declare const fontFamily: {
-    default: string;
-    heading: string;
-    numerals: string;
-};
-export default fontFamily;
+declare const fontFamily: {
+    default: string;
+    heading: string;
+    numerals: string;
+};
+export default fontFamily;

package/build/cjs/themes/themeComponents/fontFamily.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const fontFamily = {
-    default: `"DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
-    heading: `"DNA Heading", "Helvetica Neue", Helvetica, Arial, sans-serif`,
-    numerals: `"DNA Numerals", "DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
+const fontFamily = {
+    default: `"DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
+    heading: `"DNA Heading", "Helvetica Neue", Helvetica, Arial, sans-serif`,
+    numerals: `"DNA Numerals", "DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
 };
 
 exports["default"] = fontFamily;

package/build/cjs/themes/themeComponents/fontSize.d.ts

@@ -1,19 +1,19 @@
-declare const _default: {
-    default: string;
-    xl: string;
-    l: string;
-    s: string;
-    xs: string;
-    h1XL: string;
-    h1L: string;
-    h1M: string;
-    h1S: string;
-    h2M: string;
-    h2S: string;
-    h3: string;
-    h4: string;
-    h5: string;
-    h1: string;
-    h2: string;
-};
-export default _default;
+declare const _default: {
+    default: string;
+    xl: string;
+    l: string;
+    s: string;
+    xs: string;
+    h1XL: string;
+    h1L: string;
+    h1M: string;
+    h1S: string;
+    h2M: string;
+    h2S: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h1: string;
+    h2: string;
+};
+export default _default;

package/build/cjs/themes/themeComponents/fontSize.js

@@ -2,22 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const fontSize = {
-    default: '1rem',
-    xl: '1.25rem',
-    l: '1.125rem',
-    s: '0.875rem',
-    xs: '0.75rem',
-    h1XL: '2.875rem',
-    h1L: '2.5rem',
-    h1M: '2.125rem',
-    h1S: '1.875rem',
-    h2M: '1.875rem',
-    h2S: '1.625rem',
-    h3: '1.5rem',
-    h4: '1.25rem',
-    h5: '1rem', // 16px
-};
+const fontSize = {
+    default: '1rem',
+    xl: '1.25rem',
+    l: '1.125rem',
+    s: '0.875rem',
+    xs: '0.75rem',
+    h1XL: '2.875rem',
+    h1L: '2.5rem',
+    h1M: '2.125rem',
+    h1S: '1.875rem',
+    h2M: '1.875rem',
+    h2S: '1.625rem',
+    h3: '1.5rem',
+    h4: '1.25rem',
+    h5: '1rem', // 16px
+};
 var fontSize$1 = Object.assign({ h1: fontSize.h1L, h2: fontSize.h2M }, fontSize);
 
 exports["default"] = fontSize$1;

package/build/cjs/themes/themeComponents/fontWeight.d.ts

@@ -1,19 +1,19 @@
-declare const fontWeight: {
-    /**
-     * 400
-     */
-    book: number;
-    /**
-     * 500
-     */
-    medium: number;
-    /**
-     * 700
-     */
-    bold: number;
-    /**
-     * 900
-     */
-    black: number;
-};
-export default fontWeight;
+declare const fontWeight: {
+    /**
+     * 400
+     */
+    book: number;
+    /**
+     * 500
+     */
+    medium: number;
+    /**
+     * 700
+     */
+    bold: number;
+    /**
+     * 900
+     */
+    black: number;
+};
+export default fontWeight;

package/build/cjs/themes/themeComponents/fontWeight.js

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const fontWeight = {
-    /**
-     * 400
-     */
-    book: 400,
-    /**
-     * 500
-     */
-    medium: 500,
-    /**
-     * 700
-     */
-    bold: 700,
-    /**
-     * 900
-     */
-    black: 900,
+const fontWeight = {
+    /**
+     * 400
+     */
+    book: 400,
+    /**
+     * 500
+     */
+    medium: 500,
+    /**
+     * 700
+     */
+    bold: 700,
+    /**
+     * 900
+     */
+    black: 900,
 };
 
 exports["default"] = fontWeight;

package/build/cjs/themes/themeComponents/forms.d.ts

@@ -1,5 +1,5 @@
-declare const forms: {
-    smallSelectWidth: string;
-    smallSelectHeight: string;
-};
-export default forms;
+declare const forms: {
+    smallSelectWidth: string;
+    smallSelectHeight: string;
+};
+export default forms;

package/build/cjs/themes/themeComponents/forms.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const forms = {
-    smallSelectWidth: '12rem',
-    smallSelectHeight: '2.5rem', // 40px
+const forms = {
+    smallSelectWidth: '12rem',
+    smallSelectHeight: '2.5rem', // 40px
 };
 
 exports["default"] = forms;

package/build/cjs/themes/themeComponents/lineHeight.d.ts

@@ -1,20 +1,20 @@
-declare const _default: {
-    default: string;
-    xl: string;
-    s: string;
-    xs: string;
-    xxs: string;
-    auto: string;
-    h1XL: string;
-    h1L: string;
-    h1M: string;
-    h1S: string;
-    h2M: string;
-    h2S: string;
-    h3: string;
-    h4: string;
-    h5: string;
-    h1: string;
-    h2: string;
-};
-export default _default;
+declare const _default: {
+    default: string;
+    xl: string;
+    s: string;
+    xs: string;
+    xxs: string;
+    auto: string;
+    h1XL: string;
+    h1L: string;
+    h1M: string;
+    h1S: string;
+    h2M: string;
+    h2S: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h1: string;
+    h2: string;
+};
+export default _default;

package/build/cjs/themes/themeComponents/lineHeight.js

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const lineHeight = {
-    default: '1.5rem',
-    xl: '1.625rem',
-    s: '1.125rem',
-    xs: '1rem',
-    xxs: '0.875rem',
-    auto: 'inherit',
-    h1XL: '3rem',
-    h1L: '2.875rem',
-    h1M: '2.5rem',
-    h1S: '2.25rem',
-    h2M: '2.25rem',
-    h2S: '2rem',
-    h3: '1.875rem',
-    h4: '1.5rem',
-    h5: '1rem', // 16px
-};
+const lineHeight = {
+    default: '1.5rem',
+    xl: '1.625rem',
+    s: '1.125rem',
+    xs: '1rem',
+    xxs: '0.875rem',
+    auto: 'inherit',
+    h1XL: '3rem',
+    h1L: '2.875rem',
+    h1M: '2.5rem',
+    h1S: '2.25rem',
+    h2M: '2.25rem',
+    h2S: '2rem',
+    h3: '1.875rem',
+    h4: '1.5rem',
+    h5: '1rem', // 16px
+};
 var lineHeight$1 = Object.assign({ h1: lineHeight.h1L, h2: lineHeight.h2M }, lineHeight);
 
 exports["default"] = lineHeight$1;

package/build/cjs/themes/themeComponents/navigation.d.ts

@@ -1,33 +1,34 @@
-export declare const desktopNavMaxHeight = "5.25rem";
-export declare const navIconSize = "1.5rem";
-export declare const navIconSizeMobile = "2rem";
-export declare const subMenuWidth = "13.75rem";
-export declare const subMenuWidthXl = "16.25rem";
-export declare const menuLevelsAmount = 3;
-export declare const mobileNavMaxHeight = "3.75rem";
-export declare const mobileNavMaxWidth = "480px";
-export declare const headerLogoSize = "3.75rem";
-export declare const mobileLogoSize = "3.75em";
-export declare const desktopLogoSize = "5.25em";
-export declare const menuItemMargin = "1rem";
-export declare const ribbonHeight = "1.5625rem";
-export declare const wideMenuBreakpoint = 1280;
-export declare const IconContainerWidth = "3.75rem";
-export declare const IconContainerMinWidth = "2.5rem";
-export declare const navMaxHeight = "3.75rem";
-export declare const headerMaxHeight = "6.125rem";
-declare const navigation: {
-    menuLevelsAmount: number;
-    mobileNavMaxHeight: string;
-    navMaxHeight: string;
-    headerLogoSize: string;
-    mobileLogoSize: string;
-    desktopLogoSize: string;
-    menuItemMargin: string;
-    desktopNavMaxHeight: string;
-    navIconSize: string;
-    navIconSizeMobile: string;
-    subMenuWidth: string;
-    subMenuWidthXl: string;
-};
-export default navigation;
+export declare const desktopNavMaxHeight = "5.25rem";
+export declare const navIconSize = "1.5rem";
+export declare const navIconSizeMobile = "2rem";
+export declare const subMenuWidth = "13.75rem";
+export declare const subMenuWidthXl = "16.25rem";
+export declare const menuLevelsAmount = 3;
+export declare const mobileNavMaxHeight = "3.75rem";
+export declare const mobileNavMaxWidth = "480px";
+export declare const headerLogoSize = "3.75rem";
+export declare const mobileLogoSize = "3.75em";
+export declare const desktopLogoSize = "5.25em";
+export declare const menuItemMargin = "1rem";
+export declare const ribbonHeight = "1.5625rem";
+export declare const wideMenuBreakpoint = 1280;
+export declare const IconContainerWidth = "3.75rem";
+export declare const IconContainerMinWidth = "2.5rem";
+export declare const navMaxHeight = "3.75rem";
+export declare const headerMaxHeight = "6.125rem";
+declare const navigation: {
+    menuLevelsAmount: number;
+    mobileNavMaxHeight: string;
+    navMaxHeight: string;
+    headerLogoSize: string;
+    mobileLogoSize: string;
+    desktopLogoSize: string;
+    menuItemMargin: string;
+    desktopNavMaxHeight: string;
+    navIconSize: string;
+    navIconSizeMobile: string;
+    subMenuWidth: string;
+    subMenuWidthXl: string;
+    headerMaxHeight: string;
+};
+export default navigation;

package/build/cjs/themes/themeComponents/navigation.js

@@ -2,37 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const desktopNavMaxHeight = '5.25rem';
-const navIconSize = '1.5rem';
-const navIconSizeMobile = '2rem';
-const subMenuWidth = '13.75rem';
-const subMenuWidthXl = '16.25rem';
-const menuLevelsAmount = 3;
-const mobileNavMaxHeight = '3.75rem';
-const mobileNavMaxWidth = '480px';
-const headerLogoSize = '3.75rem';
-const mobileLogoSize = '3.75em';
-const desktopLogoSize = '5.25em';
-const menuItemMargin = '1rem';
-const ribbonHeight = '1.5625rem';
-const wideMenuBreakpoint = 1280;
-const IconContainerWidth = '3.75rem'; // 60px
-const IconContainerMinWidth = '2.5rem'; // 40px
-const navMaxHeight = '3.75rem'; // 60px
-const headerMaxHeight = '6.125rem'; // 98px
-const navigation = {
-    menuLevelsAmount,
-    mobileNavMaxHeight,
-    navMaxHeight,
-    headerLogoSize,
-    mobileLogoSize,
-    desktopLogoSize,
-    menuItemMargin,
-    desktopNavMaxHeight,
-    navIconSize,
-    navIconSizeMobile,
-    subMenuWidth,
-    subMenuWidthXl,
+const desktopNavMaxHeight = '5.25rem';
+const navIconSize = '1.5rem';
+const navIconSizeMobile = '2rem';
+const subMenuWidth = '13.75rem';
+const subMenuWidthXl = '16.25rem';
+const menuLevelsAmount = 3;
+const mobileNavMaxHeight = '3.75rem';
+const mobileNavMaxWidth = '480px';
+const headerLogoSize = '3.75rem';
+const mobileLogoSize = '3.75em';
+const desktopLogoSize = '5.25em';
+const menuItemMargin = '1rem';
+const ribbonHeight = '1.5625rem';
+const wideMenuBreakpoint = 1280;
+const IconContainerWidth = '3.75rem'; // 60px
+const IconContainerMinWidth = '2.5rem'; // 40px
+const navMaxHeight = '3.75rem'; // 60px
+const headerMaxHeight = '6.125rem'; // 98px
+const navigation = {
+    menuLevelsAmount,
+    mobileNavMaxHeight,
+    navMaxHeight,
+    headerLogoSize,
+    mobileLogoSize,
+    desktopLogoSize,
+    menuItemMargin,
+    desktopNavMaxHeight,
+    navIconSize,
+    navIconSizeMobile,
+    subMenuWidth,
+    subMenuWidthXl,
+    headerMaxHeight,
 };
 
 exports.IconContainerMinWidth = IconContainerMinWidth;

package/build/cjs/themes/themeComponents/radius.d.ts

@@ -1,29 +1,29 @@
-declare const radius: {
-    /**
-     * 0.5rem (8px)
-     */
-    default: string;
-    /**
-     * 0.25rem (4px)
-     */
-    s: string;
-    /**
-     * 0.125rem (2px)
-     */
-    xs: string;
-    /**
-     * 50%
-     *
-     * Visually rendered with radius of 50% of element width AND 50% of element height
-     * E.g.: Element with width 100px and height 32px will be rendered with radius 50px on "x" axis and 16px on "y" axis
-     */
-    circle: string;
-    /**
-     * 100rem
-     *
-     * Visually rendered with radius of half the size of the smaller side of element due to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap rule
-     * E.g.: Element with width 100px and height 32px will be rendered with radius 16px on both axis (all corners)
-     */
-    pill: string;
-};
-export default radius;
+declare const radius: {
+    /**
+     * 0.5rem (8px)
+     */
+    default: string;
+    /**
+     * 0.25rem (4px)
+     */
+    s: string;
+    /**
+     * 0.125rem (2px)
+     */
+    xs: string;
+    /**
+     * 50%
+     *
+     * Visually rendered with radius of 50% of element width AND 50% of element height
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 50px on "x" axis and 16px on "y" axis
+     */
+    circle: string;
+    /**
+     * 100rem
+     *
+     * Visually rendered with radius of half the size of the smaller side of element due to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap rule
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 16px on both axis (all corners)
+     */
+    pill: string;
+};
+export default radius;