@dnanpm/styleguide 2.3.0 → 3.0.0

package/build/es/themes/globalStyles.js

@@ -1,5 +1,6 @@
-import { media, getMultipliedSize, getDividedSize } from '../utils/styledUtils.js';
+import { media, getMultipliedSize } from '../utils/styledUtils.js';
 import styled, { css, createGlobalStyle } from './styled.js';
+import theme from './theme.js';
 
 const globalStyles = css `
     *,
@@ -12,37 +13,37 @@ const globalStyles = css `
     body {
         margin: 0;
         padding: 0;
-        font-family: ${props => props.theme.fontFamily.default};
+        font-family: ${theme.fontFamily.default};
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        font-size: ${props => props.theme.fontSize.default};
-        color: ${props => props.theme.color.text};
+        font-size: ${theme.fontSize.default};
+        color: ${theme.color.text.black};
     }
 
     a {
-        color: ${props => props.theme.color.hotPink};
+        color: ${theme.color.text.pink};
         text-decoration: none;
     }
 
     a:hover {
-        color: ${props => props.theme.color.hotPinkHover};
+        color: ${theme.color.hover.pink};
         text-decoration: underline;
         cursor: pointer;
     }
 
     a:active {
-        color: ${props => props.theme.color.hotPinkHover};
+        color: ${theme.color.hover.pink};
         text-decoration: none;
     }
 
     b,
     strong,
     .dnasg-fw-bold {
-        font-weight: ${props => props.theme.fontWeight.bold};
+        font-weight: ${theme.fontWeight.bold};
     }
 
     .dnasg-fw-medium {
-        font-weight: ${props => props.theme.fontWeight.medium};
+        font-weight: ${theme.fontWeight.medium};
     }
 
     h1,
