@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

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

@@ -0,0 +1,75 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const textRules: Rules = {
+  'text': {
+    '--font-weight-regular': `var(--font-text-weight-regular)`,
+    '--font-weight-medium': `var(--font-text-weight-medium)`,
+    '--font-weight-semibold': `var(--font-text-weight-semibold)`,
+    '--font-weight-bold': `var(--font-text-weight-bold)`,
+
+    '--font-family': `var(--font-text-family)`,
+
+    'color': 'var(--color-fg)',
+
+    '@nest': {
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+      },
+    },
+  },
+
+  'text-accent': {
+    '--fg-color': 'var(--color-accent-fg)',
+  },
+
+  'text-muted': {
+    '--fg-color': 'var(--color-muted-fg)',
+  },
+
+  ...responsiveRules('text-0', {
+    '--font-size': 'var(--font-text-0-size)',
+    '--font-line-height': 'var(--font-text-0-line-height)',
+    '--font-letter-spacing': 'var(--font-text-0-letter-spacing)',
+    '--font-icon-size': 'var(--font-text-0-icon-size)',
+    '--font-ascender-height': 'var(--font-text-0-ascender-height)',
+    '--font-descender-height': 'var(--font-text-0-descender-height)',
+  }),
+
+  ...responsiveRules('text-1', {
+    '--font-size': 'var(--font-text-1-size)',
+    '--font-line-height': 'var(--font-text-1-line-height)',
+    '--font-letter-spacing': 'var(--font-text-1-letter-spacing)',
+    '--font-icon-size': 'var(--font-text-1-icon-size)',
+    '--font-ascender-height': 'var(--font-text-1-ascender-height)',
+    '--font-descender-height': 'var(--font-text-1-descender-height)',
+  }),
+
+  ...responsiveRules('text-2', {
+    '--font-size': 'var(--font-text-2-size)',
+    '--font-line-height': 'var(--font-text-2-line-height)',
+    '--font-letter-spacing': 'var(--font-text-2-letter-spacing)',
+    '--font-icon-size': 'var(--font-text-2-icon-size)',
+    '--font-ascender-height': 'var(--font-text-2-ascender-height)',
+    '--font-descender-height': 'var(--font-text-2-descender-height)',
+  }),
+
+  ...responsiveRules('text-3', {
+    '--font-size': 'var(--font-text-3-size)',
+    '--font-line-height': 'var(--font-text-3-line-height)',
+    '--font-letter-spacing': 'var(--font-text-3-letter-spacing)',
+    '--font-icon-size': 'var(--font-text-3-icon-size)',
+    '--font-ascender-height': 'var(--font-text-3-ascender-height)',
+    '--font-descender-height': 'var(--font-text-3-descender-height)',
+  }),
+
+  ...responsiveRules('text-4', {
+    '--font-size': 'var(--font-text-4-size)',
+    '--font-line-height': 'var(--font-text-4-line-height)',
+    '--font-letter-spacing': 'var(--font-text-4-letter-spacing)',
+    '--font-icon-size': 'var(--font-text-4-icon-size)',
+    '--font-ascender-height': 'var(--font-text-4-ascender-height)',
+    '--font-descender-height': 'var(--font-text-4-descender-height)',
+  }),
+}

package/src/css/primitives/text/text.ts

@@ -0,0 +1,16 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {font} from '../../styles/font'
+import {TextStyleProps} from './types'
+
+/** @public */
+export function text(props: TextStyleProps): string {
+  return composeClassNames(
+    'text',
+    'block',
+    font(props),
+    props.accent && 'text-accent',
+    props.muted && 'text-muted',
+    _resp(`text`, props.size),
+  )
+}

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

@@ -0,0 +1,11 @@
+import {FontStyleProps} from '@sanity/ui/css'
+import {ResponsiveProp} from '../../types'
+
+export type TextSize = number
+
+/** @public */
+export interface TextStyleProps extends FontStyleProps {
+  accent?: boolean
+  muted?: boolean
+  size?: ResponsiveProp<TextSize>
+}

package/src/css/primitives/textArea/index.ts

@@ -0,0 +1 @@
+export * from './textArea'

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

@@ -0,0 +1,5 @@
+import {Rules} from '../../types'
+
+export const textAreaRules: Rules = {
+  //
+}

package/src/css/primitives/textArea/textArea.ts

@@ -0,0 +1,5 @@
+import {composeClassNames} from '../../composeClassNames'
+
+export function textArea(): string {
+  return composeClassNames('text-area')
+}

package/src/css/primitives/textInput/index.ts

