@dnanpm/styleguide 1.8.0 → 2.0.0

package/build/es/themes/globalStyles.js

@@ -1,5 +1,5 @@
-import { css, createGlobalStyle } from './styled.js';
-import { media, getMultipliedSize } from '../utils/styledUtils.js';
+import styled, { css, createGlobalStyle } from './styled.js';
+import { media, getMultipliedSize, getDividedSize } from '../utils/styledUtils.js';
 
 const globalStyles = css `
     *,
@@ -12,10 +12,10 @@ const globalStyles = 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};
     }
 
@@ -36,10 +36,15 @@ const globalStyles = 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,
@@ -47,200 +52,184 @@ const globalStyles = 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 }) => media.xs `
-            font-size: ${theme.fontSize.h1FontSize};
-            line-height: ${theme.lineHeight.h1LineHeight};
+        ${({ theme }) => 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 }) => 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 }) => 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 = 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 => getMultipliedSize(props.theme.base.baseWidth, 1.5)};
-    }
-
-    .rsg-logo-version {
-        color: ${props => props.theme.color.white};
-        padding: ${props => 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 }, }, }) => `${getMultipliedSize(baseWidth, 1.5)}
-            ${getMultipliedSize(baseWidth, 2.5)}
-            ${getMultipliedSize(baseWidth, 0.5)}
-            ${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};
+        }
 
-        ${() => media.sm `
-            float: left;
-            width: 50%;
-        `};
-    }
-    // helper class for adding some spacing between elements in preview
-    .padded > * {
-        margin: ${({ theme: { base: { baseWidth }, }, }) => `0
-                ${getMultipliedSize(baseWidth, 0.5)}
-                ${getMultipliedSize(baseWidth, 1)}
-                ${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 => 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.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 => getMultipliedSize(props.theme.base.baseWidth, 2)};
+    height: ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
+    color: ${props => props.theme.color.gray25};
+    border: ${props => 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 => 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 => getMultipliedSize(props.theme.base.baseWidth, 1)},
-            ${props => props.theme.color.grayBg}
-                ${props => getMultipliedSize(props.theme.base.baseWidth, 1)},
-            ${props => props.theme.color.grayBg}
-                ${props => getMultipliedSize(props.theme.base.baseWidth, 2)}
-        );
+        padding-left: ${props => 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 => 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;
-        ${media.xs `
-            display: block;
-        `}
+        & + label {
+            cursor: not-allowed;
+            color: ${props => props.theme.color.gray15};
+        }
     }
 
-    .demo-mobile {
-        display: block;
-        ${media.xs `
-            display: none;
-        `}
+    &:disabled:checked {
+        color: ${props => props.theme.color.pink2};
+        border-color: ${props => props.theme.color.pink2};
     }
 `;
 createGlobalStyle `
     ${globalStyles}
-    ${styleguideGlobalStyles}
 `;
 
-export { globalStyles };
+export { CheckboxInput_RadioInput, globalStyles };