@semcore/typography 17.2.1-prerelease.9 → 18.0.0-prerelease.0

package/lib/es6/components/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["Ellipsis","Hint","Box","Root","sstyled","Component","createComponent","resolveColorEnhance","React","styles","_sstyled","insert","TextRoot","constructor","props","_defineProperty","createRef","isEllipsized","handleEllipsized","bind","componentDidMount","initEllipsis","componentDidUpdate","prevProps","ellipsisKeys","hasChanges","some","key","asProps","ellipsis","cleanUpEllipsis","componentWillUnmount","render","_ref","_ref2","SText","color","underline","lineThrough","hint","hintProps","children","ellipsisProps","resolveColor","state","cropPosition","withHint","maxLineValue","maxLine","undefined","createElement","Fragment","cn","_assignProps","innerRef","getTextDecoration","Boolean","setState","shouldInit","current","on","off","cleanUp","Text"],"sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { NSEllipsis } from '@semcore/base-components';\nimport { Ellipsis, Hint, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { Root, sstyled, Component, createComponent } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport type { NSText } from './Text.type';\nimport styles from '../../style/text.shadow.css';\n\ntype State = {\n  isEllipsized: boolean;\n};\n\nclass TextRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSText.Component>,\n  typeof TextRoot.enhance,\n  {},\n  {},\n  State\n> {\n  private ellipsis: Ellipsis | null = null;\n  private innerRef = React.createRef<HTMLElement | null>();\n\n  static enhance = [resolveColorEnhance()] as const;\n  static styles = styles;\n  static displayName = 'Text';\n\n  state = {\n    isEllipsized: false,\n  };\n\n  constructor(props: NSText.Props) {\n    super(props);\n\n    this.handleEllipsized = this.handleEllipsized.bind(this);\n  }\n\n  componentDidMount(): void {\n    this.initEllipsis();\n  }\n\n  componentDidUpdate(prevProps: NSText.EllipsisProps) {\n    const ellipsisKeys: Array<keyof NSEllipsis.Settings> = [\n      'cropPosition',\n      'maxLine',\n      'lastRequiredSymbols',\n      'containerElement',\n      'recalculateContainerWidth',\n      'observeChildrenMutations',\n    ];\n\n    const hasChanges = ellipsisKeys.some((key) => {\n      return prevProps[`ellipsis:${key}`] !== this.asProps[`ellipsis:${key}`];\n    });\n\n    if (prevProps.ellipsis !== this.asProps.ellipsis || hasChanges) {\n      this.cleanUpEllipsis();\n\n      this.initEllipsis();\n    }\n  }\n\n  componentWillUnmount() {\n    this.cleanUpEllipsis();\n  }\n\n  render(): React.ReactNode {\n    const SText = Root;\n    const { color, underline, lineThrough, hint, hintProps, children, ellipsis, ellipsisProps, resolveColor } =\n      this.asProps;\n    const { isEllipsized } = this.state;\n\n    const cropPosition = ellipsisProps?.cropPosition ?? 'end';\n    let withHint = hint !== false;\n\n    const maxLineValue = ellipsisProps?.maxLine;\n    if (hint !== true && hintProps === undefined && maxLineValue !== undefined && maxLineValue > 1) {\n      withHint = false;\n    }\n\n    return sstyled(styles)(\n      <>\n        <SText\n          render={Box}\n          tag='span'\n          data-ui-name='Text'\n          ref={this.innerRef}\n          use:decoration={this.getTextDecoration(underline, lineThrough)}\n          textColor={resolveColor(color)}\n          use:ellipsis={ellipsis !== undefined ? ellipsis : Boolean(ellipsisProps)}\n          isEllipsized={isEllipsized}\n          maxLine={maxLineValue}\n          trim={cropPosition}\n          use:color={undefined}\n        />\n        {isEllipsized && withHint && (\n          <Hint triggerRef={this.innerRef} {...hintProps}>\n            {children}\n          </Hint>\n        )}\n      </>,\n    );\n  }\n\n  private handleEllipsized(isEllipsized: boolean) {\n    this.setState({ isEllipsized: isEllipsized });\n  }\n\n  private initEllipsis() {\n    const { ellipsis, ellipsisProps, hint } = this.asProps;\n    const shouldInit = hint !== false || ellipsisProps?.cropPosition === 'middle';\n\n    if (shouldInit && (ellipsis || ellipsisProps) && this.innerRef.current) {\n      this.ellipsis =\n        ellipsis instanceof Ellipsis ? ellipsis : new Ellipsis(this.innerRef.current, ellipsisProps ?? {});\n\n      this.ellipsis.on('isEllipsized', this.handleEllipsized);\n    }\n  }\n\n  private cleanUpEllipsis() {\n    this.ellipsis?.off('isEllipsized', this.handleEllipsized);\n    this.ellipsis?.cleanUp();\n    this.setState({ isEllipsized: false });\n  }\n\n  private getTextDecoration(underline?: boolean, lineThrough?: boolean) {\n    if (underline) {\n      return 'underline';\n    }\n\n    if (lineThrough) {\n      return 'line-through';\n    }\n  }\n}\n\n/**\n * Text\n *\n * {@link https://developer.semrush.com/intergalactic/style/typography/typography-api#text|API} | {@link https://developer.semrush.com/intergalactic/style/typography/typography-code|Examples}\n */\nconst Text = createComponent<\n  NSText.Component,\n  typeof TextRoot\n>(TextRoot);\n\nexport default Text;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Text.js","names":["Ellipsis","Hint","Box","Root","sstyled","Component","createComponent","resolveColorEnhance","React","styles","_sstyled","insert","TextRoot","constructor","props","_defineProperty","createRef","isEllipsized","handleEllipsized","bind","componentDidMount","initEllipsis","componentDidUpdate","prevProps","ellipsisKeys","hasChanges","some","key","asProps","ellipsis","cleanUpEllipsis","componentWillUnmount","render","_ref","_ref2","SText","color","underline","lineThrough","hint","hintProps","children","ellipsisProps","resolveColor","state","cropPosition","withHint","maxLineValue","maxLine","undefined","createElement","Fragment","cn","_assignProps","innerRef","getTextDecoration","Boolean","setState","shouldInit","current","on","off","cleanUp","Text"],"sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { NSEllipsis } from '@semcore/base-components';\nimport { Ellipsis, Hint, Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { Root, sstyled, Component, createComponent } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport type { NSText } from './Text.type';\nimport styles from '../../style/text.shadow.css';\n\ntype State = {\n  isEllipsized: boolean;\n};\n\nclass TextRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSText.Component>,\n  typeof TextRoot.enhance,\n  {},\n  {},\n  State\n> {\n  private ellipsis: Ellipsis | null = null;\n  private innerRef = React.createRef<HTMLElement | null>();\n\n  static enhance = [resolveColorEnhance()] as const;\n  static styles = styles;\n  static displayName = 'Text';\n\n  state = {\n    isEllipsized: false,\n  };\n\n  constructor(props: NSText.Props) {\n    super(props);\n\n    this.handleEllipsized = this.handleEllipsized.bind(this);\n  }\n\n  componentDidMount(): void {\n    this.initEllipsis();\n  }\n\n  componentDidUpdate(prevProps: NSText.EllipsisProps) {\n    const ellipsisKeys: Array<keyof NSEllipsis.Settings> = [\n      'cropPosition',\n      'maxLine',\n      'lastRequiredSymbols',\n      'containerElement',\n      'recalculateContainerWidth',\n      'observeChildrenMutations',\n    ];\n\n    const hasChanges = ellipsisKeys.some((key) => {\n      return prevProps[`ellipsis:${key}`] !== this.asProps[`ellipsis:${key}`];\n    });\n\n    if (prevProps.ellipsis !== this.asProps.ellipsis || hasChanges) {\n      this.cleanUpEllipsis();\n\n      this.initEllipsis();\n    }\n  }\n\n  componentWillUnmount() {\n    this.cleanUpEllipsis();\n  }\n\n  render(): React.ReactNode {\n    const SText = Root;\n    const { color, underline, lineThrough, hint, hintProps, children, ellipsis, ellipsisProps, resolveColor } =\n      this.asProps;\n    const { isEllipsized } = this.state;\n\n    const cropPosition = ellipsisProps?.cropPosition ?? 'end';\n    let withHint = hint !== false;\n\n    const maxLineValue = ellipsisProps?.maxLine;\n    if (hint !== true && hintProps === undefined && maxLineValue !== undefined && maxLineValue > 1) {\n      withHint = false;\n    }\n\n    return sstyled(styles)(\n      <>\n        <SText\n          render={Box}\n          tag='span'\n          data-ui-name='Text'\n          ref={this.innerRef}\n          use:decoration={this.getTextDecoration(underline, lineThrough)}\n          textColor={resolveColor(color)}\n          use:ellipsis={ellipsis !== undefined ? ellipsis : Boolean(ellipsisProps)}\n          isEllipsized={isEllipsized}\n          maxLine={maxLineValue}\n          trim={cropPosition}\n          use:color={undefined}\n        />\n        {isEllipsized && withHint && (\n          <Hint triggerRef={this.innerRef} {...hintProps}>\n            {children}\n          </Hint>\n        )}\n      </>,\n    );\n  }\n\n  private handleEllipsized(isEllipsized: boolean) {\n    this.setState({ isEllipsized: isEllipsized });\n  }\n\n  private initEllipsis() {\n    const { ellipsis, ellipsisProps, hint } = this.asProps;\n    const shouldInit = hint !== false || ellipsisProps?.cropPosition === 'middle';\n\n    if (shouldInit && (ellipsis || ellipsisProps) && this.innerRef.current) {\n      this.ellipsis =\n        ellipsis instanceof Ellipsis ? ellipsis : new Ellipsis(this.innerRef.current, ellipsisProps ?? {});\n\n      this.ellipsis.on('isEllipsized', this.handleEllipsized);\n    }\n  }\n\n  private cleanUpEllipsis() {\n    this.ellipsis?.off('isEllipsized', this.handleEllipsized);\n    this.ellipsis?.cleanUp();\n    this.setState({ isEllipsized: false });\n  }\n\n  private getTextDecoration(underline?: boolean, lineThrough?: boolean) {\n    if (underline) {\n      return 'underline';\n    }\n\n    if (lineThrough) {\n      return 'line-through';\n    }\n  }\n}\n\n/**\n * Text\n *\n * {@link https://developer.semrush.com/intergalactic/style/typography/typography-api#text|API} | {@link https://developer.semrush.com/intergalactic/style/typography/typography-code|Examples}\n */\nconst Text = createComponent<\n  NSText.Component,\n  typeof TextRoot\n>(TextRoot);\n\nexport default Text;\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/components/Text/Text.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.type.js","names":[],"sources":["../../../../src/components/Text/Text.type.ts"],"sourcesContent":["import type {\n  NSBox,\n  NSEllipsis,\n  NSHint,\n  Ellipsis as EllipsisInstance,\n} from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type { Property } from 'csstype';\n\ndeclare namespace NSText {\n  type BaseProps = {\n    /** Font size and line-heights */\n    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;\n    /**\n     * The text will not be wrapped on a new line and will be cut off with ellipsis\n     * @deprecated use ellipsis prop instead\n     **/\n    noWrap?: boolean;\n    /** CSS property `font-weight: 700;` */\n    bold?: boolean;\n    /** CSS property `font-weight: 600;` */\n    semibold?: boolean;\n    /** CSS property `font-weight: 500;` */\n    medium?: boolean;\n    /** Italicized text */\n    italic?: boolean;\n    /** Underlined text */\n    underline?: boolean;\n    /** CSS property `font-family: monospace;` */\n    monospace?: boolean;\n    /** Strikethrough text */\n    lineThrough?: boolean;\n    /** Uppercase text */\n    uppercase?: boolean;\n    /** Lowercase text */\n    lowercase?: boolean;\n    /** Capitalized text */\n    capitalize?: boolean;\n    /** Text color **/\n    color?: string;\n    /** Custom `font-size` */\n    fontSize?: Property.FontSize<any>;\n    /** Custom `line-height` */\n    lineHeight?: Property.LineHeight<any>;\n    /** Custom `font-weight` */\n    fontWeight?: Property.FontWeight;\n    /** Text alignment */\n    textAlign?: Property.TextAlign;\n    /** Enforces text color */\n    use?: 'primary' | 'secondary';\n    /** Makes text semi-transparent to indicate disabled state */\n    disabled?: boolean;\n  };\n\n  type HintProps = {\n    /** Manually enabled/disabled Hint */\n    hint?: boolean;\n  } & {\n    /** Settings for a hint with full text (cropped by ellipsis) */\n    [K in keyof NSHint.Props as `hint:${string & K}`]?: NSHint.Props[K];\n  };\n\n  type EllipsisProps = {\n    /** Manually enabled/disabled Ellipsis or provide an instance of it. */\n    ellipsis?: boolean | EllipsisInstance;\n  } & {\n    /** Settings for an Ellipsis */\n    [K in keyof NSEllipsis.Settings as `ellipsis:${string & K}`]?: NSEllipsis.Settings[K];\n  };\n\n  type Props = NSBox.Props & NSText.BaseProps &\n    (\n      | {\n        /** Enable formatting/styling for all nested HTML tags with our default styles for them */\n        formatTags?: boolean;\n        ellipsis?: never;\n        ellipsisProps?: never;\n        hint?: never;\n        hintProps?: never;\n      }\n      | ({\n        formatTags?: never;\n      } & NSText.HintProps & NSText.EllipsisProps)\n    );\n\n  type Component = Intergalactic.Component<'span', Props>;\n}\n\n/** @deprecated It will be removed in v19. */\nexport type TextHintProps = NSText.HintProps;\n/** @deprecated It will be removed in v19. */\nexport type TextEllipsisProps = NSText.EllipsisProps;\n/** @deprecated It will be removed in v19. */\nexport type BaseTextProps = NSText.BaseProps;\n/** @deprecated It will be removed in v19. */\nexport type TextProps = NSText.Props;\n/** @deprecated It will be removed in v19. */\nexport type TextComponent = NSText.Component;\n\nexport type { NSText };\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"Text.type.js","names":[],"sources":["../../../../src/components/Text/Text.type.ts"],"sourcesContent":["import type {\n  NSBox,\n  NSEllipsis,\n  NSHint,\n  Ellipsis as EllipsisInstance,\n} from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type { Property } from 'csstype';\n\ndeclare namespace NSText {\n  type BaseProps = {\n    /** Font size and line-heights */\n    size?: 100 | 200 | 300 | 350 | 400 | 500 | 600 | 700 | 800;\n    /**\n     * The text will not be wrapped on a new line and will be cut off with ellipsis\n     * @deprecated use ellipsis prop instead\n     **/\n    noWrap?: boolean;\n    /** CSS property `font-weight: 700;` */\n    bold?: boolean;\n    /** CSS property `font-weight: 600;` */\n    semibold?: boolean;\n    /** CSS property `font-weight: 500;` */\n    medium?: boolean;\n    /** Italicized text */\n    italic?: boolean;\n    /** Underlined text */\n    underline?: boolean;\n    /** CSS property `font-family: monospace;` */\n    monospace?: boolean;\n    /** Strikethrough text */\n    lineThrough?: boolean;\n    /** Uppercase text */\n    uppercase?: boolean;\n    /** Lowercase text */\n    lowercase?: boolean;\n    /** Capitalized text */\n    capitalize?: boolean;\n    /** Text color **/\n    color?: string;\n    /** Custom `font-size` */\n    fontSize?: Property.FontSize<any>;\n    /** Custom `line-height` */\n    lineHeight?: Property.LineHeight<any>;\n    /** Custom `font-weight` */\n    fontWeight?: Property.FontWeight;\n    /** Text alignment */\n    textAlign?: Property.TextAlign;\n    /** Enforces text color */\n    use?: 'primary' | 'secondary';\n    /** Makes text semi-transparent to indicate disabled state */\n    disabled?: boolean;\n  };\n\n  type HintProps = {\n    /** Manually enabled/disabled Hint */\n    hint?: boolean;\n  } & {\n    /** Settings for a hint with full text (cropped by ellipsis) */\n    [K in keyof NSHint.Props as `hint:${string & K}`]?: NSHint.Props[K];\n  };\n\n  type EllipsisProps = {\n    /** Manually enabled/disabled Ellipsis or provide an instance of it. */\n    ellipsis?: boolean | EllipsisInstance;\n  } & {\n    /** Settings for an Ellipsis */\n    [K in keyof NSEllipsis.Settings as `ellipsis:${string & K}`]?: NSEllipsis.Settings[K];\n  };\n\n  type Props = NSBox.Props & NSText.BaseProps &\n    (\n      | {\n        /** Enable formatting/styling for all nested HTML tags with our default styles for them */\n        formatTags?: boolean;\n        ellipsis?: never;\n        ellipsisProps?: never;\n        hint?: never;\n        hintProps?: never;\n      }\n      | ({\n        formatTags?: never;\n      } & NSText.HintProps & NSText.EllipsisProps)\n    );\n\n  type Component = Intergalactic.Component<'span', Props>;\n}\n\n/** @deprecated It will be removed in v19. */\nexport type TextHintProps = NSText.HintProps;\n/** @deprecated It will be removed in v19. */\nexport type TextEllipsisProps = NSText.EllipsisProps;\n/** @deprecated It will be removed in v19. */\nexport type BaseTextProps = NSText.BaseProps;\n/** @deprecated It will be removed in v19. */\nexport type TextProps = NSText.Props;\n/** @deprecated It will be removed in v19. */\nexport type TextComponent = NSText.Component;\n\nexport type { NSText };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/style/blockquote.shadow.css

@@ -3,26 +3,26 @@ SBlockquote {
   display: flex;
   font-style: italic;
   font-size: var(--intergalactic-fs-400, 20px);
-  line-height: var(--intergalactic-lh-400, 120%);
+  line-height: var(--intergalactic-lh-400, 1.2);
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 }
 
 SDoubleQuotation {
   position: relative;
-  margin-right: var(--intergalactic-spacing-5x, 20px);
+  margin-right: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
   font-family: 'Times New Roman', serif;
   font-style: normal;
   /* disable-tokens-validator */
   font-size: 68px;
   line-height: 52px;
-  color: var(--intergalactic-text-large-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  color: var(--intergalactic-text-large-secondary, oklch(0.097 0.023 156.5 / 0.468));
 }
 
 SAuthor {
   display: block;
-  margin-top: var(--intergalactic-spacing-4x, 16px);
-  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  margin-top: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
+  color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
   font-style: normal;
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 }

package/lib/es6/style/list.shadow.css

@@ -10,7 +10,7 @@ SContent {
 }
 
 SList SList {
-  margin-top: var(--intergalactic-spacing-2x, 8px);
+  margin-top: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SItem {
@@ -18,11 +18,11 @@ SItem {
 }
 
 SItem + SItem {
-  margin-top: var(--intergalactic-spacing-2x, 8px);
+  margin-top: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SMarker {
-  margin-right: var(--intergalactic-spacing-2x, 8px);
-  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   line-height: normal;
 }

package/lib/es6/style/text.shadow.css

@@ -5,15 +5,15 @@ SText {
   &[formatTags] {
 
     & abbr {
-      color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
-      text-decoration: underline dashed var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+      color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
+      text-decoration: underline dashed var(--intergalactic-text-hint, oklch(0.097 0.023 156.5 / 0.468));
 
       &:active,
       &:hover,
       &:focus {
         outline: none;
-        color: var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
-        text-decoration: underline dashed var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
+        color: var(--intergalactic-text-hint-hover-active, oklch(0.095 0.024 154.8 / 0.492));
+        text-decoration: underline dashed var(--intergalactic-text-hint-hover-active, oklch(0.095 0.024 154.8 / 0.492));
       }
     }
 
@@ -22,7 +22,7 @@ SText {
       background: none;
       outline: none;
       text-decoration: none;
-      color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
+      color: var(--intergalactic-text-link-primary, oklch(0.1 0.03 137 / 0.899));
       border-bottom-width: 1px;
       border-bottom-style: solid;
       border-color: transparent;
@@ -31,8 +31,8 @@ SText {
       &:hover {
         outline: none;
         text-decoration: none;
-        color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
-        border-color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
+        color: var(--intergalactic-text-link-primary-hover-active, oklch(0.1 0.03 137 / 0.899));
+        border-color: var(--intergalactic-text-link-primary-hover-active, oklch(0.1 0.03 137 / 0.899));
       }
 
       &:focus {
@@ -50,7 +50,7 @@ SText {
       /* disable-tokens-validator */
       padding-left: 51px;
       font-size: var(--intergalactic-fs-400, 20px);
-      line-height: var(--intergalactic-lh-400, 120%);
+      line-height: var(--intergalactic-lh-400, 1.2);
       font-style: italic;
 
       &:before {
@@ -58,7 +58,7 @@ SText {
         display: inline-block;
         position: absolute;
         left: 0;
-        color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
+        color: var(--intergalactic-icon-secondary-neutral, oklch(0.118 0.023 170.1 / 0.262));
         font-family: Georgia, Times, 'Times New Roman', serif;
       }
 
@@ -66,15 +66,15 @@ SText {
         display: block;
         font-style: normal;
         margin-top: var(--intergalactic-spacing-4x, 16px);
-        color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+        color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
         font-size: var(--intergalactic-fs-300, 16px);
-        line-height: var(--intergalactic-lh-300, 150%);
+        line-height: var(--intergalactic-lh-300, 1.5);
       }
     }
 
     & ol:not(ol[start], ol[reversed], ol[type]),
     & ul:not(ul[start], ul[reversed], ul[type]) {
-      margin: var(--intergalactic-spacing-2x, 8px) 0;
+      margin: var(--intergalactic-spacing-content-gap-large, 8px) 0;
       padding: 0;
       list-style: none;
       position: relative;
@@ -83,12 +83,12 @@ SText {
         &:before {
           position: absolute;
           left: 0;
-          color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+          color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
         }
       }
 
       & li:not(SText) + li:not(SText) {
-        margin: var(--intergalactic-spacing-2x, 8px) 0 0 0;
+        margin: var(--intergalactic-spacing-content-gap-large, 8px) 0 0 0;
       }
     }
 
@@ -108,14 +108,14 @@ SText {
 
     & ol:not(ol[start], ol[reversed], ol[type]):has(+ p),
     & ul:not(ul[start], ul[reversed], ul[type]):has(+ p) {
-      margin-bottom: var(--intergalactic-spacing-4x, 16px);
+      margin-bottom: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
     }
 
     & h1 {
       font-size: var(--intergalactic-fs-800, 48px);
-      line-height: var(--intergalactic-lh-800, 117%);
+      line-height: var(--intergalactic-lh-800, 1.16667);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -124,9 +124,9 @@ SText {
 
     & h2 {
       font-size: var(--intergalactic-fs-700, 36px);
-      line-height: var(--intergalactic-lh-700, 110%);
+      line-height: var(--intergalactic-lh-700, 1.1112);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge, 16px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -135,9 +135,9 @@ SText {
 
     & h3 {
       font-size: var(--intergalactic-fs-600, 32px);
-      line-height: var(--intergalactic-lh-600, 125%);
+      line-height: var(--intergalactic-lh-600, 1.25);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xlarge, 12px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -146,9 +146,9 @@ SText {
 
     & h4 {
       font-size: var(--intergalactic-fs-500, 24px);
-      line-height: var(--intergalactic-lh-500, 117%);
+      line-height: var(--intergalactic-lh-500, 1.1667);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-3x, 12px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xlarge, 12px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -157,9 +157,9 @@ SText {
 
     & h5 {
       font-size: var(--intergalactic-fs-400, 20px);
-      line-height: var(--intergalactic-lh-400, 120%);
+      line-height: var(--intergalactic-lh-400, 1.2);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-2x, 8px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-large, 8px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -168,9 +168,9 @@ SText {
 
     & h6 {
       font-size: var(--intergalactic-fs-300, 16px);
-      line-height: var(--intergalactic-lh-300, 150%);
+      line-height: var(--intergalactic-lh-300, 1.5);
       font-weight: var(--intergalactic-bold, 700);
-      margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-small, 4px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -184,7 +184,7 @@ SText {
     & h5,
     & h6 {
       & small {
-        color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+        color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
         font-weight: 300;
         font-size: 100%;
       }
@@ -193,11 +193,11 @@ SText {
     & p,
     & li {
       font-size: var(--intergalactic-fs-200, 14px);
-      line-height: var(--intergalactic-lh-200, 142%);
+      line-height: var(--intergalactic-lh-200, 1.4286);
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge, 16px) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -205,15 +205,15 @@ SText {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-gap-xxlarge, 16px) + var(--intergalactic-spacing-content-gap-xsmall, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-gap-xxxlarge, 24px) + var(--intergalactic-spacing-content-gap-xsmall, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-medium, 12px));
     }
 
     & ul li:before {
@@ -221,8 +221,8 @@ SText {
       height: 4px;
       border-radius: 50%;
       /* disable-tokens-validator */
-      margin-top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-      margin-left: var(--intergalactic-spacing-05x, 2px);
+      margin-top: calc(var(--intergalactic-spacing-content-gap-large, 8px) - 1px);
+      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
     }
   }
 }
@@ -254,17 +254,17 @@ SText[ellipsis] {
 
 SText[size='100'] {
   font-size: var(--intergalactic-fs-100, 12px);
-  line-height: var(--intergalactic-lh-100, 133%);
+  line-height: var(--intergalactic-lh-100, 1.3334);
 
   &[formatTags] {
     & p,
     & li {
       font-size: var(--intergalactic-fs-100, 12px);
-      line-height: var(--intergalactic-lh-100, 133%);
+      line-height: var(--intergalactic-lh-100, 1.3334);
     }
 
     & p {
-      margin: 0 0 calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px)) 0;
+      margin: 0 0 calc(var(--intergalactic-spacing-content-gap-xxlarge, 16px) + var(--intergalactic-spacing-content-gap-xsmall, 2px)) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -272,40 +272,40 @@ SText[size='100'] {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-small, 8px));
     }
 
     & ul li:before {
       width: 3px;
       height: 3px;
       border-radius: 50%;
-      margin-top: var(--intergalactic-spacing-2x, 8px);
-      margin-left: var(--intergalactic-spacing-05x, 2px);
+      margin-top: var(--intergalactic-spacing-content-gap-large, 8px);
+      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
     }
   }
 }
 
 SText[size='200'] {
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 
   &[formatTags] {
     & p,
     & li {
       font-size: var(--intergalactic-fs-200, 14px);
-      line-height: var(--intergalactic-lh-200, 142%);
+      line-height: var(--intergalactic-lh-200, 1.4286);
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-3x, 12px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xlarge, 12px) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -313,15 +313,15 @@ SText[size='200'] {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-medium, 12px));
     }
 
     & ul li:before {
@@ -329,25 +329,25 @@ SText[size='200'] {
       height: 4px;
       border-radius: 50%;
       /* disable-tokens-validator */
-      margin-top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-      margin-left: var(--intergalactic-spacing-05x, 2px);
+      margin-top: calc(var(--intergalactic-spacing-content-gap-large, 8px) - 1px);
+      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
     }
   }
 }
 
 SText[size='300'] {
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 
   &[formatTags] {
     & p,
     & li {
       font-size: var(--intergalactic-fs-300, 16px);
-      line-height: var(--intergalactic-lh-300, 150%);
+      line-height: var(--intergalactic-lh-300, 1.5);
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge, 16px) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -355,50 +355,55 @@ SText[size='300'] {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-medium, 12px));
     }
 
     & ul li:before {
       width: 5px;
       height: 5px;
       border-radius: 50%;
-      margin-top: calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px));
-      margin-left: var(--intergalactic-spacing-05x, 2px);
+      margin-top: calc(var(--intergalactic-spacing-content-gap-large, 8px) + var(--intergalactic-spacing-content-gap-xsmall, 2px));
+      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
     }
   }
 }
 
+SText[size='350'] {
+  font-size: var(--intergalactic-fs-350, 18px);
+  line-height: var(--intergalactic-lh-350, 1.3334);
+}
+
 SText[size='400'] {
   font-size: var(--intergalactic-fs-400, 20px);
-  line-height: var(--intergalactic-lh-400, 120%);
+  line-height: var(--intergalactic-lh-400, 1.2);
 }
 
 SText[size='500'] {
   font-size: var(--intergalactic-fs-500, 24px);
-  line-height: var(--intergalactic-lh-500, 117%);
+  line-height: var(--intergalactic-lh-500, 1.1667);
 }
 
 SText[size='600'] {
   font-size: var(--intergalactic-fs-600, 32px);
-  line-height: var(--intergalactic-lh-600, 125%);
+  line-height: var(--intergalactic-lh-600, 1.25);
 }
 
 SText[size='700'] {
   font-size: var(--intergalactic-fs-700, 36px);
-  line-height: var(--intergalactic-lh-700, 110%);
+  line-height: var(--intergalactic-lh-700, 1.1112);
 }
 
 SText[size='800'] {
   font-size: var(--intergalactic-fs-800, 48px);
-  line-height: var(--intergalactic-lh-800, 117%);
+  line-height: var(--intergalactic-lh-800, 1.16667);
 }
 
 SText[noWrap] {
@@ -468,7 +473,7 @@ SText[use='primary'] {
 }
 
 SText[use='secondary'] {
-  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
 }
 
 SText[disabled] {

package/lib/esm/components/Blockquote/Blockquote.mjs

@@ -7,14 +7,14 @@ const styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBlockquote_r5dpe_gg_{position:relative;display:flex;font-style:italic;font-size:var(--intergalactic-fs-400,20px);line-height:var(--intergalactic-lh-400,120%);color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899))}.___SDoubleQuotation_r5dpe_gg_{position:relative;margin-right:var(--intergalactic-spacing-5x,20px);font-family:Times New Roman,serif;font-style:normal;font-size:68px;line-height:52px;color:var(--intergalactic-text-large-secondary,#00030095)}@media (color-gamut:p3){.___SDoubleQuotation_r5dpe_gg_{color:var(--intergalactic-text-large-secondary,oklch(.088 .026 147.7/.583))}}.___SAuthor_r5dpe_gg_{display:block;margin-top:var(--intergalactic-spacing-4x,16px);color:var(--intergalactic-text-secondary,#00030095);font-style:normal;font-size:var(--intergalactic-fs-300,16px);line-height:var(--intergalactic-lh-300,150%)}@media (color-gamut:p3){.___SAuthor_r5dpe_gg_{color:var(--intergalactic-text-secondary,oklch(.088 .026 147.7/.583))}}",
+    ".___SBlockquote_1xyyl_gg_{position:relative;display:flex;font-style:italic;font-size:var(--intergalactic-fs-400,20px);line-height:var(--intergalactic-lh-400,1.2);color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899))}.___SDoubleQuotation_1xyyl_gg_{position:relative;margin-right:var(--intergalactic-spacing-content-gap-xxlarge-extended,20px);font-family:Times New Roman,serif;font-style:normal;font-size:68px;line-height:52px;color:var(--intergalactic-text-large-secondary,oklch(.097 .023 156.5/.468))}.___SAuthor_1xyyl_gg_{display:block;margin-top:var(--intergalactic-spacing-content-gap-xxlarge,16px);color:var(--intergalactic-text-secondary,oklch(.097 .023 156.5/.468));font-style:normal;font-size:var(--intergalactic-fs-300,16px);line-height:var(--intergalactic-lh-300,1.5)}",
     /*__inner_css_end__*/
-    "r5dpe_gg_"
+    "1xyyl_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBlockquote": "___SBlockquote_r5dpe_gg_",
-    "__SDoubleQuotation": "___SDoubleQuotation_r5dpe_gg_",
-    "__SAuthor": "___SAuthor_r5dpe_gg_"
+    "__SBlockquote": "___SBlockquote_1xyyl_gg_",
+    "__SDoubleQuotation": "___SDoubleQuotation_1xyyl_gg_",
+    "__SAuthor": "___SAuthor_1xyyl_gg_"
   })
 );
 function BlockquoteRoot(props, ref) {

package/lib/esm/components/List/List.mjs

@@ -10,15 +10,15 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SList_18q9b_gg_{padding:0;margin:0;list-style-type:none}.___SContent_18q9b_gg_{overflow:inherit;text-overflow:inherit}.___SList_18q9b_gg_ .___SList_18q9b_gg_{margin-top:var(--intergalactic-spacing-2x,8px)}.___SItem_18q9b_gg_{display:flex}.___SItem_18q9b_gg_+.___SItem_18q9b_gg_{margin-top:var(--intergalactic-spacing-2x,8px)}.___SMarker_18q9b_gg_{margin-right:var(--intergalactic-spacing-2x,8px);color:var(--intergalactic-text-secondary,#00030095);line-height:normal}@media (color-gamut:p3){.___SMarker_18q9b_gg_{color:var(--intergalactic-text-secondary,oklch(.088 .026 147.7/.583))}}",
+    ".___SList_1el1b_gg_{padding:0;margin:0;list-style-type:none}.___SContent_1el1b_gg_{overflow:inherit;text-overflow:inherit}.___SList_1el1b_gg_ .___SList_1el1b_gg_{margin-top:var(--intergalactic-spacing-content-gap-large,8px)}.___SItem_1el1b_gg_{display:flex}.___SItem_1el1b_gg_+.___SItem_1el1b_gg_{margin-top:var(--intergalactic-spacing-content-gap-large,8px)}.___SMarker_1el1b_gg_{margin-right:var(--intergalactic-spacing-content-gap-large,8px);color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));line-height:normal}",
     /*__inner_css_end__*/
-    "18q9b_gg_"
+    "1el1b_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SList": "___SList_18q9b_gg_",
-    "__SContent": "___SContent_18q9b_gg_",
-    "__SItem": "___SItem_18q9b_gg_",
-    "__SMarker": "___SMarker_18q9b_gg_"
+    "__SList": "___SList_1el1b_gg_",
+    "__SContent": "___SContent_1el1b_gg_",
+    "__SItem": "___SItem_1el1b_gg_",
+    "__SMarker": "___SMarker_1el1b_gg_"
   })
 );
 class ListRoot extends Component {