@@ -0,0 +1,2 @@
+export * from './textInput'
+export * from './types'

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

@@ -0,0 +1,321 @@
+import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
+// import {_resp} from '../../_resp'
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+import {vars} from '../../vars'
+
+export const textInputRules: Rules = {
+  'text-input': {
+    '--font-family': vars.font.text.family,
+  },
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`text-input-p-${space}`.replace('.', '_'), {
+        '--padding-top': `calc(${vars.space[space]} - var(--font-ascender-height))`,
+        '--padding-right': vars.space[space],
+        '--padding-bottom': `calc(${vars.space[space]} - var(--font-descender-height))`,
+        '--padding-left': vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...FONT_TEXT_SIZE.reduce<Rules>((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`text-input-${size}`, {
+        '--font-size': vars.font.text.sizes[size].fontSize,
+        '--font-line-height': vars.font.text.sizes[size].lineHeight,
+        '--font-letter-spacing': vars.font.text.sizes[size].letterSpacing,
+        '--font-ascender-height': vars.font.text.sizes[size].ascenderHeight,
+        '--font-descender-height': vars.font.text.sizes[size].descenderHeight,
+      }),
+    }
+  }, {}),
+
+  'text-input-element': {
+    'appearance': 'none',
+    'background': 'none',
+    'border': 0,
+    'borderRadius': 0,
+    'outline': 'none',
+    'width': '100%',
+    'boxSizing': 'border-box',
+    'fontFamily': 'var(--font-family)',
+    'fontSize': 'var(--font-size)',
+    'fontWeight': 'var(--font-weight)',
+    'lineHeight': 'var(--font-line-height)',
+    'letterSpacing': 'var(--font-letter-spacing)',
+    'margin': 0,
+    'position': 'relative',
+    'zIndex': 1,
+    'display': 'block',
+    'color': 'var(--input-fg-color)',
+    'paddingTop': 'var(--padding-top)',
+    'paddingRight': 'var(--padding-right)',
+    'paddingBottom': 'var(--padding-bottom)',
+    'paddingLeft': 'var(--padding-left)',
+
+    '--input-fg-color': 'var(--color-input-default-enabled-fg)',
+
+    '@nest': {
+      // NOTE: This is a hack to disable Chrome’s autofill styles
+      '&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active':
+        {
+          WebkitTextFillColor: 'var(--input-fg-color) !important',
+          transition: 'background-color 5000s',
+          transitionDelay: '86400s', // 24h
+        },
+
+      /* &:is(textarea) */
+      // '&[data-as="textarea"]': {
+      //   resize: 'none',
+      // },
+
+      '&::placeholder': {
+        color: 'var(--input-placeholder-color)',
+      },
+
+      // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      //   /* --input-fg-color: ${color.input.default.enabled.fg}; */
+      //   /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
+      //   /* enabled */
+      //   &:not(:invalid):not(:disabled):not(:read-only) {
+      //     /* --input-fg-color: ${color.input.default.enabled.fg}; */
+      //     /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
+      //   }
+      //   /* disabled */
+      //   &:not(:invalid):disabled {
+      //     /* --input-fg-color: ${color.input.default.disabled.fg}; */
+      //     /* --input-placeholder-color: ${color.input.default.disabled.placeholder}; */
+      //   }
+      //   /* invalid */
+      //   &:invalid {
+      //     /* --input-fg-color: ${color.input.invalid.enabled.fg}; */
+      //     /* --input-placeholder-color: ${color.input.invalid.enabled.placeholder}; */
+      //   }
+      //   /* readOnly */
+      //   &:read-only {
+      //     /* --input-fg-color: ${color.input.default.readOnly.fg}; */
+      //     /* --input-placeholder-color: ${color.input.default.readOnly.placeholder}; */
+      //   }
+      // }
+    },
+  },
+
+  'text-input-prefix': {
+    'borderTopRightRadius': 0,
+    'borderBottomRightRadius': 0,
+
+    '@nest': {
+      '& > span': {
+        display: 'block',
+        margin: '-1px',
+      },
+    },
+  },
+
+  'text-input-suffix': {
+    'borderTopLeftRadius': 0,
+    'borderBottomLeftRadius': 0,
+
+    '@nest': {
+      '& > span': {
+        display: 'block',
+        margin: '-1px',
+      },
+    },
+  },
+
+  'text-input-presentation': {
+    '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
+
+    'position': 'absolute',
+    'top': 0,
+    'left': 0,
+    'right': 0,
+    'bottom': 0,
+    'display': 'block',
+    'pointerEvents': 'none',
+    'zIndex': 0,
+
+    'backgroundColor': 'var(--input-bg-color)',
+    'boxShadow': 'var(--input-box-shadow)',
+
+    '--input-border-color': 'var(--color-input-default-enabled-border)',
+
+    // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
+    // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
+    // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
+    // border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
+
+    // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+    //   --card-bg-color: ${color.input.default.enabled.bg};
+    //   --card-fg-color: ${color.input.default.enabled.fg};
+
+    //   /* enabled */
+    //   *:not(:disabled) + &[data-border] {
+    //     --input-box-shadow: ${focusRingBorderStyle({
+    //       color: color.input.default.enabled.border,
+    //       width: input.border.width,
+    //     })};
+    //   }
+
+    //   /* invalid */
+    //   *:not(:disabled):invalid + & {
+    //     --card-bg-color: ${color.input.invalid.enabled.bg};
+    //     --card-fg-color: ${color.input.invalid.enabled.fg};
+
+    //     &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.invalid.enabled.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+
+    //   /* focused */
+    //   *:not(:disabled):focus + & {
+    //     &[data-border] {
+    //       --input-box-shadow: ${$unstableDisableFocusRing
+    //         ? undefined
+    //         : focusRingStyle({
+    //             border: {color: color.input.default.enabled.border, width: input.border.width},
+    //             focusRing: input.text.focusRing,
+    //           })};
+    //     }
+
+    //     &:not([data-border]) {
+    //       --input-box-shadow: ${$unstableDisableFocusRing
+    //         ? undefined
+    //         : focusRingStyle({focusRing: input.text.focusRing})};
+    //     }
+    //   }
+
+    //   /* disabled */
+    //   *:not(:invalid):disabled + & {
+    //     --card-bg-color: ${color.input.default.disabled.bg} !important;
+    //     --card-fg-color: ${color.input.default.disabled.fg} !important;
+    //     --card-icon-color: ${color.input.default.disabled.fg} !important;
+
+    //     &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.default.disabled.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+
+    //   *:invalid:disabled + & {
+    //     --card-bg-color: ${color.input.invalid.disabled.bg} !important;
+    //     --card-fg-color: ${color.input.invalid.disabled.fg} !important;
+    //     --card-icon-color: ${color.input.invalid.disabled.fg} !important;
+
+    //     &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.invalid.disabled.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+
+    //   /* readOnly */
+    //   *:not(:invalid):read-only + & {
+    //     --card-bg-color: ${color.input.default.readOnly.bg} !important;
+    //     --card-fg-color: ${color.input.default.readOnly.fg} !important;
+    //   }
+
+    //   *:invalid:read-only + & {
+    //     --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
+    //     --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
+    //   }
+
+    //   /* hovered */
+    //   @media (hover: hover) {
+    //     *:not(:disabled):not(:read-only):not(:invalid):hover + & {
+    //       --card-bg-color: ${color.input.default.hovered.bg};
+    //       --card-fg-color: ${color.input.default.hovered.fg};
+    //     }
+
+    //     *:invalid:not(:disabled):not(:read-only):hover + & {
+    //       --card-bg-color: ${color.input.invalid.hovered.bg};
+    //       --card-fg-color: ${color.input.invalid.hovered.fg};
+    //     }
+
+    //     *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.default.hovered.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+
+    //     *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.invalid.hovered.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+    // }
+  },
+}
+
+// const Root = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
+
+// const InputRoot = styled.span`
+//   flex: 1;
+//   min-width: 0;
+//   display: block;
+//   position: relative;
+// `
+
+// const Prefix = styled(Card).attrs({forwardedAs: 'span'})`
+//   border-top-right-radius: 0;
+//   border-bottom-right-radius: 0;
+
+//   & > span {
+//     display: block;
+//     margin: -1px;
+//   }
+// `
+
+// const Suffix = styled(Card).attrs({forwardedAs: 'span'})`
+//   border-top-left-radius: 0;
+//   border-bottom-left-radius: 0;
+
+//   & > span {
+//     display: block;
+//     margin: -1px;
+//   }
+// `
+
+// const Input = styled.input<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
+//   responsiveInputPaddingStyle,
+//   textInputBaseStyle,
+//   textInputFontSizeStyle,
+// )
+
+// const Presentation = styled.span<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
+//   responsiveRadiusStyle,
+//   textInputRepresentationStyle,
+// )
+
+// const LeftBox = styled(Box)`
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+// `
+
+// const RightBox = styled(Box)`
+//   position: absolute;
+//   top: 0;
+//   right: 0;
+// `
+
+// const RightCard = styled(Card)`
+//   background-color: transparent;
+//   position: absolute;
+//   top: 0;
+//   right: 0;
+// `

