diff --git a/src/stories/Overview/Addons.mdx b/src/stories/Overview/Addons.mdx index 6e02fb52..eb4fb2b0 100644 --- a/src/stories/Overview/Addons.mdx +++ b/src/stories/Overview/Addons.mdx @@ -20,7 +20,7 @@ Optics provides a few addons for integrating Third-Party tools with your applica If your application uses Tom Select, you can import the styles from Tom Select along with the Design Systems tokens applied to it by placing this after importing the base design system. ```css -@import '@rolemodel/optic'; +@import '@rolemodel/optics'; @import 'tom-select/dist/scss/tom-select'; @import '@rolemodel/optics/dist/scss/addons/tom-select'; @@ -33,7 +33,7 @@ Panel provide styles that are intended to accompany the rails configuration and If your application uses this implementation, you can import the styles via: ```css -@import '@rolemodel/optic'; +@import '@rolemodel/optics'; @import '@rolemodel/optics/dist/scss/addons/panel'; ``` diff --git a/src/stories/Overview/ScaleOverriding.mdx b/src/stories/Overview/ScaleOverriding.mdx index 38dd9f0f..34f01bef 100644 --- a/src/stories/Overview/ScaleOverriding.mdx +++ b/src/stories/Overview/ScaleOverriding.mdx @@ -10,7 +10,7 @@ There are multiple scales in Optics. Unit Scales exist to allow adjusting font a A Unit Scale is defined for both font sizes and spacing variables. All values are multiplied by their respective units which default as `1rem` (equivelant to `10px`) -If you want to change the font or spacing scale globally, or within the context of a specific component, you can't just set the `--op-space-scale-unit` because the css variables for the scale are already computed and won't be re-computed when you set the scale unit. You can force it to re-compute by redefining the scale. This is why each set of tokens is defined in a scss mixin. `card--condensed` is a great example of how to do this. +If you want to change the font or spacing scale globally, or within the context of a specific component, you can't just set the `--op-space-scale-unit` because the CSS variables for the scale are already computed and won't be re-computed when you set the scale unit. You can force it to re-compute by redefining the scale. This is why each set of tokens is defined in a scss mixin. `card--condensed` is a great example of how to do this. ```css .card--condensed { diff --git a/src/stories/Overview/Tokens.mdx b/src/stories/Overview/Tokens.mdx index 07a2ecd3..40eeb58a 100644 --- a/src/stories/Overview/Tokens.mdx +++ b/src/stories/Overview/Tokens.mdx @@ -17,7 +17,7 @@ Tokens are defined in `src/core/tokens` - Color scale tokens are defined in `src/core/tokens/scale_color_tokens.scss` - Dark mode tokens are defined in `src/core/tokens/dark_mode_tokens.scss` -There are also a few component specific tokens that are defined in their respective component file, but those are not indented to be global or used outside of that file. +There are also a few component specific tokens that are defined in their respective component file, but those are not intended to be global or used outside of that file. There is a JSON file in `docs/token_structure.json` that lists all the current tokens in one place and shows how the names indicate organization. @@ -152,7 +152,7 @@ The Component name becomes the category and in some cases, the sub category.
value

-Additionally, components may implement a "public" and "private" API of tokens. These are internal to the component and intented to provide an easy to use interface for customizing the component. +Additionally, components may implement a "public" and "private" API of tokens. These are internal to the component and intended to provide an easy to use interface for customizing the component. The "Private" API is not meant to be set by the user, but rather is used internally by the component. These tokens follow a structure like `--__prefix-component-name-sub-name-variant-qualifier-variant: value`