@dnanpm/styleguide 3.7.2 → 3.8.2

package/build/cjs/themes/globalStyles.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var styledUtils = require('../utils/styledUtils.js');
 var styled = require('./styled.js');
 var theme = require('./theme.js');
@@ -17,37 +15,37 @@ const globalStyles = styled.css `
     body {
         margin: 0;
         padding: 0;
-        font-family: ${theme["default"].fontFamily.default};
+        font-family: ${theme.default.fontFamily.default};
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-size: ${theme["default"].fontSize.default};
-        color: ${theme["default"].color.text.black};
+        font-size: ${theme.default.fontSize.default};
+        color: ${theme.default.color.text.black};
     }
 
     a {
-        color: ${theme["default"].color.text.pink};
+        color: ${theme.default.color.text.pink};
         text-decoration: none;
     }
 
     a:hover {
-        color: ${theme["default"].color.hover.pink};
+        color: ${theme.default.color.hover.pink};
         text-decoration: underline;
         cursor: pointer;
     }
 
     a:active {
-        color: ${theme["default"].color.hover.pink};
+        color: ${theme.default.color.hover.pink};
         text-decoration: none;
     }
 
     b,
     strong,
     .dnasg-fw-bold {
-        font-weight: ${theme["default"].fontWeight.bold};
+        font-weight: ${theme.default.fontWeight.bold};
     }
 
     .dnasg-fw-medium {
-        font-weight: ${theme["default"].fontWeight.medium};
+        font-weight: ${theme.default.fontWeight.medium};
     }
 
     h1,
@@ -57,152 +55,152 @@ const globalStyles = styled.css `
     h5,
     h6 {
         margin: 1rem 0 0.5rem;
-        font-weight: ${theme["default"].fontWeight.bold};
+        font-weight: ${theme.default.fontWeight.bold};
     }
 
     h1,
     .h1 {
-        font-family: ${theme["default"].fontFamily.heading};
-        font-size: ${theme["default"].fontSize.h1S};
-        line-height: ${theme["default"].lineHeight.h1S};
+        font-family: ${theme.default.fontFamily.heading};
+        font-size: ${theme.default.fontSize.h1S};
+        line-height: ${theme.default.lineHeight.h1S};
 
         ${() => styledUtils.media.md `
-            font-size: ${theme["default"].fontSize.h1L};
-            line-height: ${theme["default"].lineHeight.h1L};
+            font-size: ${theme.default.fontSize.h1L};
+            line-height: ${theme.default.lineHeight.h1L};
         `}
 
         &.xl {
-            font-size: ${theme["default"].fontSize.h1XL};
-            line-height: ${theme["default"].lineHeight.h1XL};
-            font-weight: ${theme["default"].fontWeight.black};
+            font-size: ${theme.default.fontSize.h1XL};
+            line-height: ${theme.default.lineHeight.h1XL};
+            font-weight: ${theme.default.fontWeight.black};
         }
 
         &.l {
-            font-size: ${theme["default"].fontSize.h1L};
-            line-height: ${theme["default"].lineHeight.h1L};
+            font-size: ${theme.default.fontSize.h1L};
+            line-height: ${theme.default.lineHeight.h1L};
         }
 
         &.m {
-            font-size: ${theme["default"].fontSize.h1M};
-            line-height: ${theme["default"].lineHeight.h1M};
+            font-size: ${theme.default.fontSize.h1M};
+            line-height: ${theme.default.lineHeight.h1M};
         }
 
         &.s {
-            font-size: ${theme["default"].fontSize.h1S};
-            line-height: ${theme["default"].lineHeight.h1S};
+            font-size: ${theme.default.fontSize.h1S};
+            line-height: ${theme.default.lineHeight.h1S};
         }
     }
 
     h2,
     .h2 {
-        font-family: ${theme["default"].fontFamily.heading};
-        font-size: ${theme["default"].fontSize.h2S};
-        line-height: ${theme["default"].lineHeight.h2S};
+        font-family: ${theme.default.fontFamily.heading};
+        font-size: ${theme.default.fontSize.h2S};
+        line-height: ${theme.default.lineHeight.h2S};
 
         ${() => styledUtils.media.md `
-            font-size: ${theme["default"].fontSize.h2M};
-            line-height: ${theme["default"].lineHeight.h2M};
+            font-size: ${theme.default.fontSize.h2M};
+            line-height: ${theme.default.lineHeight.h2M};
         `};
 
         &.m {
-            font-size: ${theme["default"].fontSize.h2M};
-            line-height: ${theme["default"].lineHeight.h2M};
+            font-size: ${theme.default.fontSize.h2M};
+            line-height: ${theme.default.lineHeight.h2M};
         }
 
         &.s {
-            font-size: ${theme["default"].fontSize.h2S};
-            line-height: ${theme["default"].lineHeight.h2S};
+            font-size: ${theme.default.fontSize.h2S};
+            line-height: ${theme.default.lineHeight.h2S};
         }
     }
 
     h3,
     .h3 {
-        font-family: ${theme["default"].fontFamily.default};
-        font-size: ${theme["default"].fontSize.h3};
-        line-height: ${theme["default"].lineHeight.h3};
+        font-family: ${theme.default.fontFamily.default};
+        font-size: ${theme.default.fontSize.h3};
+        line-height: ${theme.default.lineHeight.h3};
     }
 
     h4,
     .h4 {
-        font-family: ${theme["default"].fontFamily.default};
-        font-size: ${theme["default"].fontSize.h4};
-        line-height: ${theme["default"].lineHeight.h4};
+        font-family: ${theme.default.fontFamily.default};
+        font-size: ${theme.default.fontSize.h4};
+        line-height: ${theme.default.lineHeight.h4};
     }
 
     h5,
     .h5 {
-        font-family: ${theme["default"].fontFamily.default};
-        font-size: ${theme["default"].fontSize.h5};
-        line-height: ${theme["default"].lineHeight.h5};
+        font-family: ${theme.default.fontFamily.default};
+        font-size: ${theme.default.fontSize.h5};
+        line-height: ${theme.default.lineHeight.h5};
     }
 
     p {
         margin-top: 0;
         margin-bottom: 1em;
-        line-height: ${theme["default"].lineHeight.default};
+        line-height: ${theme.default.lineHeight.default};
 
         &.no-margin {
             margin-bottom: 0;
         }
 
         &.par-lead {
-            font-size: ${theme["default"].fontSize.xl};
-            line-height: ${theme["default"].lineHeight.xl};
+            font-size: ${theme.default.fontSize.xl};
+            line-height: ${theme.default.lineHeight.xl};
         }
 
         &.par-s {
-            color: ${theme["default"].color.text.gray};
-            font-size: ${theme["default"].fontSize.s};
-            line-height: ${theme["default"].lineHeight.s};
-            font-weight: ${theme["default"].fontWeight.medium};
+            color: ${theme.default.color.text.gray};
+            font-size: ${theme.default.fontSize.s};
+            line-height: ${theme.default.lineHeight.s};
+            font-weight: ${theme.default.fontWeight.medium};
         }
 
         &.par-xs {
-            color: ${theme["default"].color.text.gray};
-            font-size: ${theme["default"].fontSize.xs};
-            line-height: ${theme["default"].lineHeight.xs};
-            font-weight: ${theme["default"].fontWeight.medium};
+            color: ${theme.default.color.text.gray};
+            font-size: ${theme.default.fontSize.xs};
+            line-height: ${theme.default.lineHeight.xs};
+            font-weight: ${theme.default.fontWeight.medium};
         }
     }
 
     .dnasg-label {
-        font-size: ${theme["default"].fontSize.xs};
-        line-height: ${theme["default"].lineHeight.auto};
-        font-weight: ${theme["default"].fontWeight.medium};
+        font-size: ${theme.default.fontSize.xs};
+        line-height: ${theme.default.lineHeight.auto};
+        font-weight: ${theme.default.fontWeight.medium};
         text-transform: uppercase;
     }
 
     .dnasg-price {
-        font-family: ${theme["default"].fontFamily.numerals};
+        font-family: ${theme.default.fontFamily.numerals};
     }
 
     code {
         font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
     }
 `;
-const CheckboxAndRadioInputCore = styled["default"].input `
+const CheckboxAndRadioInputCore = styled.default.input `
     display: inline-grid;
     appearance: none;
     place-content: center;
     float: left;
     margin: 0;
     cursor: pointer;
-    font-family: ${theme["default"].fontFamily.default};
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
-    min-width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
-    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
-    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
-    color: ${theme["default"].color.line.L01};
-    border: 2px solid ${theme["default"].color.line.L01};
-    border-radius: ${theme["default"].radius.s};
-    background-color: ${theme["default"].color.background.white.default};
+    font-family: ${theme.default.fontFamily.default};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    min-width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+    height: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+    color: ${theme.default.color.line.L01};
+    border: 2px solid ${theme.default.color.line.L01};
+    border-radius: ${theme.default.radius.s};
+    background-color: ${theme.default.color.background.white.default};
 
     & + label {
         cursor: pointer;
-        color: ${theme["default"].color.text.black};
-        font-weight: ${theme["default"].fontWeight.medium};
-        padding-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+        color: ${theme.default.color.text.black};
+        font-weight: ${theme.default.fontWeight.medium};
+        padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     }
 
     &::before {
@@ -212,8 +210,8 @@ const CheckboxAndRadioInputCore = styled["default"].input `
     }
 
     &:checked {
-        color: ${theme["default"].color.default.pink};
-        border-color: ${theme["default"].color.default.pink};
+        color: ${theme.default.color.default.pink};
+        border-color: ${theme.default.color.default.pink};
 
         &::before {
             transform: scale(1);
@@ -222,19 +220,19 @@ const CheckboxAndRadioInputCore = styled["default"].input `
 
     &:disabled {
         cursor: not-allowed;
-        color: ${theme["default"].color.line.L01}${theme["default"].color.transparency.T30};
-        border-color: ${theme["default"].color.line.L01}${theme["default"].color.transparency.T30};
-        background-color: ${theme["default"].color.background.white.default}${theme["default"].color.transparency.T30};
+        color: ${theme.default.color.line.L01}${theme.default.color.transparency.T30};
+        border-color: ${theme.default.color.line.L01}${theme.default.color.transparency.T30};
+        background-color: ${theme.default.color.background.white.default}${theme.default.color.transparency.T30};
 
         & + label {
             cursor: not-allowed;
-            color: ${theme["default"].color.text.black}${theme["default"].color.transparency.T30};
+            color: ${theme.default.color.text.black}${theme.default.color.transparency.T30};
         }
     }
 
     &:disabled:checked {
-        color: ${theme["default"].color.default.pink}${theme["default"].color.transparency.T30};
-        border-color: ${theme["default"].color.default.pink}${theme["default"].color.transparency.T30};
+        color: ${theme.default.color.default.pink}${theme.default.color.transparency.T30};
+        border-color: ${theme.default.color.default.pink}${theme.default.color.transparency.T30};
     }
 `;
 styled.createGlobalStyle `

package/build/cjs/themes/gridTheme.js

@@ -6,4 +6,4 @@ const gridTheme = {
     gutter: '0.9375rem', // 15px
 };
 
-exports["default"] = gridTheme;
+exports.default = gridTheme;

package/build/cjs/themes/styled.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var createStyled = require('../utils/createStyled.js');
 
-const { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet } = createStyled["default"]();
+const { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet } = createStyled.default();
 
 exports.ServerStyleSheet = ServerStyleSheet;
 exports.ThemeProvider = ThemeProvider;
 exports.createGlobalStyle = createGlobalStyle;
 exports.css = css;
-exports["default"] = styled;
+exports.default = styled;
 exports.keyframes = keyframes;

package/build/cjs/themes/theme.js

@@ -15,17 +15,17 @@ var lineHeight = require('./themeComponents/lineHeight.js');
 var radius = require('./themeComponents/radius.js');
 
 const theme = {
-    base: base["default"],
-    breakpoints: breakpoints["default"],
-    color: color["default"],
-    fontFamily: fontFamily["default"],
-    fontSize: fontSize["default"],
-    fontWeight: fontWeight["default"],
-    form: forms["default"],
-    grid: gridTheme["default"],
-    lineHeight: lineHeight["default"],
+    base: base.default,
+    breakpoints: breakpoints.default,
+    color: color.default,
+    fontFamily: fontFamily.default,
+    fontSize: fontSize.default,
+    fontWeight: fontWeight.default,
+    form: forms.default,
+    grid: gridTheme.default,
+    lineHeight: lineHeight.default,
     media: styledUtils.media,
-    radius: radius["default"],
+    radius: radius.default,
 };
 
-exports["default"] = theme;
+exports.default = theme;

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

@@ -6,11 +6,11 @@ const base = {
     baseHeight: {
         value: 0.625,
         unit: 'rem',
-    },
+    }, // 10px
     baseWidth: {
         value: 0.625,
         unit: 'rem',
     }, // 10px
 };
 
-exports["default"] = base;
+exports.default = base;

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

@@ -10,4 +10,4 @@ const breakpoints = {
     xs: 480,
 };
 
-exports["default"] = breakpoints;
+exports.default = breakpoints;

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

@@ -86,4 +86,4 @@ const color = {
     },
 };
 
-exports["default"] = color;
+exports.default = color;

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

@@ -8,4 +8,4 @@ const fontFamily = {
     numerals: `"DNA Numerals", "DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
 };
 
-exports["default"] = fontFamily;
+exports.default = fontFamily;

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

@@ -3,21 +3,21 @@
 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',
+    default: '1rem', // 16px
+    xl: '1.25rem', // 20px
+    l: '1.125rem', // 18px
+    s: '0.875rem', // 14px
+    xs: '0.75rem', // 12px
+    h1XL: '2.875rem', // 46px
+    h1L: '2.5rem', // 40px
+    h1M: '2.125rem', // 34px
+    h1S: '1.875rem', // 30px
+    h2M: '1.875rem', // 30px
+    h2S: '1.625rem', // 26px
+    h3: '1.5rem', // 24px
+    h4: '1.25rem', // 20px
     h5: '1rem', // 16px
 };
 var fontSize$1 = Object.assign({ h1: fontSize.h1L, h2: fontSize.h2M }, fontSize);
 