package/src/css/primitives/textInput/textInput.ts

@@ -0,0 +1,15 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {TextInputStyleProps} from './types'
+
+export function textInput(props: TextInputStyleProps): string {
+  return composeClassNames(
+    'text-input',
+    _resp('text-input', props.size),
+    _resp('text-input-p', props.padding),
+  )
+}
+
+export function textInputElement(): string {
+  return composeClassNames('text-input-element')
+}

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

@@ -0,0 +1,8 @@
+import {FontTextSize, Space} from '@sanity/ui/theme'
+import {ResponsiveProp} from '../../types'
+
+/** @public */
+export interface TextInputStyleProps {
+  padding: ResponsiveProp<Space>
+  size: ResponsiveProp<FontTextSize>
+}

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

@@ -0,0 +1,45 @@
+import type {Rules} from '../../types'
+import {vars} from '../../vars'
+
+export const tokenRules: Rules = {
+  token: {
+    '@nest': {
+      '&.atrule': {color: vars.color.syntax.atrule},
+      '&.attr-name': {color: vars.color.syntax.attrName},
+      '&.attr-value': {color: vars.color.syntax.attrValue},
+      '&.attribute': {color: vars.color.syntax.attribute},
+      '&.boolean': {color: vars.color.syntax.boolean},
+      '&.builtin': {color: vars.color.syntax.builtin},
+      '&.cdata': {color: vars.color.syntax.cdata},
+      '&.char': {color: vars.color.syntax.char},
+      '&.class': {color: vars.color.syntax.class},
+      '&.class-name': {color: vars.color.syntax.className},
+      '&.comment': {color: vars.color.syntax.comment},
+      '&.constant': {color: vars.color.syntax.constant},
+      '&.deleted': {color: vars.color.syntax.deleted},
+      '&.doctype': {color: vars.color.syntax.doctype},
+      '&.entity': {color: vars.color.syntax.entity},
+      '&.function': {color: vars.color.syntax.function},
+      '&.hexcode': {color: vars.color.syntax.hexcode},
+      '&.id': {color: vars.color.syntax.id},
+      '&.important': {color: vars.color.syntax.important},
+      '&.inserted': {color: vars.color.syntax.inserted},
+      '&.keyword': {color: vars.color.syntax.keyword},
+      '&.number': {color: vars.color.syntax.number},
+      '&.operator': {color: vars.color.syntax.operator},
+      '&.prolog': {color: vars.color.syntax.prolog},
+      '&.property': {color: vars.color.syntax.property},
+      '&.pseudo-class': {color: vars.color.syntax.pseudoClass},
+      '&.pseudo-element': {color: vars.color.syntax.pseudoElement},
+      '&.punctuation': {color: vars.color.syntax.punctuation},
+      '&.regex': {color: vars.color.syntax.regex},
+      '&.selector': {color: vars.color.syntax.selector},
+      '&.string': {color: vars.color.syntax.string},
+      '&.symbol': {color: vars.color.syntax.symbol},
+      '&.tag': {color: vars.color.syntax.tag},
+      '&.unit': {color: vars.color.syntax.unit},
+      '&.url': {color: vars.color.syntax.url},
+      '&.variable': {color: vars.color.syntax.variable},
+    },
+  },
+}

