@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

package/src/css/primitives/checkbox/__styles.ts

@@ -1,127 +1,129 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from '../../../core/lib/styled'
-import {rem, ThemeProps} from '../../../core/styles'
-import {focusRingBorderStyle, focusRingStyle} from '../../../core/styles/internal'
+// import {getTheme_v2} from '@sanity/ui/theme'
+// import {css} from '../../../core/lib/styled'
+// import {rem, ThemeProps} from '../../../core/styles'
+// import {focusRingBorderStyle, focusRingStyle} from '../../../core/styles/internal'
 
-export function checkboxBaseStyles(): ReturnType<typeof css> {
-  return css`
-    position: relative;
-    display: inline-block;
-  `
-}
+// export function checkboxBaseStyles(): ReturnType<typeof css> {
+//   return css`
+//     position: relative;
+//     display: inline-block;
+//   `
+// }
 
-export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input, radius} = getTheme_v2(props.theme)
-  const {focusRing} = input.checkbox
+// export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
+//   const {color, input, radius} = getTheme_v2(props.theme)
+//   const {focusRing} = input.checkbox
 
-  return css`
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    outline: none;
-    opacity: 0;
-    z-index: 1;
-    padding: 0;
-    margin: 0;
+//   return css`
+//     position: absolute;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     outline: none;
+//     opacity: 0;
+//     z-index: 1;
+//     padding: 0;
+//     margin: 0;
 
-    & + span {
-      position: relative;
-      display: block;
-      height: ${rem(input.checkbox.size)};
-      width: ${rem(input.checkbox.size)};
-      box-sizing: border-box;
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.enabled.border,
-        width: input.border.width,
-      })};
-      border-radius: ${rem(radius[2])};
-      line-height: 1;
-      background-color: ${color.input.default.enabled.bg};
+//     & + span {
+//       position: relative;
+//       display: block;
+//       height: ${rem(input.checkbox.size)};
+//       width: ${rem(input.checkbox.size)};
+//       box-sizing: border-box;
+//       box-shadow: ${focusRingBorderStyle({
+//         color: color.input.default.enabled.border,
+//         width: input.border.width,
+//       })};
+//       border-radius: ${rem(radius[2])};
+//       line-height: 1;
+//       background-color: ${color.input.default.enabled.bg};
 
-      & > svg {
-        display: block;
-        position: absolute;
-        opacity: 0;
-        height: 100%;
-        width: 100%;
+//       & > svg {
+//         display: block;
+//         position: absolute;
+//         opacity: 0;
+//         height: 100%;
+//         width: 100%;
 
-        & > path {
-          vector-effect: non-scaling-stroke;
-          stroke-width: 1.5px !important;
-        }
-      }
-    }
+//         & > path {
+//           vector-effect: non-scaling-stroke;
+//           stroke-width: 1.5px !important;
+//         }
+//       }
+//     }
 
-    &:checked + span {
-      background: ${color.input.default.enabled.fg};
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.enabled.fg,
-        width: input.border.width,
-      })};
-      color: ${color.input.default.enabled.bg};
-    }
+//     &:checked + span {
+//       background: ${color.input.default.enabled.fg};
+//       box-shadow: ${focusRingBorderStyle({
+//         color: color.input.default.enabled.fg,
+//         width: input.border.width,
+//       })};
+//       color: ${color.input.default.enabled.bg};
+//     }
 
-    /* focus */
-    &:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({focusRing})};
-    }
+//     /* focus */
+//     &:not(:disabled):focus:focus-visible + span {
+//       box-shadow: ${focusRingStyle({focusRing})};
+//     }
 
-    /* focus when checked - uses a different offset */
-    &:not(:disabled):focus:focus-visible&:checked + span {
-      box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})};
-    }
+//     /* focus when checked - uses a different offset */
+//     &:not(:disabled):focus:focus-visible&:checked + span {
+//       box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})};
+//     }
 
