@rescui/typography 0.27.1 → 0.27.2

package/llm/typography/advanced-css-api.md

@@ -0,0 +1,753 @@
+# Advanced CSS API
+
+CSS Mixins for advanced components development.
+
+To chose a mixins, check out the [overview](/typography/advanced-css-api/#before-using).
+
+## Overview
+
+### Before using
+
+This section is intended for library development.
+
+In most cases, [textCn js-helper](/typography/text-cn/) and [its mixins](/typography/text-cn/css/) should be enough.
+
+If you need to create your own typography selectors, use [Full mixins](/typography/advanced-css-api/full/).
+
+[Low-level mixins](/typography/advanced-css-api/low-level/) should only be used for component development if you need to omit typography selectors from your bundle. For example, we do that in our library components.
+
+[Modifiers](/typography/advanced-css-api/modifiers/) mixins should only be used with [Full](/typography/advanced-css-api/full/) or [Low-level](/typography/advanced-css-api/low-level/) mixins.
+
+[Adaptivity](/typography/advanced-css-api/adaptivity/) mixins are useful when you need to configure adaptivity transformations for custom breakpoints.
+
+[Color](/typography/advanced-css-api/color/) mixins may be used with any elements to change its color without changing anything else.
+
+## Full
+
+### Full mixins
+
+`Full` mixins include all styles and variables required for rendering typography elements. Because of that, it may not be optimal to use them when you are developing a single component that includes multiple text elements.
+
+If you need a more optimized way to utilize typography mixins, check out [low-level mixins](/typography/advanced-css-api/low-level/).
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-digits-1-full` | value: `"rs-digits-1"` |
+| `rs-typography-digits-2-full` | value: `"rs-digits-2"` |
+| `rs-typography-super-hero-full` | value: `"rs-super-hero"` |
+| `rs-typography-middle-hero-full` | value: `"rs-middle-hero"` |
+| `rs-typography-hero-full` | value: `"rs-hero"` |
+| `rs-typography-h1-full` | value: `"rs-h1"` |
+| `rs-typography-h2-full` | value: `"rs-h2"` |
+| `rs-typography-h3-plus-full` | value: `"rs-h3-plus"` |
+| `rs-typography-h3-full` | value: `"rs-h3"` |
+| `rs-typography-h4-full` | value: `"rs-h4"` |
+| `rs-typography-h5-full` | value: `"rs-h5"` |
+| `rs-typography-subtitle-1-full` | value: `"rs-subtitle-1"` |
+| `rs-typography-subtitle-2-full` | value: `"rs-subtitle-2"` |
+| `rs-typography-overline-full` | value: `"rs-overline"` |
+| `rs-typography-text-1-full` | value: `"rs-text-1"` |
+| `rs-typography-text-2-full` | value: `"rs-text-2"` |
+| `rs-typography-text-3-full` | value: `"rs-text-3"` |
+| `rs-typography-ul-full` | value: `"rs-ul"` |
+| `rs-typography-ol-full` | value: `"rs-ol"` |
+| `rs-typography-code-full` | value: `"rs-code"` |
+| `rs-typography-pre-full` | value: `"rs-pre"` |
+| `rs-typography-link-full` | value: `"rs-link"` |
+
+#### Demo
+
+```tsx
+const MyTypography = () => {
+  return (
+    <div style={{ maxWidth: 800 }}>
+      <h1 className={'my-hero'}>The drive to develop</h1>
+      <p className={'my-subtitle-2 rs-docs-offset-top-24'}>
+        We make professional software development a more productive and
+        enjoyable experience.
+      </p>
+      <h3 className={'my-h3 rs-docs-offset-top-48'}>The drive to develop</h3>
+      <p className={'my-text-2 rs-docs-offset-top-24'}>
+        We make professional software development a more productive and
+        enjoyable experience.
+      </p>
+    </div>
+  );
+};
+
+render(<MyTypography />);
+```
+
+```postcss
+@import '@rescui/typography/lib/public-api.p.css';
+
+.my-hero {
+  @mixin rs-typography-hero-full;
+}
+.my-subtitle-2 {
+  @mixin rs-typography-subtitle-2-full;
+}
+.my-h3 {
+  @mixin rs-typography-h3-full;
+}
+.my-text-2 {
+  @mixin rs-typography-text-2-full;
+}
+```
+
+## Low Level API
+
+### Intro
+
+If you don't need to omit typography classes from your bundle, like we do in our library components, use [textCn](/typography/texts-cn/) helper and its [mixins](/typography/text-cn/css/).
+
+If you need to create your own typography selectors, use [Full mixins](/typography/advanced-css-api/full/).
+
+Use low-level mixins for optimized component development when you need to inline typography styles in your component classes.
+
+Mixins described further must be used alongside other required mixins on the same element or above. This is specified in the descriptions.
+
+#### Properties mixins
+
+These mixins set final CSS properties on the selector.
+
+In most cases, these properties use specific private CSS variables which can be applied using [CSS vars mixins](#text-base-css-vars-mixins).
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-text-base-styles-without-color` | value: `text base`<br><br>Apply text base CSS properties, excluding `color`. Requires [text base mixin](#text-base-css-vars-mixins), [theme mixin](/design/colors/css/) and `rs-typography-color-base` mixin. |
+| `rs-typography-list-styles` | value: `list`<br><br>Apply list CSS properties. Requires [list mixin](#list-css-vars-mixins). |
+| `rs-typography-code-styles` | value: `code`<br><br>Apply code CSS properties. Requires [theme mixin](/design/colors/css/). |
+| `rs-typography-pre-styles` | value: `pre`<br><br>Apply pre CSS properties. Requires [theme mixin](/design/colors/css/). |
+| `rs-typography-link-styles` | value: `link`<br><br>Apply link CSS properties. Requires [theme and primary-color mixins](/design/colors/css/). |
+
+#### Text base CSS vars mixins
+
+These mixins should only be used with `rs-typography-text-base-styles-without-color` mixin and its dependencies.
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-digits-1` | value: `rs-digits-1`<br><br>Apply digits-1 css variables |
+| `rs-typography-digits-2` | value: `rs-digits-2`<br><br>Apply digits-2 css variables |
+| `rs-typography-super-hero` | value: `rs-super-hero`<br><br>Apply super-hero css variables |
+| `rs-typography-middle-hero` | value: `rs-middle-hero`<br><br>Apply middle-hero css variables |
+| `rs-typography-hero` | value: `rs-hero`<br><br>Apply hero css variables |
+| `rs-typography-subtitle-1` | value: `rs-subtitle-1`<br><br>Apply subtitle-1 css variables |
+| `rs-typography-subtitle-2` | value: `rs-subtitle-2`<br><br>Apply subtitle-2 css variables |
+| `rs-typography-h1` | value: `rs-h1`<br><br>Apply h1 css variables |
+| `rs-typography-h2` | value: `rs-h2`<br><br>Apply h2 css variables |
+| `rs-typography-h3-plus` | value: `rs-h3-plus`<br><br>Apply h3-plus css variables |
+| `rs-typography-h3` | value: `rs-h3`<br><br>Apply h3 css variables |
+| `rs-typography-h4` | value: `rs-h4`<br><br>Apply h4 css variables |
+| `rs-typography-h5` | value: `rs-h5`<br><br>Apply h5 css variables |
+| `rs-typography-text-1` | value: `rs-text-1`<br><br>Apply text-1 css variables |
+| `rs-typography-text-2` | value: `rs-text-2`<br><br>Apply text-2 css variables |
+| `rs-typography-text-3` | value: `rs-text-3`<br><br>Apply text-3 css variables |
+| `rs-typography-overline` | value: `rs-overline`<br><br>Apply overline css variables |
+
+#### List CSS vars mixins
+
+These mixins should only be used with `rs-typography-list-styles` mixin.
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-ul` | value: `rs-ul`<br><br>Apply ul CSS variables |
+| `rs-typography-ol` | value: `rs-ol`<br><br>Apply ol CSS variables |
+
+##### Demo
+
+In this demo, theme and primary-colors API are declared only once at the root of the element, reducing final CSS size.
+
+For different `size` variations, we only change values of the CSS-variables. This avoids duplicating CSS properties and reduces final bundle size.
+
+```tsx
+import cn from 'classnames';
+
+const MyComponent = ({ className }) => {
+  return (
+    <div
+      style={{
+        padding: 12,
+        backgroundColor: 'var(--rs-color-black-t5)',
+        maxWidth: 800
+      }}
+      className={cn(className, 'my-component')}
+    >
+      <h1 className={'my-title'}>The drive to develop</h1>
+      <p className={'my-description rs-docs-offset-top-24'}>
+        We make professional{' '}
+        <a href="javascript:void(0)" className="my-link">
+          software development
+        </a>{' '}
+        a more productive and enjoyable experience.
+      </p>
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Size M:</p>
+      <MyComponent className={`my-component-size-m`} />
+    </div>
+    <div>
+      <p>Size L:</p>
+      <MyComponent className={`my-component-size-l`} />
+    </div>
+  </div>
+);
+```
+
+```postcss
+@import '@rescui/typography/lib/public-api.p.css';
+@import '@rescui/colors/lib/public-api.p.css';
+
+.my-component {
+  @mixin rs-theme-env;
+  @mixin rs-primary-colors-env;
+
+  .my-title,
+  .my-description {
+    @mixin rs-typography-text-base-styles-without-color;
+  }
+
+  .my-title {
+    color: var(--rs-color-black);
+  }
+  .my-description {
+    color: var(--rs-color-black-t70);
+  }
+  .my-link {
+    @mixin rs-typography-link-styles;
+  }
+}
+
+.my-component-size-m {
+  .my-title {
+    @mixin rs-typography-h1;
+  }
+  .my-description {
+    @mixin rs-typography-text-1;
+  }
+}
+
+.my-component-size-l {
+  .my-title {
+    @mixin rs-typography-hero;
+  }
+  .my-description {
+    @mixin rs-typography-subtitle-2;
+  }
+}
+```
+
+## Modifiers
+
+### Intro
+
+These mixins should be used alongside [Full](/typography/advanced-css-api/full/) or [Low-level](/typography/advanced-css-api/low-level/) mixins.
+
+If you want to customize `textCn` element, check out [textCn](/typography/text-cn/css/) mixins.
+
+#### Heading mixins
+
+These mixins should only be used on elements with [heading](/typography/headings/) styles.
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-heading-hardness-hard` | prop: `hardness`<br><br>value: `"hard"` |
+| `rs-typography-heading-hardness-average` | prop: `hardness`<br><br>value: `"average"` |
+| `rs-typography-heading-hardness-pale` | prop: `hardness`<br><br>value: `"pale"` |
+| `rs-typography-heading-hardness-auto` | prop: `hardness`<br><br>value: `null`<br><br>Set hardness of rs-typography heading element to default |
+
+#### Subtitle mixins
+
+These mixins should only be used on elements with `rs-subtitle-(1|2)` styles.
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-hardness-hard` | prop: `hardness`<br><br>value: `"hard"` |
+| `rs-typography-hardness-average` | prop: `hardness`<br><br>value: `"average"` |
+| `rs-typography-hardness-pale` | prop: `hardness`<br><br>value: `"pale"` |
+| `rs-typography-hardness-auto` | prop: `hardness`<br><br>value: `null`<br><br>Set hardness of rs-typography element to default |
+
+#### Digits mixins
+
+These mixins should only be used on elements with `rs-digits-(1|2)` styles.
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-hardness-hard` | prop: `hardness`<br><br>value: `"hard"` |
+| `rs-typography-hardness-average` | prop: `hardness`<br><br>value: `"average"` |
+| `rs-typography-hardness-pale` | prop: `hardness`<br><br>value: `"pale"` |
+| `rs-typography-hardness-auto` | prop: `hardness`<br><br>value: `null`<br><br>Set hardness of rs-typography element to default |
+
+#### Text mixins
+
+These mixins should only be used on elements with `rs-text-(1|2|3)` styles.
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-paragraph-auto-offset-styles` | prop: `paragraphOffsetAuto`<br><br>value: `true`<br><br>Apply auto offset CSS properties for children paragraphs and "pre" elements |
+| `rs-typography-hardness-hard` | prop: `hardness`<br><br>value: `"hard"` |
+| `rs-typography-hardness-average` | prop: `hardness`<br><br>value: `"average"` |
+| `rs-typography-hardness-pale` | prop: `hardness`<br><br>value: `"pale"` |
+| `rs-typography-hardness-auto` | prop: `hardness`<br><br>value: `null`<br><br>Set hardness of rs-typography element to default |
+
+#### List mixins
+
+##### Ul List mixins
+
+These mixins should only be used on elements with `rs-ul` styles.
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-list-compact-true` | prop: `compact`<br><br>value: `true` |
+| `rs-typography-list-compact-false` | prop: `compact`<br><br>value: `false` |
+| `rs-typography-list-offset-items-4` | prop: `offsetItems`<br><br>value: `4` |
+| `rs-typography-list-offset-items-8` | prop: `offsetItems`<br><br>value: `8` |
+| `rs-typography-list-offset-items-12` | prop: `offsetItems`<br><br>value: `12` |
+| `rs-typography-list-offset-items-16` | prop: `offsetItems`<br><br>value: `16` |
+| `rs-typography-list-offset-items-24` | prop: `offsetItems`<br><br>value: `24` |
+| `rs-typography-list-offset-items-auto` | prop: `offsetItems`<br><br>value: `null`<br><br>Set auto offset items value for list |
+
+##### Ol List mixins
+
+These mixins should only be used on elements with `rs-ol` styles.
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-ol-alpha-lower` | prop: `alpha`<br><br>value: `"lower"` |
+| `rs-typography-ol-alpha-upper` | prop: `alpha`<br><br>value: `"upper"` |
+| `rs-typography-ol-alpha-auto` | prop: `alpha`<br><br>value: `null`<br><br>Set counter to default for ol list |
+| `rs-typography-list-compact-true` | prop: `compact`<br><br>value: `true` |
+| `rs-typography-list-compact-false` | prop: `compact`<br><br>value: `false` |
+| `rs-typography-list-offset-items-4` | prop: `offsetItems`<br><br>value: `4` |
+| `rs-typography-list-offset-items-8` | prop: `offsetItems`<br><br>value: `8` |
+| `rs-typography-list-offset-items-12` | prop: `offsetItems`<br><br>value: `12` |
+| `rs-typography-list-offset-items-16` | prop: `offsetItems`<br><br>value: `16` |
+| `rs-typography-list-offset-items-24` | prop: `offsetItems`<br><br>value: `24` |
+| `rs-typography-list-offset-items-auto` | prop: `offsetItems`<br><br>value: `null`<br><br>Set auto offset items value for list |
+
+#### Link mixins
+
+These mixins should only be used on elements with `rs-link` styles.
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-link-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-typography-link-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+| `rs-typography-link-mode-standalone` | prop: `mode`<br><br>value: `"standalone"` |
+| `rs-typography-link-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
+| `rs-typography-link-hardness-hard` | prop: `hardness`<br><br>value: `"hard"` |
+| `rs-typography-link-hardness-average` | prop: `hardness`<br><br>value: `"average"` |
+| `rs-typography-link-hardness-pale` | prop: `hardness`<br><br>value: `"pale"` |
+| `rs-typography-link-hardness-auto` | prop: `hardness`<br><br>value: `null`<br><br>Set default hardness for link |
+| `rs-typography-link-external-true` | prop: `external`<br><br>value: `true`<br><br>Make link external |
+| `rs-typography-link-external-false` | prop: `external`<br><br>value: `false`<br><br>Make link internal |
+| `rs-typography-link-state-hover` | prop: `css-state`<br><br>value: `":hover"` |
+| `rs-typography-link-state-focus-visible` | prop: `css-state`<br><br>value: `":focus-visible"` |
+
+#### Other mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-reset-letter-spacing` | Apply styles which reset letter-spacing |
+| `rs-typography-font-smoothing` | Apply smoothing font styles |
+| `rs-typography-theme-light` | Apply light theme |
+| `rs-typography-theme-dark` | Apply dark theme |
+
+#### Demo
+
+```tsx
+const MyTypography = () => {
+  return (
+    <div style={{ maxWidth: 800 }}>
+      <h3 className={'my-heading my-heading_hardness_average'}>
+        The drive to develop
+      </h3>
+      <div
+        className="my-text my-text_auto-offset my-text_hardness_hard"
+        style={{ marginTop: 24 }}
+      >
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus
+          esse facilis magnam minus repellat repellendus sunt ullam.
+        </p>
+        <p>
+          Adipisci aspernatur error expedita laboriosam laudantium nulla
+          pariatur repellat. Dolores iusto modi nam?
+        </p>
+        <p>
+          Accusantium alias, amet aperiam debitis dolor earum expedita explicabo
+          hic in iste modi nobis numquam officia perferendis quod repudiandae
+          sapiente sed voluptates.
+        </p>
+      </div>
+      <div className={'my-text'} style={{ marginTop: 24 }}>
+        <p>Unordered List:</p>
+        <ul className={'my-ul my-list-offset-items-8'}>
+          <li>Item 1</li>
+          <li>Item 2</li>
+          <li>Item 3</li>
+        </ul>
+        <p style={{ marginTop: 24 }}>Ordered List:</p>
+        <ol className={'my-ol my-ol-alpha-lower'}>
+          <li>Item 1</li>
+          <li>Item 2</li>
+          <li>Item 3</li>
+        </ol>
+        <p style={{ marginTop: 24 }}>
+          <span className="my-link">Classic link</span>
+        </p>
+        <p style={{ marginTop: 8 }}>
+          <span className="my-link my-link_standalone">Standalone link</span>
+        </p>
+        <p style={{ marginTop: 8 }}>
+          <span className="my-link my-link_external_pale">
+            External pale link
+          </span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+render(<MyTypography />);
+```
+
+```postcss
+@import '@rescui/typography/lib/public-api.p.css';
+
+.my-heading {
+  @mixin rs-typography-h2-full;
+}
+.my-text {
+  @mixin rs-typography-text-2-full;
+}
+.my-ul {
+  @mixin rs-typography-ul-full;
+}
+.my-ol {
+  @mixin rs-typography-ol-full;
+}
+.my-link {
+  @mixin rs-typography-link-full;
+}
+
+/* MODIFIERS */
+.my-heading_hardness_average {
+  @mixin rs-typography-heading-hardness-average;
+}
+
+.my-text_auto-offset {
+  @mixin rs-typography-paragraph-auto-offset-styles;
+}
+.my-text_hardness_hard {
+  @mixin rs-typography-hardness-hard;
+}
+
+.my-list-offset-items-8 {
+  @mixin rs-typography-list-offset-items-8;
+}
+.my-ol-alpha-lower {
+  @mixin rs-typography-ol-alpha-lower;
+}
+
+.my-link_standalone {
+  @mixin rs-typography-link-mode-standalone;
+}
+.my-link_external_pale {
+  @mixin rs-typography-link-external-true;
+  @mixin rs-typography-link-hardness-pale;
+}
+```
+
+## Adaptivity
+
+### Adaptivity mixins
+
+`Adaptivity` mixins are useful in situations where you need to fine-tune how typography styles change across different screen widths.
+
+These mixins are already applied to the typography styles by default under the corresponding media queries, but you can use them to adjust some of the adaptivity rules at different breakpoints.
+
+Check out the [headings](/typography/headings/#adaptivity), [subtitles](/typography/subtitles/#adaptivity) and [digits](/typography/digits/#adaptivity) default adaptivity rules.
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-digits-1-sm` | Apply digits-1 `--sm` css variables |
+| `rs-typography-super-hero-md` | Apply super-hero `--md` css variables |
+| `rs-typography-super-hero-sm` | Apply super-hero `--sm` css variables |
+| `rs-typography-middle-hero-sm` | Apply middle-hero `--sm` css variables |
+| `rs-typography-hero-sm` | Apply hero `--sm` css variables |
+| `rs-typography-subtitle-1-sm` | Apply subtitle-1 `--sm` css variables |
+| `rs-typography-subtitle-2-sm` | Apply subtitle-2 `--sm` css variables |
+| `rs-typography-h1-sm` | Apply h1 `--sm` css variables |
+| `rs-typography-h2-sm` | Apply h2 `--sm` css variables |
+| `rs-typography-h3-plus-sm` | Apply h3-plus `--sm` css variables |
+| `rs-typography-text-1-sm` | Apply text-1 `--sm` css variables |
+| `rs-typography-text-2-sm` | Apply text-2 `--sm` css variables |
+| `rs-typography-list-offset-items-16-sm` | Apply `--sm` css variables for list offsetItems: 16 |
+| `rs-typography-list-offset-items-24-sm` | Apply `--sm` css variables for list offsetItems: 24 |
+| `rs-typography-sm` | Contains `--sm` styles of all typography elements |
+| `rs-typography-md` | Contains `--md` styles of all typography elements |
+
+#### Demo
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const MyTypography = () => {
+  return (
+    <div style={{ maxWidth: 800 }}>
+      <h1 className={cn(textCn('rs-middle-hero'), 'smaller-middle-hero-on-md')}>
+        Has --sm styles on --md
+      </h1>
+    </div>
+  );
+};
+
+render(<MyTypography />);
+```
+
+```postcss
+@import '@rescui/typography/lib/public-api.p.css';
+
+.smaller-middle-hero-on-md {
+  @media (--md) {
+    @mixin rs-typography-middle-hero-sm;
+  }
+}
+```
+
+## Color
+
+### Color mixins
+
+These mixins can be used on any elements, they provide the final `color` CSS property with specific typography value.
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-typography-color-hard` | style: `color`<br><br>value: `typography-hard-color`<br><br>Add `color` css-property with hard typography color |
+| `rs-typography-color-average` | style: `color`<br><br>value: `typography-average-color`<br><br>Add `color` css-property with average typography color |
+| `rs-typography-color-pale` | style: `color`<br><br>value: `typography-pale-color`<br><br>Add `color` css-property with pale typography color |
+| `rs-typography-color-base` | style: `color`<br><br>value: `typography-base-color`<br><br>Add `color` css-property with base typography color (inherited from the text base style) |
+
+#### Demo
+
+```tsx
+import { CompanyIcon } from '@rescui/icons';
+
+const MyTypography = () => {
+  return (
+    <div style={{ maxWidth: 800 }}>
+      <CompanyIcon size="l" className="my-icon" />
+    </div>
+  );
+};
+
+render(<MyTypography />);
+```
+
+```postcss
+@import '@rescui/typography/lib/public-api.p.css';
+
+.my-icon {
+  @mixin rs-typography-color-average;
+}
+```
+
+## Legacy
+
+### Intro
+
+These mixins are considered legacy. They were used before the `1.0.0` version.
+
+Use [Full](/typography/advanced-css-api/full/) and other mixins with auto theme resolving instead.
+
+##### Usage
+
+Import: `@import '@rescui/typography/lib/mixins.p.css';`
+
+#### `Text Base` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-super-hero-base` | value: `"rs-super-hero"`<br><br>Apply super-hero text styles to the element. `color` property excluded. |
+| `rs-middle-hero-base` | value: `"rs-middle-hero"`<br><br>Apply middle-hero text styles to the element. `color` property excluded. |
+| `rs-digits-1-base` | value: `"rs-digits-1"`<br><br>Apply digits-1 text styles to the element. `color` property excluded. |
+| `rs-digits-2-base` | value: `"rs-digits-2"`<br><br>Apply digits-2 text styles to the element. `color` property excluded. |
+| `rs-hero-base` | value: `"rs-hero"`<br><br>Apply hero text styles to the element. `color` property excluded. |
+| `rs-subtitle-1-base` | value: `"rs-subtitle-1"`<br><br>Apply subtitle-1 text styles to the element. `color` property excluded. |
+| `rs-h1-base` | value: `"rs-h1"`<br><br>Apply h1 text styles to the element. `color` property excluded. |
+| `rs-subtitle-2-base` | value: `"rs-subtitle-2"`<br><br>Apply subtitle-2 text styles to the element. `color` property excluded. |
+| `rs-h2-base` | value: `"rs-h2"`<br><br>Apply h2 text styles to the element. `color` property excluded. |
+| `rs-h3-plus-base` | value: `"rs-h3-plus"`<br><br>Apply h3-plus text styles to the element. `color` property excluded. |
+| `rs-h3-base` | value: `"rs-h3"`<br><br>Apply h3 text styles to the element. `color` property excluded. |
+| `rs-text-1-base` | value: `"rs-text-1"`<br><br>Apply text-1 text styles to the element. `color` property excluded. |
+| `rs-h4-base` | value: `"rs-h4"`<br><br>Apply h4 text styles to the element. `color` property excluded. |
+| `rs-text-2-base` | value: `"rs-text-2"`<br><br>Apply text-2 text styles to the element. `color` property excluded. |
+| `rs-h5-base` | value: `"rs-h5"`<br><br>Apply h5 text styles to the element. `color` property excluded. |
+| `rs-text-3-base` | value: `"rs-text-3"`<br><br>Apply text-3 text styles to the element. `color` property excluded. |
+
+#### `Text Full` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-super-hero` | theme: `"light"`<br><br>value: `"rs-super-hero"`<br><br>Apply light themed super-hero text styles to the element |
+| `rs-middle-hero` | theme: `"light"`<br><br>value: `"rs-middle-hero"`<br><br>Apply light themed middle-hero text styles to the element |
+| `rs-digits-1` | theme: `"light"`<br><br>value: `"rs-digits-1"`<br><br>Apply light themed digits-1 text styles to the element |
+| `rs-digits-2` | theme: `"light"`<br><br>value: `"rs-digits-2"`<br><br>Apply light themed digits-2 text styles to the element |
+| `rs-hero` | theme: `"light"`<br><br>value: `"rs-hero"`<br><br>Apply light themed hero text styles to the element |
+| `rs-subtitle-1` | theme: `"light"`<br><br>value: `"rs-subtitle-1"`<br><br>Apply light themed subtitle-1 text styles to the element |
+| `rs-h1` | theme: `"light"`<br><br>value: `"rs-h1"`<br><br>Apply light themed h1 text styles to the element |
+| `rs-subtitle-2` | theme: `"light"`<br><br>value: `"rs-subtitle-2"`<br><br>Apply light themed subtitle-2 text styles to the element |
+| `rs-h2` | theme: `"light"`<br><br>value: `"rs-h2"`<br><br>Apply light themed h2 text styles to the element |
+| `rs-h3-plus` | theme: `"light"`<br><br>value: `"rs-h3-plus"`<br><br>Apply light themed h3 text styles to the element |
+| `rs-h3` | theme: `"light"`<br><br>value: `"rs-h3"`<br><br>Apply light themed h3 text styles to the element |
+| `rs-text-1` | theme: `"light"`<br><br>value: `"rs-text-1"`<br><br>Apply light themed text-1 text styles to the element |
+| `rs-h4` | theme: `"light"`<br><br>value: `"rs-h4"`<br><br>Apply light themed h4 text styles to the element |
+| `rs-text-2` | theme: `"light"`<br><br>value: `"rs-text-2"`<br><br>Apply light themed text-2 text styles to the element |
+| `rs-h5` | theme: `"light"`<br><br>value: `"rs-h5"`<br><br>Apply light themed h5 text styles to the element |
+| `rs-overline` | theme: `"light"`<br><br>value: `"rs-overline"`<br><br>Apply light themed overline text styles to the element |
+| `rs-text-3` | theme: `"light"`<br><br>value: `"rs-text-3"`<br><br>Apply light themed text-3 text styles to the element |
+
+#### `Text Dark` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-super-hero-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the super-hero styled element |
+| `rs-middle-hero-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the middle-hero styled element |
+| `rs-digits-1-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the digits-1 styled element |
+| `rs-digits-2-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the digits-2 styled element |
+| `rs-hero-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the hero styled element |
+| `rs-subtitle-1-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the subtitle-1 styled element |
+| `rs-h1-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the h1 styled element |
+| `rs-subtitle-2-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the subtitle-2 styled element |
+| `rs-h2-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the h2 styled element |
+| `rs-h3-plus-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the h3-plus styled element |
+| `rs-h3-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the h3 styled element |
+| `rs-text-1-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the text-1 styled element |
+| `rs-h4-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the h4 styled element |
+| `rs-text-2-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the text-2 styled element |
+| `rs-h5-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the h5 styled element |
+| `rs-overline-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the overline styled element |
+| `rs-text-3-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Apply dark themed color to the text-3 styled element |
+
+#### `Text Offset` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-super-hero-offset-top` | value: `"96px"`<br><br>Apply top margin CSS to the super-hero element |
+| `rs-middle-hero-offset-top` | value: `"96px"`<br><br>Apply top margin CSS to the middle-hero element |
+| `rs-digits-1-offset-top` | value: `"32px"`<br><br>Apply top margin CSS to the digits-1 element |
+| `rs-digits-2-offset-top` | value: `"32px"`<br><br>Apply top margin CSS to the digits-2 element |
+| `rs-hero-offset-top` | value: `"96px"`<br><br>Apply top margin CSS to the hero element |
+| `rs-subtitle-1-offset-top` | value: `"32px"`<br><br>Apply top margin CSS to the subtitle-1 element |
+| `rs-h1-offset-top` | value: `"64px"`<br><br>Apply top margin CSS to the h1 element |
+| `rs-subtitle-2-offset-top` | value: `"32px"`<br><br>Apply top margin CSS to the subtitle-2 element |
+| `rs-h2-offset-top` | value: `"48px"`<br><br>Apply top margin CSS to the h2 element |
+| `rs-h3-plus-offset-top` | value: `"32px"`<br><br>Apply top margin CSS to the h3-plus element |
+| `rs-h3-offset-top` | value: `"32px"`<br><br>Apply top margin CSS to the h3 element |
+| `rs-text-1-offset-top` | value: `"32px"`<br><br>Apply top margin CSS to the text-1 element |
+| `rs-h4-offset-top` | value: `"16px"`<br><br>Apply top margin CSS to the h4 element |
+| `rs-text-2-offset-top` | value: `"16px"`<br><br>Apply top margin CSS to the text-2 element |
+| `rs-h5-offset-top` | value: `"16px"`<br><br>Apply top margin CSS to the h5 element |
+| `rs-overline-offset-top` | value: `"16px"`<br><br>Apply top margin CSS to the overline element |
+| `rs-text-3-offset-top` | value: `"8px"`<br><br>Apply top margin CSS to the text-3 element |
+| `rs-pre-offset-top` | value: `"16px"`<br><br>Apply top margin CSS to the pre element |
+
+#### `Text Mods` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-text-hardness-hard` | theme: `"light"`<br><br>prop: `hardness`<br><br>value: `"hard"`<br><br>Set light theme and hard color to the text element |
+| `rs-text-hardness-average` | theme: `"light"`<br><br>prop: `hardness`<br><br>value: `"average"`<br><br>Set light theme and average color to the text element |
+| `rs-text-hardness-pale` | theme: `"light"`<br><br>prop: `hardness`<br><br>value: `"pale"`<br><br>Set light theme and pale color to the text element |
+| `rs-text-hardness-hard-theme-dark` | theme: `"dark"`<br><br>prop: `hardness`<br><br>value: `"hard"`<br><br>Set dark theme and hard color to the text element |
+| `rs-text-hardness-average-theme-dark` | theme: `"dark"`<br><br>prop: `hardness`<br><br>value: `"average"`<br><br>Set dark theme and average color to the text element |
+| `rs-text-hardness-pale-theme-dark` | theme: `"dark"`<br><br>prop: `hardness`<br><br>value: `"pale"`<br><br>Set dark theme and pale color to the text element |
+
+#### `List Mods` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-core-list-offset-items-4` | prop: `offset-items`<br><br>value: `4`<br><br>Set 4px offset between list items. |
+| `rs-core-list-offset-items-8` | prop: `offset-items`<br><br>value: `8`<br><br>Set 8px offset between list items. |
+| `rs-core-list-offset-items-12` | prop: `offset-items`<br><br>value: `12`<br><br>Set 12px offset between list items. |
+| `rs-core-list-offset-items-16` | prop: `offset-items`<br><br>value: `16`<br><br>smValue: `12`<br><br>Set 16px offset between list items. Auto change to 12px on sm breakpoint |
+| `rs-core-list-offset-items-24` | prop: `offset-items`<br><br>value: `24`<br><br>smValue: `16`<br><br>Set 24px offset between list items. Auto change to 16px on sm breakpoint |
+| `rs-ol-alpha-lower` | prop: `alpha`<br><br>value: `"lower"`<br><br>Apply `alpha-lower` counter to the ol list |
+| `rs-ol-alpha-upper` | prop: `alpha`<br><br>value: `"upper"`<br><br>Apply `alpha-upper` counter to the ol list |
+| `rs-ul-text-1` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+| `rs-ul-text-2` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+| `rs-ul-text-3` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+| `rs-ol-text-1` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+| `rs-ol-text-2` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+| `rs-ol-text-3` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+
+#### `List` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-ul` | value: `"rs-ul"`<br><br>Apply ul styles to the element |
+| `rs-ol` | value: `"rs-ol"`<br><br>Apply ol styles to the element |
+| `rs-core-list` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+
+#### `Pre` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-pre` | theme: `"light"`<br><br>value: `"rs-pre"`<br><br>Apply pre styles to the element |
+| `rs-pre-theme-dark` | prop: `"theme"`<br><br>value: `"dark"`<br><br>Set dark theme to the pre element |
+| `rs-pre-child-code-direct` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+| `rs-pre-child-code` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+
+#### `Code` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-code` | theme: `"light"`<br><br>value: `"rs-code"`<br><br>Apply code styles to the element |
+| `rs-code-theme-dark` | prop: `"theme"`<br><br>value: `"dark"`<br><br>Set dark theme to the code element |
+
+#### `Link` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-link` | theme: `"light"`<br><br>value: `"rs-link"`<br><br>Apply link styles to the element |
+| `rs-link-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Set dark theme to the link element |
+
+#### `Link Mods` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-link-hardness-hard` | theme: `"light"`<br><br>prop: `hardness`<br><br>value: `"hard"`<br><br>Set light theme and hard color to the link element |
+| `rs-link-hardness-average` | theme: `"light"`<br><br>prop: `hardness`<br><br>value: `"average"`<br><br>Set light theme and average color to the link element |
+| `rs-link-hardness-pale` | theme: `"light"`<br><br>prop: `hardness`<br><br>value: `"pale"`<br><br>Set light theme and pale color to the link element |
+| `rs-link-external` | prop: `external`<br><br>value: `true`<br><br>Set link to external |
+| `rs-link-mode-classic` | prop: `mode`<br><br>value: `"classic"`<br><br>Set link mode to classic |
+| `rs-link-mode-rock` | prop: `mode`<br><br>value: `"rock"`<br><br>Set link mode to rock |
+| `rs-link-mode-standalone` | prop: `mode`<br><br>value: `"standalone"`<br><br>Set link mode to standalone |
+| `rs-link-mode-clear` | prop: `mode`<br><br>value: `"clear"`<br><br>Set link mode to clear |
+| `rs-link-hardness-hard-theme-dark` | theme: `"dark"`<br><br>prop: `hardness`<br><br>value: `"hard"`<br><br>Set dark theme and hard color to the link element |
+| `rs-link-hardness-average-theme-dark` | theme: `"dark"`<br><br>prop: `hardness`<br><br>value: `"average"`<br><br>Set dark theme and average color to the link element |
+| `rs-link-hardness-pale-theme-dark` | theme: `"dark"`<br><br>prop: `hardness`<br><br>value: `"pale"`<br><br>Set dark theme and pale color to the link element |
+| `rs-link-mode-classic-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Set dark theme to the link element |
+| `rs-link-mode-rock-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Set dark theme to the link element |
+| `rs-link-mode-standalone-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Set dark theme to the link element |
+| `rs-link-mode-clear-theme-dark` | prop: `theme`<br><br>value: `"dark"`<br><br>Set dark theme to the link element |
+| `rs-link-mode-standalone-external` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+| `rs-link-mode-standalone-big-heading` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+| `rs-link-mode-standalone-external-big-heading` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+| `rs-link-mode-standalone-overline` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+| `rs-link-mode-standalone-external-overline` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+
+#### Unclassified mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-font-smoothing` | Apply smoothing font styles |
+| `rs-typography-light` | deprecated: `true`<br><br>Deprecated. Does nothing. |
+| `rs-typography-dark` | deprecated: `true`<br><br>Deprecated. Does nothing. |