package/src/css/primitives/tooltip/index.ts

@@ -0,0 +1 @@
+export * from './tooltip'

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

@@ -0,0 +1,17 @@
+import {Rules} from '../../types'
+
+export const tooltipRules: Rules = {
+  'tooltip': {
+    pointerEvents: 'none',
+  },
+
+  'tooltip-card': {
+    '@nest': {
+      '&[data-animate] > *': {
+        // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+        opacity: `var(--motion-content-opacity, 1)`,
+        willChange: 'opacity',
+      },
+    },
+  },
+}

package/src/css/primitives/tooltip/tooltip.ts

@@ -0,0 +1,9 @@
+import {composeClassNames} from '../../composeClassNames'
+
+export function tooltip(): string {
+  return composeClassNames('tooltip')
+}
+
+export function tooltipCard(): string {
+  return composeClassNames('tooltip-card')
+}

package/src/css/responsiveRules.ts

@@ -0,0 +1,25 @@
+import {type Properties, type Rules} from './types'
+
+export function responsiveRules(className: string, props: Properties): Rules {
+  return {
+    [className]: props,
+    [`_1:${className}`]: {
+      '@media': {'screen and (min-width: 360px)': props},
+    },
+    [`_2:${className}`]: {
+      '@media': {'screen and (min-width: 600px)': props},
+    },
+    [`_3:${className}`]: {
+      '@media': {'screen and (min-width: 900px)': props},
+    },
+    [`_4:${className}`]: {
+      '@media': {'screen and (min-width: 1200px)': props},
+    },
+    [`_5:${className}`]: {
+      '@media': {'screen and (min-width: 1800px)': props},
+    },
+    [`_6:${className}`]: {
+      '@media': {'screen and (min-width: 2400px)': props},
+    },
+  }
+}