-    &[data-error] + span {
-      background-color: ${color.input.invalid.enabled.border};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.invalid.enabled.muted.bg,
-      })};
-      color: ${color.input.default.disabled.fg};
-    }
-    &[data-error]&:checked + span {
-      background-color: ${color.input.invalid.enabled.muted.bg};
-      color: ${color.input.default.enabled.bg};
-    }
-    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
-        focusRing: {width: 1, offset: 1},
-      })};
-    }
+//     &[data-error] + span {
+//       background-color: ${color.input.invalid.enabled.border};
+//       box-shadow: ${focusRingBorderStyle({
+//         width: input.border.width,
+//         color: color.input.invalid.enabled.muted.bg,
+//       })};
+//       color: ${color.input.default.disabled.fg};
+//     }
+//     &[data-error]&:checked + span {
+//       background-color: ${color.input.invalid.enabled.muted.bg};
+//       color: ${color.input.default.enabled.bg};
+//     }
+//     &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
+//       box-shadow: ${focusRingStyle({
+//         border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
+//         focusRing: {width: 1, offset: 1},
+//       })};
+//     }
 
-    &:disabled + span {
-      background-color: ${color.input.default.disabled.bg};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.default.disabled.border,
-      })};
-      color: ${color.input.default.disabled.fg};
-    }
-    &:disabled&:checked + span {
-      background-color: ${color.input.default.disabled.muted.bg};
-    }
+//     &:disabled + span {
+//       background-color: ${color.input.default.disabled.bg};
+//       box-shadow: ${focusRingBorderStyle({
+//         width: input.border.width,
+//         color: color.input.default.disabled.border,
+//       })};
+//       color: ${color.input.default.disabled.fg};
+//     }
+//     &:disabled&:checked + span {
+//       background-color: ${color.input.default.disabled.muted.bg};
+//     }
 
-    &[data-read-only] + span {
-      background-color: ${color.input.default.readOnly.bg};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.default.readOnly.border,
-      })};
-      color: ${color.input.default.readOnly.fg};
-    }
+//     &[data-read-only] + span {
+//       background-color: ${color.input.default.readOnly.bg};
+//       box-shadow: ${focusRingBorderStyle({
+//         width: input.border.width,
+//         color: color.input.default.readOnly.border,
+//       })};
+//       color: ${color.input.default.readOnly.fg};
+//     }
 
-    &[data-read-only]&:checked + span {
-      background-color: ${color.input.default.readOnly.muted.bg};
-    }
+//     &[data-read-only]&:checked + span {
+//       background-color: ${color.input.default.readOnly.muted.bg};
+//     }
 
-    &:checked + span > svg:first-child {
-      opacity: 1;
-    }
-    &:indeterminate + span > svg:last-child {
-      opacity: 1;
-    }
-  `
-}
+//     &:checked + span > svg:first-child {
+//       opacity: 1;
+//     }
+//     &:indeterminate + span > svg:last-child {
+//       opacity: 1;
+//     }
+//   `
+// }
+
+export {}

package/src/css/primitives/checkbox/checkbox.style.ts

