@dnanpm/styleguide 2.2.3 → 3.0.0

package/build/cjs/components/MainNavigation/globalNavStyles.d.ts

@@ -10,36 +10,92 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
         };
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        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;
@@ -97,6 +153,13 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     isActive?: boolean | undefined;
 }, never>;
@@ -112,36 +175,92 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
         };
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        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;
@@ -199,6 +318,13 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     isActive?: boolean | undefined;
 }, never>;
@@ -214,36 +340,92 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         };
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        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;
@@ -301,6 +483,13 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     isActive?: boolean | undefined;
     isHighlighted?: boolean | undefined;
@@ -317,36 +506,92 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
         };
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        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;
@@ -404,6 +649,13 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     isInView?: boolean | undefined;
 }, never>;

package/build/cjs/components/MainNavigation/globalNavStyles.js

@@ -3,18 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
 
-const MenuItem = styled['default'].li `
+const MenuItem = styled["default"].li `
     position: relative;
     padding: 0;
     margin: 0;
     height: 100%;
-    color: ${p => p.theme.color.text};
+    color: ${theme["default"].color.text.black};
     & > a {
-        color: ${p => (p.isActive ? p.theme.color.hotPink : p.theme.color.text)};
+        color: ${p => (p.isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
     }
 `;
-const MenuLink = styled['default'].a `
+const MenuLink = styled["default"].a `
     border: none;
     margin: 0;
     padding: 0;
@@ -31,19 +32,19 @@ const MenuLink = styled['default'].a `
     display: block;
     text-decoration: none;
     text-align: left;
-    color: ${p => (p && p.isActive ? p.theme.color.hotPink : p.theme.color.text)};
+    color: ${p => (p.isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
     padding: 0.5em 1em;
     white-space: normal;
     &:hover,
     &:focus {
         text-decoration: none;
-        color: ${p => p.theme.color.hotPink};
+        color: ${theme["default"].color.text.pink};
         cursor: pointer;
         outline: none;
         border-bottom: none;
     }
 `;
-const MenuLinkWithChildren = styled['default'].button `
+const MenuLinkWithChildren = styled["default"].button `
     line-height: 1rem;
     text-align: left;
     display: block;
@@ -54,7 +55,7 @@ const MenuLinkWithChildren = styled['default'].button `
     font-size: inherit;
     font-family: inherit;
     white-space: normal;
-    color: ${p => p && (p.isActive || p.isHighlighted) ? p.theme.color.hotPink : p.theme.color.text};
+    color: ${p => p && (p.isActive || p.isHighlighted) ? theme["default"].color.text.pink : theme["default"].color.default.black};
     padding: 0.5em 1em;
     span {
         position: relative;
@@ -65,18 +66,18 @@ const MenuLinkWithChildren = styled['default'].button `
             bottom: -6px;
             left: 0;
             border-bottom: 1px solid
-                ${p => (p && p.isHighlighted ? p.theme.color.hotPink : 'transparent')};
+                ${p => (p.isHighlighted ? theme["default"].color.default.pink : 'transparent')};
         }
     }
     &:hover,
     &:focus {
         text-decoration: none;
-        color: ${p => p.theme.color.hotPink};
+        color: ${theme["default"].color.text.pink};
         cursor: pointer;
         outline: none;
     }
 `;
-const MenuList = styled['default'].ul `
+const MenuList = styled["default"].ul `
     display: inline-flex;
     max-height: ${p => (typeof p.isInView !== 'boolean' || p.isInView ? 'auto' : '5px')};
     overflow: ${p => (typeof p.isInView === 'boolean' ? 'hidden' : 'unset')};
@@ -85,7 +86,7 @@ const MenuList = styled['default'].ul `
     list-style: none;
     margin: 0;
     padding: 0;
-    background-color: ${p => p.theme.color.white};
+    background-color: ${theme["default"].color.default.white};
     transition: all 300ms ease-in-out;
 `;