diff --git a/docs/common/DocsColorBlock.vue b/docs/common/DocsColorBlock.vue index 15945b1ef..86fdf3840 100644 --- a/docs/common/DocsColorBlock.vue +++ b/docs/common/DocsColorBlock.vue @@ -6,9 +6,12 @@ {{ name }}
- - {{ tokenSource }} - + {{ tokenSource }} {{ value }}
diff --git a/docs/pages/KSwitch.vue b/docs/pages/KSwitch.vue index b3d97c611..7ddb8f37b 100644 --- a/docs/pages/KSwitch.vue +++ b/docs/pages/KSwitch.vue @@ -12,9 +12,7 @@ A switch toggle is used to select and execute an action instantly, in real time. A switch is toggled successfully when the switch thumb slides to the other side of the track upon click or press.

- For selections that require a confirmation to execute and are housed in a form, use - KCheckbox - component instead. + For selections that require a confirmation to execute and are housed in a form, use component instead.

@@ -33,27 +31,19 @@ diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue index 9269c3182..7319f700e 100644 --- a/docs/pages/colors.vue +++ b/docs/pages/colors.vue @@ -40,17 +40,11 @@

Color tokens are by themselves abstract and defined by a purpose, not a color value. A - - theme - + makes them concrete by mapping them to specific - - brand colors - + and - - palette colors - . + .

When using tokens, it's very important to use them because of their purposes, not because of their color values. Multiple tokens will commonly share a single color value. diff --git a/docs/pages/errors/index.vue b/docs/pages/errors/index.vue index bfa4d836e..822d78689 100644 --- a/docs/pages/errors/index.vue +++ b/docs/pages/errors/index.vue @@ -25,9 +25,7 @@

- Follow the - writing guidelines - with a special focus on clear, concise, and natural language. Explain causes of errors if it will help the user resolve their issue, but do not use complex technical terms and run-on explanations. + Follow the with a special focus on clear, concise, and natural language. Explain causes of errors if it will help the user resolve their issue, but do not use complex technical terms and run-on explanations.

Error messages should also be actionable. Offer the solution as an action when possible and make sure the action label is specific to the outcome. If including an action isn’t possible, then briefly explain how the user can fix their problem. @@ -96,13 +94,13 @@

Banners are appended to the app bar and notify the user about global system errors and/or notifications that affect the whole app experience. -

+

Error summary

- Error summaries should appear at the top of the page and use an alert component. Use them in forms or for page-level errors that are not associated with a specific component or location on the page. + Error summaries should appear at the top of the page and use an alert component. Use them in forms or for page-level errors that are not associated with a specific component or location on the page.

@@ -162,7 +160,7 @@ Progressive disclosure

- Error messages are important, but should not overwhelm the user. Apply the concept of to prevent surprises and frustration. + Error messages are important, but should not overwhelm the user. Apply the concept of to prevent surprises and frustration.

For error messages, this means not showing all error messages at once. Show enough information for the user to discover where the problem is, and present the detail they need at the moment of resolving the error. @@ -179,9 +177,7 @@

- Do not use red color as the only indicator for errors. Color alone is not sufficient to indicate an error state. Errors must be accompanied by an additional visual indicator such as an icon as mentioned in - inline error messages - . + Do not use red color as the only indicator for errors. Color alone is not sufficient to indicate an error state. Errors must be accompanied by an additional visual indicator such as an icon as mentioned in .

Important information to resolve errors should also be keyboard accessible. Avoid using snackbars and tooltips as the primary way to access this critical information. diff --git a/docs/pages/index.vue b/docs/pages/index.vue index f3541c83a..4e948efeb 100644 --- a/docs/pages/index.vue +++ b/docs/pages/index.vue @@ -15,13 +15,7 @@ The design system includes both documentation design patterns and a shared front-end UI library. Together, these provide solutions to common design and implementation needs in Kolibri products.

- If the design system is failing to achieve the objectives above, it needs to be updated. Your contributions and input are appreciated. For more information, see the - Updates - section below, the - GitHub repository - , or the - Notion project - . + If the design system is failing to achieve the objectives above, it needs to be updated. Your contributions and input are appreciated. For more information, see the section below, the , or the .

@@ -66,16 +60,10 @@ diff --git a/docs/pages/layout/index.vue b/docs/pages/layout/index.vue index 432653b09..998809a52 100644 --- a/docs/pages/layout/index.vue +++ b/docs/pages/layout/index.vue @@ -20,9 +20,7 @@

Dropdown menu

diff --git a/docs/pages/textfields/index.vue b/docs/pages/textfields/index.vue index 50bfacb1b..021cdfafc 100644 --- a/docs/pages/textfields/index.vue +++ b/docs/pages/textfields/index.vue @@ -180,34 +180,24 @@
  • Min width: 252px
  • Corner radius: 2px
  • - Fill color: - - palette.grey.v_400 - , 0.25 opacity + Fill color: + , 0.25 opacity
  • Bottom stroke color: - - palette.grey.v_500 - +
  • Bottom stroke focused color: - - tokens.primary - +
  • - Label text color: - - palette.grey.v_300 - + Label text color: +
  • Focused text color: - - tokens.text - +