-exports["default"] = fontSize$1;
+exports.default = fontSize$1;

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

@@ -21,4 +21,4 @@ const fontWeight = {
     black: 900,
 };
 
-exports["default"] = fontWeight;
+exports.default = fontWeight;

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

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

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

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

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

@@ -38,7 +38,7 @@ const navigation = {
 
 exports.IconContainerMinWidth = IconContainerMinWidth;
 exports.IconContainerWidth = IconContainerWidth;
-exports["default"] = navigation;
+exports.default = navigation;
 exports.desktopLogoSize = desktopLogoSize;
 exports.desktopNavMaxHeight = desktopNavMaxHeight;
 exports.headerLogoSize = headerLogoSize;

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

@@ -31,4 +31,4 @@ const radius = {
     pill: '100rem',
 };
 
-exports["default"] = radius;
+exports.default = radius;

package/build/cjs/utils/common.d.ts

@@ -1,6 +1,6 @@
 import type { ElevationLevel } from '../types/elevation.d';
 declare const getElevationShadow: ({ elevation, shadow, }: {
     elevation: ElevationLevel;
-    shadow?: string | undefined;
+    shadow?: string;
 }) => string;
 export default getElevationShadow;

package/build/cjs/utils/common.js

@@ -7,9 +7,9 @@ var theme = require('../themes/theme.js');
 const getElevationShadow = ({ elevation, shadow, }) => {
     const shadowConfig = {
         none: [0, 0, 0],
-        low: [0, 2, 16, `${theme["default"].color.default.black}0f`],
-        high: [0, 6, 24, `${theme["default"].color.default.black}14`],
-        extraHigh: [0, 8, 64, `${theme["default"].color.default.black}29`],
+        low: [0, 2, 16, `${theme.default.color.default.black}0f`],
+        high: [0, 6, 24, `${theme.default.color.default.black}14`],
+        extraHigh: [0, 8, 64, `${theme.default.color.default.black}29`],
     };
     const sidesMap = shadow === null || shadow === void 0 ? void 0 : shadow.split(' ').map(Number);
     const clipSize = sidesMap &&
@@ -25,4 +25,4 @@ const getElevationShadow = ({ elevation, shadow, }) => {
     return `${boxShadow}${clipPath}`;
 };
 
-exports["default"] = getElevationShadow;
+exports.default = getElevationShadow;