@@ -52,123 +53,123 @@ const globalStyles = css `
     h5,
     h6 {
         margin: 1rem 0 0.5rem;
-        font-weight: ${props => props.theme.fontWeight.bold};
+        font-weight: ${theme.fontWeight.bold};
     }
 
     h1,
     .h1 {
-        font-family: ${props => props.theme.fontFamily.heading};
-        font-size: ${props => props.theme.fontSize.h1S};
-        line-height: ${props => props.theme.lineHeight.h1S};
+        font-family: ${theme.fontFamily.heading};
+        font-size: ${theme.fontSize.h1S};
+        line-height: ${theme.lineHeight.h1S};
 
-        ${({ theme }) => media.md `
+        ${() => 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};
+            font-size: ${theme.fontSize.h1XL};
+            line-height: ${theme.lineHeight.h1XL};
+            font-weight: ${theme.fontWeight.black};
         }
 
         &.l {
-            font-size: ${props => props.theme.fontSize.h1L};
-            line-height: ${props => props.theme.lineHeight.h1L};
+            font-size: ${theme.fontSize.h1L};
+            line-height: ${theme.lineHeight.h1L};
         }
 
         &.m {
-            font-size: ${props => props.theme.fontSize.h1M};
-            line-height: ${props => props.theme.lineHeight.h1M};
+            font-size: ${theme.fontSize.h1M};
+            line-height: ${theme.lineHeight.h1M};
         }
 
         &.s {
-            font-size: ${props => props.theme.fontSize.h1S};
-            line-height: ${props => props.theme.lineHeight.h1S};
+            font-size: ${theme.fontSize.h1S};
+            line-height: ${theme.lineHeight.h1S};
         }
     }
 
     h2,
     .h2 {
-        font-family: ${props => props.theme.fontFamily.heading};
-        font-size: ${props => props.theme.fontSize.h2S};
-        line-height: ${props => props.theme.lineHeight.h2S};
+        font-family: ${theme.fontFamily.heading};
+        font-size: ${theme.fontSize.h2S};
+        line-height: ${theme.lineHeight.h2S};
 
-        ${({ theme }) => media.md `
+        ${() => 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};
+            font-size: ${theme.fontSize.h2M};
+            line-height: ${theme.lineHeight.h2M};
         }
 
         &.s {
-            font-size: ${props => props.theme.fontSize.h2S};
-            line-height: ${props => props.theme.lineHeight.h2S};
+            font-size: ${theme.fontSize.h2S};
+            line-height: ${theme.lineHeight.h2S};
         }
     }
 
     h3,
     .h3 {
-        font-family: ${props => props.theme.fontFamily.default};
-        font-size: ${props => props.theme.fontSize.h3};
-        line-height: ${props => props.theme.lineHeight.h3};
+        font-family: ${theme.fontFamily.default};
+        font-size: ${theme.fontSize.h3};
+        line-height: ${theme.lineHeight.h3};
     }
 
     h4,
     .h4 {
-        font-family: ${props => props.theme.fontFamily.default};
-        font-size: ${props => props.theme.fontSize.h4};
-        line-height: ${props => props.theme.lineHeight.h4};
+        font-family: ${theme.fontFamily.default};
+        font-size: ${theme.fontSize.h4};
+        line-height: ${theme.lineHeight.h4};
     }
 
     h5,
     .h5 {
-        font-family: ${props => props.theme.fontFamily.default};
-        font-size: ${props => props.theme.fontSize.h5};
-        line-height: ${props => props.theme.lineHeight.h5};
+        font-family: ${theme.fontFamily.default};
+        font-size: ${theme.fontSize.h5};
+        line-height: ${theme.lineHeight.h5};
     }
 
     p {
         margin-top: 0;
         margin-bottom: 1em;
-        line-height: ${props => props.theme.lineHeight.default};
+        line-height: ${theme.lineHeight.default};
 
         &.no-margin {
             margin-bottom: 0;
         }
 
         &.par-lead {
-            font-size: ${props => props.theme.fontSize.xl};
-            line-height: ${props => props.theme.lineHeight.xl};
+            font-size: ${theme.fontSize.xl};
+            line-height: ${theme.lineHeight.xl};
         }
 
         &.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};
+            color: ${theme.color.text.gray};
+            font-size: ${theme.fontSize.s};
+            line-height: ${theme.lineHeight.s};
+            font-weight: ${theme.fontWeight.medium};
         }
 
         &.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};
+            color: ${theme.color.text.gray};
+            font-size: ${theme.fontSize.xs};
+            line-height: ${theme.lineHeight.xs};
+            font-weight: ${theme.fontWeight.medium};
         }
     }
 
     .dnasg-label {
-        font-size: ${props => props.theme.fontSize.xs};
-        line-height: ${props => props.theme.lineHeight.auto};
-        font-weight: ${props => props.theme.fontWeight.medium};
+        font-size: ${theme.fontSize.xs};
+        line-height: ${theme.lineHeight.auto};
+        font-weight: ${theme.fontWeight.medium};
         text-transform: uppercase;
     }
 
     .dnasg-price {
-        font-family: ${props => props.theme.fontFamily.numerals};
+        font-family: ${theme.fontFamily.numerals};
     }
 
     code {
@@ -182,19 +183,22 @@ const CheckboxAndRadioInputCore = styled.input `
     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};
-    min-width: ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
-    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;
+    font-family: ${theme.fontFamily.default};
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    min-width: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    width: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    height: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    color: ${theme.color.line.L01};
+    border: 2px solid ${theme.color.line.L01};
+    border-radius: ${theme.radius.s};
+    background-color: ${theme.color.background.white.default};
 
     & + label {
         cursor: pointer;
-        padding-left: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
+        color: ${theme.color.text.black};
+        font-weight: ${theme.fontWeight.medium};
+        padding-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
     }
 
     &::before {
@@ -204,8 +208,8 @@ const CheckboxAndRadioInputCore = styled.input `
     }
 
     &:checked {
-        color: ${props => props.theme.color.hotPink};
-        border-color: ${props => props.theme.color.hotPink};
+        color: ${theme.color.default.pink};
+        border-color: ${theme.color.default.pink};
 
         &::before {
             transform: scale(1);
@@ -214,18 +218,19 @@ const CheckboxAndRadioInputCore = styled.input `
 
     &:disabled {
         cursor: not-allowed;
-        color: ${props => props.theme.color.gray15};
-        border-color: ${props => props.theme.color.gray15};
+        color: ${theme.color.line.L01}${theme.color.transparency.T30};
+        border-color: ${theme.color.line.L01}${theme.color.transparency.T30};
+        background-color: ${theme.color.background.white.default}${theme.color.transparency.T30};
 
         & + label {
             cursor: not-allowed;
-            color: ${props => props.theme.color.gray15};
+            color: ${theme.color.text.black}${theme.color.transparency.T30};
         }
     }
 
     &:disabled:checked {
-        color: ${props => props.theme.color.pink2};
-        border-color: ${props => props.theme.color.pink2};
+        color: ${theme.color.default.pink}${theme.color.transparency.T30};
+        border-color: ${theme.color.default.pink}${theme.color.transparency.T30};
     }
 `;
 createGlobalStyle `

package/build/es/themes/gridTheme.js

@@ -2,4 +2,4 @@ const gridTheme = {
     gutter: '0.9375rem',
 };
 
-export default gridTheme;
+export { gridTheme as default };