package/src/css/rules.ts

@@ -0,0 +1,99 @@
+import {breadcrumbsRules} from './components/breadcrumbs/rules'
+import {dialogRules} from './components/dialog/rules'
+import {menuRules} from './components/menu/rules'
+import {skeletonRules} from './components/skeleton/rules'
+import {avatarRules} from './primitives/avatar/rules'
+import {badgeRules} from './primitives/badge/rules'
+import {boxRules} from './primitives/box/rules'
+import {buttonRules} from './primitives/button/rules'
+import {cardRules} from './primitives/card/rules'
+import {checkboxRules} from './primitives/checkbox/rules'
+import {codeRules} from './primitives/code/rules'
+import {containerRules} from './primitives/container/rules'
+import {headingRules} from './primitives/heading/rules'
+import {kbdRules} from './primitives/kbd/rules'
+import {labelRules} from './primitives/label/rules'
+import {popoverRules} from './primitives/popover/rules'
+import {radioRules} from './primitives/radio/rules'
+import {selectRules} from './primitives/select/rules'
+import {selectableRules} from './primitives/selectable/rules'
+import {spinnerRules} from './primitives/spinner/rules'
+import {switchRules} from './primitives/switch/rules'
+import {textRules} from './primitives/text/rules'
+import {textAreaRules} from './primitives/textArea/rules'
+import {textInputRules} from './primitives/textInput/rules'
+import {tokenRules} from './primitives/token/rules'
+import {tooltipRules} from './primitives/tooltip/rules'
+import {borderRules} from './styles/border/rules'
+import {displayRules} from './styles/display/rules'
+import {flexRules} from './styles/flex/rules'
+import {flexItemRules} from './styles/flexItem/rules'
+import {fontRules} from './styles/font/rules'
+import {gapRules} from './styles/gap/rules'
+import {gridRules} from './styles/grid/rules'
+import {gridItemRules} from './styles/gridItem/rules'
+import {heightRules} from './styles/height/rules'
+import {marginRules} from './styles/margin/rules'
+import {maxWidthRules} from './styles/maxWidth/rules'
+import {outlineRules} from './styles/outline/rules'
+import {overflowRules} from './styles/overflow/rules'
+import {paddingRules} from './styles/padding/rules'
+import {pointerEventsRules} from './styles/pointerEvents/rules'
+import {positionRules} from './styles/position/rules'
+import {radiusRules} from './styles/radius/rules'
+import {shadowRules} from './styles/shadow/rules'
+import {widthRules} from './styles/width/rules'
+import {type Rules} from './types'
+
+export const rules: Rules = {
+  // styles
+  ...borderRules,
+  ...displayRules,
+  ...flexItemRules,
+  ...flexRules,
+  ...fontRules,
+  ...gapRules,
+  ...gridItemRules,
+  ...gridRules,
+  ...heightRules,
+  ...marginRules,
+  ...outlineRules,
+  ...overflowRules,
+  ...paddingRules,
+  ...pointerEventsRules,
+  ...positionRules,
+  ...radiusRules,
+  ...shadowRules,
+  ...widthRules,
+
+  // primitives
+  ...avatarRules,
+  ...badgeRules,
+  ...boxRules,
+  ...buttonRules,
+  ...cardRules,
+  ...checkboxRules,
+  ...codeRules,
+  ...containerRules,
+  ...headingRules,
+  ...kbdRules,
+  ...labelRules,
+  ...maxWidthRules,
+  ...popoverRules,
+  ...radioRules,
+  ...selectRules,
+  ...selectableRules,
+  ...spinnerRules,
+  ...switchRules,
+  ...textAreaRules,
+  ...textInputRules,
+  ...textRules,
+  ...tokenRules,
+  ...tooltipRules,
+
+  // components
+  ...breadcrumbsRules,
+  ...dialogRules,
+  ...menuRules,
+  ...skeletonRules,
+}