@@ -0,0 +1,154 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.checkbox': {
+    position: 'relative',
+    display: 'inline-block',
+  },
+
+  '.checkbox-input': {
+    'position': 'absolute',
+    'top': 0,
+    'left': 0,
+    'width': '100%',
+    'height': '100%',
+    'outline': 'none',
+    'opacity': 0,
+    'zIndex': 1,
+    'padding': 0,
+    'margin': 0,
+
+    '@nest': {
+      '& + span': {
+        'position': 'relative',
+        'display': 'block',
+        'width': `var(--input-checkbox-size)`,
+        'height': `var(--input-checkbox-size)`,
+        'boxSizing': 'border-box',
+        'borderRadius': `var(--radius-2)`,
+        'lineHeight': 1,
+        'backgroundColor': `var(--color-checkbox-bg)`,
+        'boxShadow': `inset 0 0 0 1px var(--color-checkbox-border)`,
+        'color': `var(--color-checkbox-fg)`,
+
+        // '--color-checkbox-bg': 'var(--color-input-default-enabled-bg)',
+        // '--color-checkbox-border': 'var(--color-input-default-enabled-border)',
+        // '--color-checkbox-fg': 'var(--color-input-default-enabled-fg)',
+
+        '--color-checkbox-bg': 'var(--color-tinted-default-bg-0)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-1)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
+
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.border,
+        //   width: input.border.width,
+        // })},
+      },
+
+      '& + span > svg': {
+        display: 'block',
+        position: 'absolute',
+        opacity: 0,
+        height: '100%',
+        width: '100%',
+      },
+
+      '& + span > svg > path': {
+        vectorEffect: 'non-scaling-stroke',
+        strokeWidth: '1.5px !important',
+      },
+
+      '&:hover + span': {
+        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
+      },
+
+      '&:checked + span': {
+        '--color-checkbox-bg': 'var(--color-solid-default-bg-0)',
+        '--color-checkbox-border': 'var(--color-solid-default-bg-0)',
+        '--color-checkbox-fg': 'var(--color-solid-default-fg-0)',
+        // '--color-checkbox-bg': 'var(--color-input-default-enabled-fg)',
+        // '--color-checkbox-border': 'var(--color-input-default-enabled-fg)',
+        // '--color-checkbox-fg': 'var(--color-input-default-enabled-bg)',
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.fg,
+        //   width: input.border.width,
+        // })},
+      },
+
+      '&:checked + span > svg:first-child': {
+        opacity: 1,
+      },
+
+      // focus
+      '&:not(:disabled):focus:focus-visible + span': {
+        // box-shadow: ${focusRingStyle({focusRing})},
+      },
+
+      // focus when checked - uses a different offset
+      '&:not(:disabled):focus:focus-visible&:checked + span': {
+        // box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})},
+      },
+
+      '&[data-error] + span': {
+        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-border)',
+        '--color-checkbox-border': 'var(--color-input-invalid-enabled-bg)',
+        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-fg)',
+        // box-shadow: ${focusRingBorderStyle({
+        //   width: input.border.width,
+        //   color: color.input.invalid.enabled.muted.bg,
+        // })},
+      },
+
+      '&[data-error]:checked + span': {
+        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-muted-bg)',
+        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-bg)',
+      },
+
+      '&[data-error]:checked:not(:disabled):focus:focus-visible + span': {
+        '--color-checkbox-border': 'var(--color-input-invalid-readOnly-muted-bg)',
+        // box-shadow: ${focusRingStyle({
+        //   border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
+        //   focusRing: {width: 1, offset: 1},
+        // })},
+      },
+
+      '&:disabled + span': {
+        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-0)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-border-2)',
+      },
+
+      '&:checked:disabled + span': {
+        '--color-checkbox-bg': 'var(--color-tinted-default-border-2)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-bg-0)',
+      },
+
+      // '&:disabled:checked + span': {
+      //   '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
+      // },
+
+      '&[data-read-only] + span': {
+        '--color-checkbox-bg': 'var(--color-input-default-readOnly-bg)',
+        '--color-checkbox-border': 'var(--color-input-default-readOnly-border)',
+        '--color-checkbox-fg': 'var(--color-input-default-readOnly-fg)',
+        // box-shadow: ${focusRingBorderStyle({
+        //   width: input.border.width,
+        //   color: color.input.default.readOnly.border,
+        // })},
+      },
+
+      '&[data-read-only]:checked + span': {
+        '--color-checkbox-bg': 'var(--color-input-default-readOnly-muted-bg)',
+      },
+
+      '&:indeterminate + span > svg:last-child': {
+        opacity: 1,
+      },
+    },
+  },
+}
+
+export const checkboxStyle: Style = {layers: {primitive}}

package/src/css/primitives/checkbox/checkbox.ts

@@ -1,9 +1,9 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_comp} from '../../_comp'
 
