@dnanpm/styleguide 3.7.0 → 3.7.2

package/build/es/themes/theme.d.ts

@@ -0,0 +1,165 @@
+declare const theme: {
+    base: {
+        baseHeight: {
+            value: number;
+            unit: string;
+        };
+        baseWidth: {
+            value: number;
+            unit: string;
+        };
+    };
+    breakpoints: import("./themeComponents/breakpoints").ViewBreakpoints;
+    color: {
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
+    };
+    fontFamily: {
+        default: string;
+        heading: string;
+        numerals: string;
+    };
+    fontSize: {
+        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;
+    };
+    fontWeight: {
+        book: number;
+        medium: number;
+        bold: number;
+        black: number;
+    };
+    form: {
+        smallSelectWidth: string;
+        smallSelectHeight: string;
+    };
+    grid: {
+        gutter: string;
+    };
+    lineHeight: {
+        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;
+    };
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
+};
+export type ThemeInterface = typeof theme;
+export default theme;

package/build/es/themes/theme.js

@@ -10,18 +10,18 @@ import forms from './themeComponents/forms.js';
 import lineHeight from './themeComponents/lineHeight.js';
 import radius from './themeComponents/radius.js';
 
-const theme = {
-    base,
-    breakpoints,
-    color,
-    fontFamily,
-    fontSize,
-    fontWeight,
-    form: forms,
-    grid: gridTheme,
-    lineHeight,
-    media,
-    radius,
+const theme = {
+    base,
+    breakpoints,
+    color,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    form: forms,
+    grid: gridTheme,
+    lineHeight,
+    media,
+    radius,
 };
 
 export { theme as default };

package/build/es/themes/themeComponents/base.d.ts

@@ -0,0 +1,11 @@
+declare const base: {
+    baseHeight: {
+        value: number;
+        unit: string;
+    };
+    baseWidth: {
+        value: number;
+        unit: string;
+    };
+};
+export default base;

package/build/es/themes/themeComponents/base.js

@@ -1,12 +1,12 @@
-const base = {
-    baseHeight: {
-        value: 0.625,
-        unit: 'rem',
-    },
-    baseWidth: {
-        value: 0.625,
-        unit: 'rem',
-    }, // 10px
+const base = {
+    baseHeight: {
+        value: 0.625,
+        unit: 'rem',
+    },
+    baseWidth: {
+        value: 0.625,
+        unit: 'rem',
+    }, // 10px
 };
 
 export { base as default };

package/build/es/themes/themeComponents/breakpoints.d.ts

@@ -0,0 +1,5 @@
+export interface ViewBreakpoints {
+    [key: string]: number;
+}
+declare const breakpoints: ViewBreakpoints;
+export default breakpoints;

package/build/es/themes/themeComponents/breakpoints.js

@@ -1,9 +1,9 @@
-const breakpoints = {
-    xl: 1200,
-    lg: 992,
-    md: 768,
-    sm: 576,
-    xs: 480,
+const breakpoints = {
+    xl: 1200,
+    lg: 992,
+    md: 768,
+    sm: 576,
+    xs: 480,
 };
 
 export { breakpoints as default };

package/build/es/themes/themeComponents/color.d.ts

@@ -0,0 +1,88 @@
+declare const color: {
+    default: {
+        pink: string;
+        plum: string;
+        white: string;
+        black: string;
+    };
+    accent: {
+        lemon: string;
+        sky: string;
+        orange: string;
+    };
+    hover: {
+        pink: string;
+    };
+    text: {
+        gray: string;
+        pink: string;
+        plum: string;
+        white: string;
+        black: string;
+    };
+    line: {
+        L01: string;
+        L02: string;
+        L03: string;
+        L04: string;
+    };
+    notification: {
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    background: {
+        sand: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        pink: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        plum: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        lemon: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        sky: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        orange: {
+            default: string;
+            E01: string;
+            E02: string;
+        };
+        white: {
+            default: string;
+        };
+    };
+    focus: {
+        dark: string;
+        light: string;
+    };
+    transparency: {
+        T0: string;
+        T10: string;
+        T20: string;
+        T30: string;
+        T40: string;
+        T50: string;
+        T60: string;
+        T70: string;
+        T80: string;
+        T90: string;
+        T100: string;
+    };
+};
+export default color;

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

@@ -1,85 +1,85 @@
-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',
+    },
 };
 
 export { color as default };

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

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

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

@@ -1,7 +1,7 @@
-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`,
 };
 
 export { fontFamily as default };

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

@@ -0,0 +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;

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

@@ -1,19 +1,19 @@
-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);
 
 export { fontSize$1 as default };

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

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

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

@@ -1,20 +1,20 @@
-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,
 };
 
 export { fontWeight as default };

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

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

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

@@ -1,6 +1,6 @@
-const forms = {
-    smallSelectWidth: '12rem',
-    smallSelectHeight: '2.5rem', // 40px
+const forms = {
+    smallSelectWidth: '12rem',
+    smallSelectHeight: '2.5rem', // 40px
 };
 
 export { forms as default };

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

@@ -0,0 +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;