@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

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

@@ -1,164 +0,0 @@
-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)`,
-    '--font-feature-settings': `var(--font-text-feature-settings)`,
-
-    'color': 'var(--color-fg)',
-
-    '@nest': {
-      '& a': {
-        color: 'var(--color-link-fg)',
-        textDecoration: 'none',
-      },
-
-      '& a:hover': {
-        color: 'var(--color-fg)',
-      },
-
-      // '& svg': {
-      //   color: 'var(--color-icon)',
-      // },
-    },
-  },
-
-  // 'text-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-
-  'text-muted': {
-    color: 'var(--color-muted-fg)',
-    // '--color-fg': 'var(--color-tinted-default-fg-4)',
-  },
-
-  ...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)',
-    // '--font-cap-height': 'var(--font-text-0-cap-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)',
-    // '--font-cap-height': 'var(--font-text-1-cap-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)',
-    // '--font-cap-height': 'var(--font-text-2-cap-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)',
-    // '--font-cap-height': 'var(--font-text-3-cap-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)',
-    // '--font-cap-height': 'var(--font-text-4-cap-height)',
-  }),
-}
-
-// import {getTheme_v2} from '@sanity/ui/theme'
-// import {ThemeProps} from '../../_compat'
-// import {css} from '../../lib/styled'
-
-// export function textBaseStyle(
-//   props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
-// ): ReturnType<typeof css> {
-//   const {$accent, $muted} = props
-//   const {font} = getTheme_v2(props.theme)
-
-//   return css`
-//     color: var(--card-fg-color);
-
-//     ${$accent &&
-//     css`
-//       color: var(--card-accent-fg-color);
-//     `}
-
-//     ${$muted &&
-//     css`
-//       color: var(--card-muted-fg-color);
-//     `}
-
-//     & code {
-//       font-family: ${font.code.family};
-//       border-radius: 1px;
-//       background-color: var(--card-code-bg-color);
-//       color: var(--card-code-fg-color);
-//     }
-
-//     & a {
-//       text-decoration: none;
-//       border-radius: 1px;
-//       color: var(--card-link-color);
-//       outline: none;
-
-//       @media (hover: hover) {
-//         &:hover {
-//           text-decoration: underline;
-//         }
-//       }
-
-//       &:focus {
-//         box-shadow:
-//           0 0 0 1px var(--card-bg-color),
-//           0 0 0 3px var(--card-focus-ring-color);
-//       }
-
-//       &:focus:not(:focus-visible) {
-//         box-shadow: none;
-//       }
-//     }
-
-//     & strong {
-//       font-weight: ${font.text.weights.bold};
-//     }
-
-//     & svg {
-//       /* Certain popular CSS libraries changes the defaults for SVG display */
-//       /* Make sure SVGs are rendered as inline elements */
-//       display: inline;
-//     }
-
-//     & [data-sanity-icon] {
-//       vertical-align: baseline;
-//       color: var(--card-icon-color);
-
-//       & path {
-//         vector-effect: non-scaling-stroke !important;
-//       }
-//     }
-//   `
-// }

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

@@ -1,56 +0,0 @@
-import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.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)`,
-    '--font-feature-settings': `var(--font-text-feature-settings)`,
-
-    'color': 'var(--color-fg)',
-
-    '@nest': {
-      '& a': {
-        color: 'var(--color-link-fg)',
-        textDecoration: 'none',
-      },
-
-      '& a:hover': {
-        color: 'var(--color-fg)',
-      },
-
-      // '& svg': {
-      //   color: 'var(--color-icon)',
-      // },
-    },
-  },
-
-  // 'text-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-
-  '.text-muted': {
-    color: 'var(--color-muted-fg)',
-    // '--color-fg': 'var(--color-tinted-default-fg-4)',
-  },
-}
-
-for (const size of FONT_TEXT_SIZE) {
-  _responsiveRule(primitive, `text-${size}`, {
-    '--font-size': `var(--font-text-${size}-size)`,
-    '--font-line-height': `var(--font-text-${size}-line-height)`,
-    '--font-letter-spacing': `var(--font-text-${size}-letter-spacing)`,
-    '--font-icon-size': `var(--font-text-${size}-icon-size)`,
-    '--font-ascender-height': `var(--font-text-${size}-ascender-height)`,
-    '--font-descender-height': `var(--font-text-${size}-descender-height)`,
-    // '--font-cap-height': `var(--font-text-${size}-cap-height)`,
-  })
-}
-
-export const textStyle: Style = {layers: {primitive}}

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

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

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

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

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

@@ -1,9 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.text-area': {
-    // todo
-  },
-}
-
-export const textAreaStyle: Style = {layers: {primitive}}

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

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

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

@@ -1,224 +0,0 @@
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const textInputRules: Rules = {
-  'text-input': {
-    '--font-family': vars.font.text.family,
-
-    '@nest': {
-      '& > span': {
-        borderRadius: 'inherit',
-      },
-    },
-  },
-
-  'text-input-prefix': {
-    'borderTop': '1px solid var(--color-border)',
-    'borderLeft': '1px solid var(--color-border)',
-    'borderBottom': '1px solid var(--color-border)',
-    'borderTopRightRadius': '0 !important',
-    'borderBottomRightRadius': '0 !important',
-
-    '@nest': {
-      '& > span': {
-        display: 'block',
-        margin: '-1px',
-      },
-    },
-  },
-
-  'text-input-suffix': {
-    'borderTop': '1px solid var(--color-border)',
-    'borderRight': '1px solid var(--color-border)',
-    'borderBottom': '1px solid var(--color-border)',
-    'borderTopLeftRadius': '0 !important',
-    'borderBottomLeftRadius': '0 !important',
-
-    '@nest': {
-      '& > span': {
-        display: 'block',
-        margin: '-1px',
-      },
-    },
-  },
-
-  'text-input-presentation': {
-    // 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)',
-    // '--input-border-color': 'var(--color-tinted-default-border-1)',
-    // '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
-    // 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};
-    // '@nest': {
-    //   'input:hover + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    //   'input:focus + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    // },
-    // &[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.style.ts

@@ -1,167 +0,0 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const primitive: StyleRules = {
-  '.text-input': {
-    '--font-family': vars.font.text.family,
-
-    '@nest': {
-      '& > span': {
-        borderRadius: 'inherit',
-      },
-    },
-  },
-
-  '.text-input-prefix': {
-    'borderTop': '1px solid var(--color-border)',
-    'borderLeft': '1px solid var(--color-border)',
-    'borderBottom': '1px solid var(--color-border)',
-    'borderTopRightRadius': '0 !important',
-    'borderBottomRightRadius': '0 !important',
-
-    '@nest': {
-      '& > span': {
-        display: 'block',
-        margin: '-1px',
-      },
-    },
-  },
-
-  '.text-input-suffix': {
-    'borderTop': '1px solid var(--color-border)',
-    'borderRight': '1px solid var(--color-border)',
-    'borderBottom': '1px solid var(--color-border)',
-    'borderTopLeftRadius': '0 !important',
-    'borderBottomLeftRadius': '0 !important',
-
-    '@nest': {
-      '& > span': {
-        display: 'block',
-        margin: '-1px',
-      },
-    },
-  },
-
-  '.text-input-presentation': {
-    // 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)',
-    // '--input-border-color': 'var(--color-tinted-default-border-1)',
-    // '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
-    // 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};
-    // '@nest': {
-    //   'input:hover + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    //   'input:focus + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    // },
-    // &[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,
-    //       })};
-    //     }
-    //   }
-    // }
-  },
-}
-
-export const textInputStyle: Style = {layers: {primitive}}

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

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