@dnanpm/styleguide 1.9.0 → 2.0.0

package/build/cjs/themes/globalStyles.d.ts

@@ -12,12 +12,7 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
     };
     breakpoints: import("./themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -48,22 +43,27 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        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;
@@ -79,19 +79,126 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        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: any[]) => string>;
 }>>;
+export declare const CheckboxInput_RadioInput: import("styled-components").StyledComponent<"input", {
+    base: {
+        baseHeight: {
+            value: number;
+            unit: string;
+        };
+        baseWidth: {
+            value: number;
+            unit: string;
+        };
+    };
+    breakpoints: import("./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;
+    };
+    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: any[]) => string>;
+}, {}, never>;
 declare const _default: import("styled-components").GlobalStyleComponent<{}, {
     base: {
         baseHeight: {
@@ -105,12 +212,7 @@ declare const _default: import("styled-components").GlobalStyleComponent<{}, {
     };
     breakpoints: import("./themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -141,22 +243,27 @@ declare const _default: import("styled-components").GlobalStyleComponent<{}, {
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        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;
@@ -172,16 +279,23 @@ declare const _default: import("styled-components").GlobalStyleComponent<{}, {
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        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: any[]) => string>;
 }>;

package/build/cjs/themes/globalStyles.js

@@ -16,10 +16,10 @@ const globalStyles = styled.css `
     body {
         margin: 0;
         padding: 0;
-        font-family: ${props => props.theme.fontFamily.baseFontFamily};
+        font-family: ${props => props.theme.fontFamily.default};
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-size: 1rem;
+        font-size: ${props => props.theme.fontSize.default};
         color: ${props => props.theme.color.text};
     }
 
@@ -40,10 +40,15 @@ const globalStyles = styled.css `
     }
 
     b,
-    strong {
+    strong,
+    .dnasg-fw-bold {
         font-weight: ${props => props.theme.fontWeight.bold};
     }
 
+    .dnasg-fw-medium {
+        font-weight: ${props => props.theme.fontWeight.medium};
+    }
+
     h1,
     h2,
     h3,
@@ -51,200 +56,185 @@ const globalStyles = styled.css `
     h5,
     h6 {
         margin: 1rem 0 0.5rem;
-        font-weight: ${props => props.theme.fontWeight.black};
+        font-weight: ${props => props.theme.fontWeight.bold};
     }
 
     h1,
     .h1 {
-        font-size: ${props => props.theme.fontSize.h2FontSize};
-        line-height: ${props => props.theme.lineHeight.h2LineHeight};
+        font-family: ${props => props.theme.fontFamily.heading};
+        font-size: ${props => props.theme.fontSize.h1S};
+        line-height: ${props => props.theme.lineHeight.h1S};
 
-        ${({ theme }) => styledUtils.media.xs `
-            font-size: ${theme.fontSize.h1FontSize};
-            line-height: ${theme.lineHeight.h1LineHeight};
+        ${({ theme }) => styledUtils.media.md `
+            font-size: ${theme.fontSize.h1L};
+            line-height: ${theme.lineHeight.h1L};
         `}
+
+        &.xl {
+            font-size: ${props => props.theme.fontSize.h1XL};
+            line-height: ${props => props.theme.lineHeight.h1XL};
+            font-weight: ${props => props.theme.fontWeight.black};
+        }
+
+        &.l {
+            font-size: ${props => props.theme.fontSize.h1L};
+            line-height: ${props => props.theme.lineHeight.h1L};
+        }
+
+        &.m {
+            font-size: ${props => props.theme.fontSize.h1M};
+            line-height: ${props => props.theme.lineHeight.h1M};
+        }
+
+        &.s {
+            font-size: ${props => props.theme.fontSize.h1S};
+            line-height: ${props => props.theme.lineHeight.h1S};
+        }
     }
 
     h2,
     .h2 {
-        font-size: ${props => props.theme.fontSize.h2MobileFontSize};
-        line-height: ${props => props.theme.lineHeight.h2MobileLineHeight};
-        ${({ theme }) => styledUtils.media.xs `
-            font-size: ${theme.fontSize.h2FontSize};
-            line-height: ${theme.lineHeight.h2LineHeight};
+        font-family: ${props => props.theme.fontFamily.heading};
+        font-size: ${props => props.theme.fontSize.h2S};
+        line-height: ${props => props.theme.lineHeight.h2S};
+
+        ${({ theme }) => styledUtils.media.md `
+            font-size: ${theme.fontSize.h2M};
+            line-height: ${theme.lineHeight.h2M};
         `};
+
+        &.m {
+            font-size: ${props => props.theme.fontSize.h2M};
+            line-height: ${props => props.theme.lineHeight.h2M};
+        }
+
+        &.s {
+            font-size: ${props => props.theme.fontSize.h2S};
+            line-height: ${props => props.theme.lineHeight.h2S};
+        }
     }
 
     h3,
     .h3 {
-        font-size: ${props => props.theme.fontSize.h3FontSize};
-        line-height: ${props => props.theme.lineHeight.h3LineHeight};
+        font-family: ${props => props.theme.fontFamily.default};
+        font-size: ${props => props.theme.fontSize.h3};
+        line-height: ${props => props.theme.lineHeight.h3};
     }
 
     h4,
     .h4 {
-        font-size: ${props => props.theme.fontSize.h4FontSize};
-        line-height: ${props => props.theme.lineHeight.h4LineHeight};
+        font-family: ${props => props.theme.fontFamily.default};
+        font-size: ${props => props.theme.fontSize.h4};
+        line-height: ${props => props.theme.lineHeight.h4};
     }
 
     h5,
     .h5 {
-        font-size: ${props => props.theme.fontSize.h5FontSize};
-        line-height: ${props => props.theme.lineHeight.h5LineHeight};
+        font-family: ${props => props.theme.fontFamily.default};
+        font-size: ${props => props.theme.fontSize.h5};
+        line-height: ${props => props.theme.lineHeight.h5};
     }
 
     p {
         margin-top: 0;
         margin-bottom: 1em;
-        line-height: ${props => props.theme.lineHeight.paragraphLineHeight};
-    }
-
-    code {
-        font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-    }
-`;
-const styleguideGlobalStyles = styled.css `
-    .rsg-logo-wrapper {
-        display: flex;
-        align-items: center;
-    }
+        line-height: ${props => props.theme.lineHeight.default};
 
-    .rsg-logo-name {
-        flex: 1;
-        color: ${props => props.theme.color.white};
-        font-weight: ${props => props.theme.fontWeight.bold};
-        padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1.5)};
-    }
-
-    .rsg-logo-version {
-        color: ${props => props.theme.color.white};
-        padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1.5)} 0;
-    }
+        &.no-margin {
+            margin-bottom: 0;
+        }
 
-    .dark-container {
-        background-color: ${props => props.theme.color.gray80};
-        color: ${props => props.theme.color.white};
-    }
+        &.par-lead {
+            font-size: ${props => props.theme.fontSize.xl};
+            line-height: ${props => props.theme.lineHeight.xl};
+        }
 
-    .light-container,
-    .dark-container {
-        position: relative;
-        padding: ${({ theme: { base: { baseWidth }, }, }) => `${styledUtils.getMultipliedSize(baseWidth, 1.5)}
-            ${styledUtils.getMultipliedSize(baseWidth, 2.5)}
-            ${styledUtils.getMultipliedSize(baseWidth, 0.5)}
-            ${styledUtils.getMultipliedSize(baseWidth, 1.5)}`};
+        &.par-s {
+            color: ${props => props.theme.color.gray55};
+            font-size: ${props => props.theme.fontSize.s};
+            line-height: ${props => props.theme.lineHeight.s};
+            font-weight: ${props => props.theme.fontWeight.medium};
+        }
 
-        ${() => styledUtils.media.sm `
-            float: left;
-            width: 50%;
-        `};
-    }
-    // helper class for adding some spacing between elements in preview
-    .padded > * {
-        margin: ${({ theme: { base: { baseWidth }, }, }) => `0
-                ${styledUtils.getMultipliedSize(baseWidth, 0.5)}
-                ${styledUtils.getMultipliedSize(baseWidth, 1)}
-                ${styledUtils.getMultipliedSize(baseWidth, 0.5)}`};
+        &.par-xs {
+            color: ${props => props.theme.color.gray55};
+            font-size: ${props => props.theme.fontSize.xs};
+            line-height: ${props => props.theme.lineHeight.xs};
+            font-weight: ${props => props.theme.fontWeight.medium};
+        }
     }
 
-    .horizontal-spacer {
-        margin: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1.5)} 0;
+    .dnasg-label {
+        font-size: ${props => props.theme.fontSize.xs};
+        line-height: ${props => props.theme.lineHeight.auto};
+        font-weight: ${props => props.theme.fontWeight.medium};
+        text-transform: uppercase;
     }
 
-    .width-200 {
-        width: 200px;
+    .dnasg-price {
+        font-family: ${props => props.theme.fontFamily.numerals};
     }
 
-    .flex-center {
-        display: flex;
-        align-items: center;
+    code {
+        font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
     }
-
-    .flex-wrapper {
+`;
+const CheckboxInput_RadioInput = styled['default'].input `
+    display: inline-grid;
+    appearance: none;
+    place-content: center;
+    float: left;
+    margin: 0;
+    cursor: pointer;
+    font-family: ${props => props.theme.fontFamily.default};
+    font-size: ${props => props.theme.fontSize.default};
+    line-height: ${props => props.theme.lineHeight.default};
+    width: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
+    height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
+    color: ${props => props.theme.color.gray25};
+    border: ${props => styledUtils.getDividedSize(props.theme.base.baseWidth, 5)} solid currentColor;
+    background-color: transparent;
+
+    & + label {
+        cursor: pointer;
         display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        margin: 0;
-        padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1.5)};
-
-        li {
-            flex: 1;
-            box-sizing: border-box;
-            text-align: center;
-            list-style: none;
-
-            &.colorswatch {
-                height: 13.75rem;
-                flex-basis: 13.75rem;
-            }
-
-            &.icon {
-                height: 7.75rem;
-                flex-basis: 11.75rem;
-            }
-        }
-    }
-
-    .striped-bg {
-        background: repeating-linear-gradient(
-            45deg,
-            ${props => props.theme.color.white},
-            ${props => props.theme.color.white}
-                ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)},
-            ${props => props.theme.color.grayBg}
-                ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)},
-            ${props => props.theme.color.grayBg}
-                ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)}
-        );
+        padding-left: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
     }
 
-    .colorswatch div {
-        height: 9.375rem;
+    &::before {
+        content: '';
+        transform: scale(0);
+        background-color: currentColor;
     }
 
-    .colorswatch p {
-        margin-bottom: 0;
-    }
-
-    .text-font-wrapper {
-        display: block;
-        margin: 0;
-        border-bottom: 1px solid ${props => props.theme.color.grayWhite};
-        padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 2)} 0;
-
-        .text-a {
-            float: left;
-            font-size: ${props => props.theme.fontSize.h1FontSize};
-            width: 6.25rem;
-        }
+    &:checked {
+        color: ${props => props.theme.color.hotPink};
+        border-color: ${props => props.theme.color.hotPink};
 
-        .text-font {
-            line-height: 3.125;
+        &::before {
+            transform: scale(1);
         }
     }
 
-    .demo-a-label {
-        font-size: ${props => props.theme.fontSize.xsFontSize};
-        color: ${props => props.theme.color.gray40};
-    }
+    &:disabled {
+        cursor: not-allowed;
+        color: ${props => props.theme.color.gray15};
+        border-color: ${props => props.theme.color.gray15};
 
-    .demo-desktop {
-        display: none;
-        ${styledUtils.media.xs `
-            display: block;
-        `}
+        & + label {
+            cursor: not-allowed;
+            color: ${props => props.theme.color.gray15};
+        }
     }
 
-    .demo-mobile {
-        display: block;
-        ${styledUtils.media.xs `
-            display: none;
-        `}
+    &:disabled:checked {
+        color: ${props => props.theme.color.pink2};
+        border-color: ${props => props.theme.color.pink2};
     }
 `;
 styled.createGlobalStyle `
     ${globalStyles}
-    ${styleguideGlobalStyles}
 `;
 
+exports.CheckboxInput_RadioInput = CheckboxInput_RadioInput;
 exports.globalStyles = globalStyles;