-export function checkbox(): string {
-  return composeClassNames('checkbox')
+export function checkbox(): string | undefined {
+  return _comp('checkbox')
 }
 
-export function checkboxInput(): string {
-  return composeClassNames('checkbox-input')
+export function checkboxInput(): string | undefined {
+  return _comp('checkbox-input')
 }

package/src/css/primitives/checkbox/rules.ts

@@ -31,9 +31,14 @@ export const checkboxRules: Rules = {
         'boxShadow': `inset 0 0 0 1px var(--color-checkbox-border)`,
         'color': `var(--color-checkbox-fg)`,
 
-        '--color-checkbox-bg': 'var(--color-input-default-enabled-bg)',
-        '--color-checkbox-border': 'var(--color-input-default-enabled-border)',
-        '--color-checkbox-fg': 'var(--color-input-default-enabled-fg)',
+        // '--color-checkbox-bg': 'var(--color-input-default-enabled-bg)',
+        // '--color-checkbox-border': 'var(--color-input-default-enabled-border)',
+        // '--color-checkbox-fg': 'var(--color-input-default-enabled-fg)',
+
+        '--color-checkbox-bg': 'var(--color-tinted-default-bg-0)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-1)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
+
         // box-shadow: ${focusRingBorderStyle({
         //   color: color.input.default.enabled.border,
         //   width: input.border.width,
@@ -53,10 +58,19 @@ export const checkboxRules: Rules = {
         strokeWidth: '1.5px !important',
       },
 
+      '&:hover + span': {
+        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
+      },
+
       '&:checked + span': {
-        '--color-checkbox-bg': 'var(--color-input-default-enabled-fg)',
-        '--color-checkbox-border': 'var(--color-input-default-enabled-fg)',
-        '--color-checkbox-fg': 'var(--color-input-default-enabled-bg)',
+        '--color-checkbox-bg': 'var(--color-solid-default-bg-0)',
+        '--color-checkbox-border': 'var(--color-solid-default-bg-0)',
+        '--color-checkbox-fg': 'var(--color-solid-default-fg-0)',
+        // '--color-checkbox-bg': 'var(--color-input-default-enabled-fg)',
+        // '--color-checkbox-border': 'var(--color-input-default-enabled-fg)',
+        // '--color-checkbox-fg': 'var(--color-input-default-enabled-bg)',
         // box-shadow: ${focusRingBorderStyle({
         //   color: color.input.default.enabled.fg,
         //   width: input.border.width,
@@ -101,19 +115,21 @@ export const checkboxRules: Rules = {
       },
 
       '&:disabled + span': {
-        '--color-checkbox-bg': 'var(--color-input-default-disabled-bg)',
-        '--color-checkbox-border': 'var(--color-input-default-disabled-border)',
-        '--color-checkbox-fg': 'var(--color-input-default-disabled-fg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.default.disabled.border,
-        // })},
+        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-0)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-border-2)',
       },
 
-      '&:disabled:checked + span': {
-        '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
+      '&:checked:disabled + span': {
+        '--color-checkbox-bg': 'var(--color-tinted-default-border-2)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-bg-0)',
       },
 
+      // '&:disabled:checked + span': {
+      //   '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
+      // },
+
       '&[data-read-only] + span': {
         '--color-checkbox-bg': 'var(--color-input-default-readOnly-bg)',
         '--color-checkbox-border': 'var(--color-input-default-readOnly-border)',

package/src/css/primitives/code/code.style.ts

@@ -0,0 +1,62 @@
+import {FONT_CODE_SIZE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.code': {
+    '--font-weight-regular': `var(--font-code-weight-regular)`,
+    '--font-weight-medium': `var(--font-code-weight-medium)`,
+    '--font-weight-semibold': `var(--font-code-weight-semibold)`,
+    '--font-weight-bold': `var(--font-code-weight-bold)`,
+
+    '--font-family': `var(--font-code-family)`,
+    '--font-feature-settings': `var(--font-code-feature-settings)`,
+
+    'color': 'var(--color-code-fg)',
+
+    '@nest': {
+      '& > code': {
+        fontFamily: 'inherit',
+      },
+
+      // & code {
+      //   font-family: inherit;
+
+      //   &.refractor .token {
+      //     ${codeSyntaxHighlightingStyle}
+      //   }
+      // }
+
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+        borderRadius: '1px',
+      },
+
+      '& svg': {
+        // Some popular CSS libraries change the defaults for SVG display
+        // Make sure SVGs are rendered as inline elements
+        display: 'inline',
+      },
+
+      '& [data-sanity-icon]': {
+        verticalAlign: 'baseline',
+      },
+    },
+  },
+}
+
+for (const size of FONT_CODE_SIZE) {
+  _responsiveRule(primitive, `code-${size}`, {
+    '--font-size': `var(--font-code-${size}-size)`,
+    '--font-line-height': `var(--font-code-${size}-line-height)`,
+    '--font-letter-spacing': `var(--font-code-${size}-letter-spacing)`,
+    '--font-icon-size': `var(--font-code-${size}-icon-size)`,
+    '--font-ascender-height': `var(--font-code-${size}-ascender-height)`,
+    '--font-descender-height': `var(--font-code-${size}-descender-height)`,
+    // '--font-cap-height': `var(--font-code-${size}-cap-height)`,
+  })
+}
+
+export const codeStyle: Style = {layers: {primitive}}

package/src/css/primitives/code/code.ts

@@ -1,9 +1,9 @@
+import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {font} from '../../styles/font'
+import {font} from '../../aspects'
 import {CodeStyleProps} from './types'
 
 /** @public */
-export function code(props: CodeStyleProps): string {
-  return composeClassNames('code', 'block', font(props), _resp(`code`, props.size))
+export function code(props: CodeStyleProps): string | undefined {
+  return _comp('code', 'block', font(props), _resp(`code`, props.size))
 }

package/src/css/primitives/code/rules.ts

@@ -9,17 +9,37 @@ export const codeRules: Rules = {
     '--font-weight-bold': `var(--font-code-weight-bold)`,
 
     '--font-family': `var(--font-code-family)`,
+    '--font-feature-settings': `var(--font-code-feature-settings)`,
 
-    'color': 'var(--color-fg)',
+    'color': 'var(--color-code-fg)',
 
     '@nest': {
       '& > code': {
-        font: 'inherit',
+        fontFamily: 'inherit',
       },
 
+      // & code {
+      //   font-family: inherit;
+
+      //   &.refractor .token {
+      //     ${codeSyntaxHighlightingStyle}
+      //   }
+      // }
+
       '& a': {
         color: 'var(--color-link-fg)',
         textDecoration: 'none',
+        borderRadius: '1px',
+      },
+
+      '& svg': {
+        // Some popular CSS libraries change the defaults for SVG display
+        // Make sure SVGs are rendered as inline elements
+        display: 'inline',
+      },
+
+      '& [data-sanity-icon]': {
+        verticalAlign: 'baseline',
       },
     },
   },
@@ -31,6 +51,7 @@ export const codeRules: Rules = {
     '--font-icon-size': 'var(--font-code-0-icon-size)',
     '--font-ascender-height': 'var(--font-code-0-ascender-height)',
     '--font-descender-height': 'var(--font-code-0-descender-height)',
+    // '--font-cap-height': 'var(--font-code-0-cap-height)',
   }),
 
   ...responsiveRules('code-1', {
@@ -40,6 +61,7 @@ export const codeRules: Rules = {
     '--font-icon-size': 'var(--font-code-1-icon-size)',
     '--font-ascender-height': 'var(--font-code-1-ascender-height)',
     '--font-descender-height': 'var(--font-code-1-descender-height)',
+    // '--font-cap-height': 'var(--font-code-1-cap-height)',
   }),
 
   ...responsiveRules('code-2', {
@@ -49,6 +71,7 @@ export const codeRules: Rules = {
     '--font-icon-size': 'var(--font-code-2-icon-size)',
     '--font-ascender-height': 'var(--font-code-2-ascender-height)',
     '--font-descender-height': 'var(--font-code-2-descender-height)',
+    // '--font-cap-height': 'var(--font-code-2-cap-height)',
   }),
 
   ...responsiveRules('code-3', {
@@ -58,6 +81,7 @@ export const codeRules: Rules = {
     '--font-icon-size': 'var(--font-code-3-icon-size)',
     '--font-ascender-height': 'var(--font-code-3-ascender-height)',
     '--font-descender-height': 'var(--font-code-3-descender-height)',
+    // '--font-cap-height': 'var(--font-code-3-cap-height)',
   }),
 
   ...responsiveRules('code-4', {
@@ -67,5 +91,6 @@ export const codeRules: Rules = {
     '--font-icon-size': 'var(--font-code-4-icon-size)',
     '--font-ascender-height': 'var(--font-code-4-ascender-height)',
     '--font-descender-height': 'var(--font-code-4-descender-height)',
+    // '--font-cap-height': 'var(--font-code-4-cap-height)',
   }),
 }

package/src/css/primitives/code/types.ts

@@ -1,4 +1,4 @@
-import {FontStyleProps} from '@sanity/ui/css'
+import {FontStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /** @public */

package/src/css/primitives/container/container.style.ts

@@ -0,0 +1,10 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.container': {
+    margin: '0 auto',
+    width: '100%',
+  },
+}
+
+export const containerStyle: Style = {layers: {primitive}}