From 05aac79a0200615e4c3317bcac757470fff9a142 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 16:01:35 -0400 Subject: [PATCH 01/45] Update Table.mdx --- docs/Design Templates/Table/Table.mdx | 30 ++++++++++++++++++--------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/docs/Design Templates/Table/Table.mdx b/docs/Design Templates/Table/Table.mdx index 7a31f4901..5a03e2bb5 100644 --- a/docs/Design Templates/Table/Table.mdx +++ b/docs/Design Templates/Table/Table.mdx @@ -2,15 +2,17 @@ #### Overview Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation. -#### Filter Bar -Filters allow users to narrow down large datasets in tables. While not required for all tables, the filter bar typically appears above the table. -#### Header + +#### Basic Table + +##### Header A typical table header contains column titles that describe the data in each column. It often includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose. -#### Pagination -Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page. -#### Cell Types -Table cells that support different formats and are designed to display various types of data in appropriate and easily readable ways. +##### Pagination +Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page. + +##### Cell Types +Table cells support various formats and are designed to display data in clear, readable ways. - Numbers (Coming Soon) - Date / Time (Coming Soon) - CTA Buttons (Coming Soon) @@ -19,10 +21,18 @@ Table cells that support different formats and are designed to display various - Tags (Coming Soon) - More Actions (Coming Soon) +[View Example](#link) + +#### Tables with Filters +Filters help users refine large datasets within tables. The mParticle table supports a range of filter types, including [Search](#link-to-search), Date Range filters, basic dropdowns, and more advanced [filters with an Apply button](#link-to-apply-button-filters). + + #### Related Links -| Type | Resource | -| -------- | ------- | -| Eames | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0) | +| Type | Resource | +| ------ | -------- | +| Eames | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0) | + + #### Example basic table image (To be changed) From 06ce7fa3d8e64084fd2c9cd43a49d85c9ea2cb2d Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 16:24:46 -0400 Subject: [PATCH 02/45] Update Table.mdx --- docs/Design Templates/Table/Table.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/Design Templates/Table/Table.mdx b/docs/Design Templates/Table/Table.mdx index 5a03e2bb5..003507db3 100644 --- a/docs/Design Templates/Table/Table.mdx +++ b/docs/Design Templates/Table/Table.mdx @@ -24,7 +24,13 @@ Table cells support various formats and are designed to display data in clear, r [View Example](#link) #### Tables with Filters -Filters help users refine large datasets within tables. The mParticle table supports a range of filter types, including [Search](#link-to-search), Date Range filters, basic dropdowns, and more advanced [filters with an Apply button](#link-to-apply-button-filters). +Filters help users refine large datasets within tables. The mParticle table supports a range of filter types, including: + +- [Search](#link-to-search) +- [Date Range filters](#link-to-daterange) +- [Basic Filters](#link-to-basic-filters) +- [Filters with an Apply button](#link-to-apply-button-filters) + #### Related Links From 5ee49571737135976dec6aa2b1bac9c317b91f5a Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 16:47:51 -0400 Subject: [PATCH 03/45] Update Filters.mdx --- docs/Design Templates/Table/Filters.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Design Templates/Table/Filters.mdx b/docs/Design Templates/Table/Filters.mdx index a975af459..7a1bb0632 100644 --- a/docs/Design Templates/Table/Filters.mdx +++ b/docs/Design Templates/Table/Filters.mdx @@ -9,7 +9,7 @@ Examples: - Coming Soon - Coming Soon -#### **Complex Filters with Apply Button** +#### **Filters with Apply Button** Complex filters provide more advanced filtering options, allowing users to apply multiple criteria at once. These filters often include dropdowns, checkboxes, and text fields. Complex filters are particularly useful when multiple filters need to be applied simultaneously or when load times might be a concern. #### **Date Range Filters** From 8562842a5064c399d4cf4e4bfa9dc9c335acdfea Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 7 Oct 2024 17:21:25 -0400 Subject: [PATCH 04/45] Update Table.mdx --- docs/Design Templates/Table/Table.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Design Templates/Table/Table.mdx b/docs/Design Templates/Table/Table.mdx index 003507db3..b3349ad2d 100644 --- a/docs/Design Templates/Table/Table.mdx +++ b/docs/Design Templates/Table/Table.mdx @@ -6,7 +6,7 @@ Tables present and organize data in a structured, readable format, ranging from #### Basic Table ##### Header -A typical table header contains column titles that describe the data in each column. It often includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose. +A typical table header contains column titles that describe the data in each column. It includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose. ##### Pagination Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page. From aac6b52fdd1409d5e43b4b55b1256b5f2e83159f Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 12:14:56 -0400 Subject: [PATCH 05/45] Update Documentation.mdx --- docs/components/Data Display/Tooltip/Documentation.mdx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/components/Data Display/Tooltip/Documentation.mdx b/docs/components/Data Display/Tooltip/Documentation.mdx index a72819ad6..999e1495f 100644 --- a/docs/components/Data Display/Tooltip/Documentation.mdx +++ b/docs/components/Data Display/Tooltip/Documentation.mdx @@ -8,8 +8,14 @@ import * as TooltipStories from '../../../../src/components/data-display/Tooltip # Tooltip -This is the documentation for the tooltip component +### Overview +The Tooltip is a lightweight, contextual UI element used to display additional information when a user hovers over or focuses on an element. It enhances the user experience by providing supplementary details without cluttering the interface. + +### When to use: +- To provide context or explanation for a UI element, icon, button, or data point that may not be immediately clear. +- When more information is needed to explain an action, label, or feature without disrupting the user's flow. +- To guide users with short, helpful messages, especially when onboarding or interacting with complex components. {/* Documentation goes here */} - \ No newline at end of file + From ecea2c2623b3bef7ccb10dd3b44324e81bc502e2 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 12:18:09 -0400 Subject: [PATCH 06/45] Update Documentation.mdx --- docs/components/Data Display/Tooltip/Documentation.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/components/Data Display/Tooltip/Documentation.mdx b/docs/components/Data Display/Tooltip/Documentation.mdx index 999e1495f..1f3039fd5 100644 --- a/docs/components/Data Display/Tooltip/Documentation.mdx +++ b/docs/components/Data Display/Tooltip/Documentation.mdx @@ -16,6 +16,14 @@ The Tooltip is a lightweight, contextual UI element used to display additional i - When more information is needed to explain an action, label, or feature without disrupting the user's flow. - To guide users with short, helpful messages, especially when onboarding or interacting with complex components. +#### Related Links +| Type | Resource | +| ------ | -------- | +| Eames | [Tooltip Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=413-13162&t=5iHsAw2QyK8Lx8zt-4) | + + + + {/* Documentation goes here */} From 0835b5bb60a6c8832a0bb8e1cbb298ba57a70271 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 12:41:15 -0400 Subject: [PATCH 07/45] Update Documentation.mdx --- .../Data Entry/Select/Documentation.mdx | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/docs/components/Data Entry/Select/Documentation.mdx b/docs/components/Data Entry/Select/Documentation.mdx index 09da89e8e..123f62115 100644 --- a/docs/components/Data Entry/Select/Documentation.mdx +++ b/docs/components/Data Entry/Select/Documentation.mdx @@ -8,8 +8,30 @@ import * as SelectStories from '../../../../src/components/data-entry/Select/Sel # Select -This is the documentation for the select component +### Overview + Select component allows users to select the necessary record from a list. + + +### When to use: +- When users need to filter or refine data views based on specific criteria (e.g., selecting records by status or category). +- When there are distinct categories or options that users must choose from during data entry +- When the list of options is too long to display effectively with buttons, checkboxes, or radio buttons, allowing for a compact, scrollable dropdown. + + +### Related Components: +- Multiselect [Insert Link] +- Select with Search [Insert Link] +- Select with Autocomplete [Insert Link] + + +#### Related Links +| Type | Resource | +| ------ | -------- | +| Eames | [Select Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=1217-31707&t=5iHsAw2QyK8Lx8zt-4) | + + + {/* Documentation goes here */} - \ No newline at end of file + From 9ba44387226ec64ed03f2b91d535656679ffe3a6 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 12:58:53 -0400 Subject: [PATCH 08/45] Update Cell More Actions.mdx --- docs/UX Patterns/Table/Cell More Actions.mdx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/docs/UX Patterns/Table/Cell More Actions.mdx b/docs/UX Patterns/Table/Cell More Actions.mdx index 15b9950cb..e89a8a022 100644 --- a/docs/UX Patterns/Table/Cell More Actions.mdx +++ b/docs/UX Patterns/Table/Cell More Actions.mdx @@ -1,18 +1,14 @@ -### More Actions Menu + +# More Actions Menu #### Overview The Actions Menu provides a consolidated interface for row-specific operations, such as delete, duplicate, download, and archive, all grouped within a single menu. - - - - - #### Usage Guidelines - Highlight destructive actions in red to ensure emphasis and user caution. - Omit icons from menu items to maintain a clean, easy-to-read menu. - Display the "More Actions" menu even when only one option is available. -Examples: +#### Examples: - Disabled menu item (Coming Soon) From e26a9d1f8ffe01268b5d647a1b30fb67ec930609 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 12:59:21 -0400 Subject: [PATCH 09/45] Create Cell Text --- docs/UX Patterns/Table/Cell Text | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 docs/UX Patterns/Table/Cell Text diff --git a/docs/UX Patterns/Table/Cell Text b/docs/UX Patterns/Table/Cell Text new file mode 100644 index 000000000..65bf592a3 --- /dev/null +++ b/docs/UX Patterns/Table/Cell Text @@ -0,0 +1,15 @@ +# Table Cells + +### Text + +Text cells support 1 or 2 lines of text. Single-line text cells are typically used for concise information like names, identifiers, or short labels. Two-line text cells are used when additional context is needed and can include entry type or ID, allowing for more detailed information without consuming excessive space. + +[Insert 2 lines example] + +#### Case + +We use sentence case for everything except for titles, which use title case. Exceptions are allowed based on a specific project requirements. + +#### Truncating Long names + +[Insert Example] From 8870bd0438c17b23e90e44f3bfb9be1b69142b3c Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 12:59:34 -0400 Subject: [PATCH 10/45] Update Cell Text --- docs/UX Patterns/Table/Cell Text | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/docs/UX Patterns/Table/Cell Text b/docs/UX Patterns/Table/Cell Text index 65bf592a3..8b1378917 100644 --- a/docs/UX Patterns/Table/Cell Text +++ b/docs/UX Patterns/Table/Cell Text @@ -1,15 +1 @@ -# Table Cells -### Text - -Text cells support 1 or 2 lines of text. Single-line text cells are typically used for concise information like names, identifiers, or short labels. Two-line text cells are used when additional context is needed and can include entry type or ID, allowing for more detailed information without consuming excessive space. - -[Insert 2 lines example] - -#### Case - -We use sentence case for everything except for titles, which use title case. Exceptions are allowed based on a specific project requirements. - -#### Truncating Long names - -[Insert Example] From 2cc57f254ddf06b86f3ec3f9fb09553b007f0cbc Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 12:59:52 -0400 Subject: [PATCH 11/45] Rename Cell Text to Cell Text.mdx --- docs/UX Patterns/Table/{Cell Text => Cell Text.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/UX Patterns/Table/{Cell Text => Cell Text.mdx} (100%) diff --git a/docs/UX Patterns/Table/Cell Text b/docs/UX Patterns/Table/Cell Text.mdx similarity index 100% rename from docs/UX Patterns/Table/Cell Text rename to docs/UX Patterns/Table/Cell Text.mdx From e6d48e4509208feed55a8b02a4bdd3af7a046b1f Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:00:07 -0400 Subject: [PATCH 12/45] Update Cell Text.mdx --- docs/UX Patterns/Table/Cell Text.mdx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/UX Patterns/Table/Cell Text.mdx b/docs/UX Patterns/Table/Cell Text.mdx index 8b1378917..add9d8b36 100644 --- a/docs/UX Patterns/Table/Cell Text.mdx +++ b/docs/UX Patterns/Table/Cell Text.mdx @@ -1 +1,16 @@ +# Table Cells + +### Text + +Text cells support 1 or 2 lines of text. Single-line text cells are typically used for concise information like names, identifiers, or short labels. Two-line text cells are used when additional context is needed and can include entry type or ID, allowing for more detailed information without consuming excessive space. + +[Insert 2 lines example] + +#### Case + +We use sentence case for everything except for titles, which use title case. Exceptions are allowed based on a specific project requirements. + +#### Truncating Long names + +[Insert Example] From bd96980107afe6b358487408ee80767ffad10f14 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:00:54 -0400 Subject: [PATCH 13/45] Create Cell Numbers.mdx --- docs/UX Patterns/Table/Cell Numbers | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/UX Patterns/Table/Cell Numbers diff --git a/docs/UX Patterns/Table/Cell Numbers b/docs/UX Patterns/Table/Cell Numbers new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/UX Patterns/Table/Cell Numbers @@ -0,0 +1 @@ + From 68b7b5d3234ee75ff693c521f6d207acf5782832 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:01:14 -0400 Subject: [PATCH 14/45] Rename Cell Numbers to Cell Numbers.mdx --- docs/UX Patterns/Table/{Cell Numbers => Cell Numbers.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/UX Patterns/Table/{Cell Numbers => Cell Numbers.mdx} (100%) diff --git a/docs/UX Patterns/Table/Cell Numbers b/docs/UX Patterns/Table/Cell Numbers.mdx similarity index 100% rename from docs/UX Patterns/Table/Cell Numbers rename to docs/UX Patterns/Table/Cell Numbers.mdx From ffb0eb6c1b36239db9024c923d4c5e4d7fcefaed Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:03:24 -0400 Subject: [PATCH 15/45] Update and rename Cell Numbers.mdx to Date and Time.mdx --- docs/UX Patterns/Table/Cell Numbers.mdx | 1 - docs/UX Patterns/Table/Date and Time.mdx | 5 +++++ 2 files changed, 5 insertions(+), 1 deletion(-) delete mode 100644 docs/UX Patterns/Table/Cell Numbers.mdx create mode 100644 docs/UX Patterns/Table/Date and Time.mdx diff --git a/docs/UX Patterns/Table/Cell Numbers.mdx b/docs/UX Patterns/Table/Cell Numbers.mdx deleted file mode 100644 index 8b1378917..000000000 --- a/docs/UX Patterns/Table/Cell Numbers.mdx +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/UX Patterns/Table/Date and Time.mdx b/docs/UX Patterns/Table/Date and Time.mdx new file mode 100644 index 000000000..84d6df599 --- /dev/null +++ b/docs/UX Patterns/Table/Date and Time.mdx @@ -0,0 +1,5 @@ +# Table Cells + +### Numbers + + From 31257c740febe47ead8f136ae3b07ebc3825116b Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:32:10 -0400 Subject: [PATCH 16/45] Update Date and Time.mdx --- docs/UX Patterns/Table/Date and Time.mdx | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/UX Patterns/Table/Date and Time.mdx b/docs/UX Patterns/Table/Date and Time.mdx index 84d6df599..c25695a96 100644 --- a/docs/UX Patterns/Table/Date and Time.mdx +++ b/docs/UX Patterns/Table/Date and Time.mdx @@ -1,5 +1,25 @@ # Table Cells -### Numbers +### Date and Time + +To ensure clarity for both US and EU audiences, all dates and times should follow a standard global format. All times are displayed in UTC. + +#### Do + +- Date: MMM DD, YYYY (e.g., Sep 12, 2024), which removes any ambiguity between US (MM/DD) and EU (DD/MM) formats. +- Time Zone: UTC (displayed once, somewhere visible on the screen). + +| Event | Start Date (UTC) | End Date (UTC) | +|-----------------|------------------|----------------| +| Product Launch | Sep 12, 2024 | Sep 14, 2024 | +| Black Friday | Nov 29, 2024 | Nov 29, 2024 | + +#### Don't +- **Mix Date Formats**: Do not use different formats such as `MM/DD/YYYY` (e.g., 09/12/2024, which could be interpreted as either September 12 or December 9) or `DD/MM/YYYY` (e.g., 12/09/2024, which can also cause confusion). Stick to the global format `MMM DD, YYYY` (e.g., Sep 12, 2024). +- **Omit the Time Zone**: Never omit the time zone when displaying times, especially when it might lead to user confusion. Example: Instead of just showing "14:30", show "14:30 UTC". +- **Repeat UTC for Each Entry**: Avoid repeating "UTC" in every row of a table or list. Example: Instead of labeling every row "Sep 12, 2024 (UTC)", use a clear table header like `Date (UTC)` to indicate the time zone for all rows. + + + From 0eaa7bfb1dcd4555ccd6815f6d2b7134e5dcc5c9 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:34:27 -0400 Subject: [PATCH 17/45] Update Date and Time.mdx --- docs/UX Patterns/Table/Date and Time.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/UX Patterns/Table/Date and Time.mdx b/docs/UX Patterns/Table/Date and Time.mdx index c25695a96..011cfa219 100644 --- a/docs/UX Patterns/Table/Date and Time.mdx +++ b/docs/UX Patterns/Table/Date and Time.mdx @@ -14,6 +14,7 @@ To ensure clarity for both US and EU audiences, all dates and times should follo | Product Launch | Sep 12, 2024 | Sep 14, 2024 | | Black Friday | Nov 29, 2024 | Nov 29, 2024 | +[Insert link: Displaying a link in a date picker] #### Don't - **Mix Date Formats**: Do not use different formats such as `MM/DD/YYYY` (e.g., 09/12/2024, which could be interpreted as either September 12 or December 9) or `DD/MM/YYYY` (e.g., 12/09/2024, which can also cause confusion). Stick to the global format `MMM DD, YYYY` (e.g., Sep 12, 2024). - **Omit the Time Zone**: Never omit the time zone when displaying times, especially when it might lead to user confusion. Example: Instead of just showing "14:30", show "14:30 UTC". From b09616501ea27550180148f8ef49f3dcc47052fe Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:35:49 -0400 Subject: [PATCH 18/45] Update Date and Time.mdx --- docs/UX Patterns/Table/Date and Time.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/UX Patterns/Table/Date and Time.mdx b/docs/UX Patterns/Table/Date and Time.mdx index 011cfa219..9e11f2fa9 100644 --- a/docs/UX Patterns/Table/Date and Time.mdx +++ b/docs/UX Patterns/Table/Date and Time.mdx @@ -11,8 +11,8 @@ To ensure clarity for both US and EU audiences, all dates and times should follo | Event | Start Date (UTC) | End Date (UTC) | |-----------------|------------------|----------------| -| Product Launch | Sep 12, 2024 | Sep 14, 2024 | -| Black Friday | Nov 29, 2024 | Nov 29, 2024 | +| Product Launch | Sep 12, 2024 | Sep 14, 2024 | +| Black Friday | Nov 29, 2024 | Nov 29, 2024 | [Insert link: Displaying a link in a date picker] #### Don't From 8b2a93d43ddcbfa533ee34be9bf7c87abbd69923 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:37:44 -0400 Subject: [PATCH 19/45] Update Cell Text.mdx --- docs/UX Patterns/Table/Cell Text.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/UX Patterns/Table/Cell Text.mdx b/docs/UX Patterns/Table/Cell Text.mdx index add9d8b36..c7129137a 100644 --- a/docs/UX Patterns/Table/Cell Text.mdx +++ b/docs/UX Patterns/Table/Cell Text.mdx @@ -12,5 +12,10 @@ We use sentence case for everything except for titles, which use title case. Exc #### Truncating Long names +Column with most dynamic and longest copy to typically have flexible. When needed implement cell truncation by ending the text with ellipses and display the full text in a tooltip upon hovering. + [Insert Example] +#### Cell Alligment +Text content within table cells is typically left-aligned to enhance readability and allow for easier scanning of information. + From a447504a6f6a07f6bcb81cff461e2773294a65a9 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:42:43 -0400 Subject: [PATCH 20/45] Rename Cell Tag.mdx to Cell Status.mdx --- docs/UX Patterns/Table/{Cell Tag.mdx => Cell Status.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/UX Patterns/Table/{Cell Tag.mdx => Cell Status.mdx} (100%) diff --git a/docs/UX Patterns/Table/Cell Tag.mdx b/docs/UX Patterns/Table/Cell Status.mdx similarity index 100% rename from docs/UX Patterns/Table/Cell Tag.mdx rename to docs/UX Patterns/Table/Cell Status.mdx From 59ebafd244639fe4197f0e64eb8b5288a780bb65 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:43:50 -0400 Subject: [PATCH 21/45] Update Cell Status.mdx --- docs/UX Patterns/Table/Cell Status.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/UX Patterns/Table/Cell Status.mdx b/docs/UX Patterns/Table/Cell Status.mdx index 8b1378917..e7095f4c9 100644 --- a/docs/UX Patterns/Table/Cell Status.mdx +++ b/docs/UX Patterns/Table/Cell Status.mdx @@ -1 +1,4 @@ + + +Always use badge components for system status. Reserve tags for actual tags, labels, and environment descriptions (e.g., prod, dev). This ensures clear visual distinction between different information types. From 5c633700f7060b60f3623a1952d581b1938438ba Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:46:00 -0400 Subject: [PATCH 22/45] Update Cell Status.mdx --- docs/UX Patterns/Table/Cell Status.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/UX Patterns/Table/Cell Status.mdx b/docs/UX Patterns/Table/Cell Status.mdx index e7095f4c9..b93db5975 100644 --- a/docs/UX Patterns/Table/Cell Status.mdx +++ b/docs/UX Patterns/Table/Cell Status.mdx @@ -1,4 +1,5 @@ +# Table Cells - +### Status Always use badge components for system status. Reserve tags for actual tags, labels, and environment descriptions (e.g., prod, dev). This ensures clear visual distinction between different information types. From 22c623f33b855820b8d96ec0a298967af6b2955b Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:47:54 -0400 Subject: [PATCH 23/45] Update Cell Status.mdx --- docs/UX Patterns/Table/Cell Status.mdx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/UX Patterns/Table/Cell Status.mdx b/docs/UX Patterns/Table/Cell Status.mdx index b93db5975..1c0c4eae2 100644 --- a/docs/UX Patterns/Table/Cell Status.mdx +++ b/docs/UX Patterns/Table/Cell Status.mdx @@ -3,3 +3,14 @@ ### Status Always use badge components for system status. Reserve tags for actual tags, labels, and environment descriptions (e.g., prod, dev). This ensures clear visual distinction between different information types. + +####Do + + +####Don't + +### Cell Aligment + +Statuses are left-aligned to create a cohesive and organized table layout. + + From cac999a4d457de265cbb6e3ff6e19ead8c684ed6 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 13:48:42 -0400 Subject: [PATCH 24/45] Update Cell Status.mdx --- docs/UX Patterns/Table/Cell Status.mdx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/UX Patterns/Table/Cell Status.mdx b/docs/UX Patterns/Table/Cell Status.mdx index 1c0c4eae2..5d5df45ef 100644 --- a/docs/UX Patterns/Table/Cell Status.mdx +++ b/docs/UX Patterns/Table/Cell Status.mdx @@ -4,10 +4,14 @@ Always use badge components for system status. Reserve tags for actual tags, labels, and environment descriptions (e.g., prod, dev). This ensures clear visual distinction between different information types. -####Do +#### Do + -####Don't + +#### Don't + + ### Cell Aligment From b2b4cb40bf90a019375970b44ff077da17b71c00 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 14:03:31 -0400 Subject: [PATCH 25/45] Update Documentation.mdx --- docs/UX Patterns/Table/Documentation.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/UX Patterns/Table/Documentation.mdx b/docs/UX Patterns/Table/Documentation.mdx index bf8c4ec9a..64ec5cee5 100644 --- a/docs/UX Patterns/Table/Documentation.mdx +++ b/docs/UX Patterns/Table/Documentation.mdx @@ -21,11 +21,11 @@ Use pagination in tables to improve performance and reduce load times by fetchin ##### Cell Types Table cells support various formats and are designed to display data in clear, readable ways. -- Numbers (Coming Soon) + - Date / Time (Coming Soon) +- Text - CTA Buttons (Coming Soon) -- Status Badges (Coming Soon) -- Links (Coming Soon) +- Status (Coming Soon) - Tags (Coming Soon) - More Actions (Coming Soon) From 9a79528c9a18632b70a451e571eff4e6d2f4fbac Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 14:08:55 -0400 Subject: [PATCH 26/45] Rename Cell Badge.mdx to Cell CTA.mdx --- docs/UX Patterns/Table/{Cell Badge.mdx => Cell CTA.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/UX Patterns/Table/{Cell Badge.mdx => Cell CTA.mdx} (100%) diff --git a/docs/UX Patterns/Table/Cell Badge.mdx b/docs/UX Patterns/Table/Cell CTA.mdx similarity index 100% rename from docs/UX Patterns/Table/Cell Badge.mdx rename to docs/UX Patterns/Table/Cell CTA.mdx From c22fabc84d5bd820c1119639d10fb7bb4383d8f3 Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 14:14:29 -0400 Subject: [PATCH 27/45] Update Cell Link.mdx --- docs/UX Patterns/Table/Cell Link.mdx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/UX Patterns/Table/Cell Link.mdx b/docs/UX Patterns/Table/Cell Link.mdx index ad9acf92a..4865417be 100644 --- a/docs/UX Patterns/Table/Cell Link.mdx +++ b/docs/UX Patterns/Table/Cell Link.mdx @@ -1 +1,11 @@ ![](../../assets/test.png) + +#### When to use: +##### Text Links: +Use the Link component to navigate to other pages, sections, or external resources. +##### Call-to-Actions (CTAs): + +Links that serve as action triggers, like "Activate", should also follow these styles. +##### Buttons vs Links: + +Use links for navigation and "More Actions" menu or a buttons for actions. From 03d4aedcd3941e8b673e012b2abb983b5ab5915f Mon Sep 17 00:00:00 2001 From: soniakose Date: Fri, 18 Oct 2024 14:15:14 -0400 Subject: [PATCH 28/45] Update Cell Link.mdx --- docs/UX Patterns/Table/Cell Link.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/UX Patterns/Table/Cell Link.mdx b/docs/UX Patterns/Table/Cell Link.mdx index 4865417be..463875f76 100644 --- a/docs/UX Patterns/Table/Cell Link.mdx +++ b/docs/UX Patterns/Table/Cell Link.mdx @@ -1,8 +1,11 @@ ![](../../assets/test.png) +# Table Cells + +### Links #### When to use: ##### Text Links: -Use the Link component to navigate to other pages, sections, or external resources. +Use the Link component [Insert Link] to navigate to other pages, sections, or external resources. ##### Call-to-Actions (CTAs): Links that serve as action triggers, like "Activate", should also follow these styles. From 28a39eca0086b0c89b8ae88138ad4bb574b02b09 Mon Sep 17 00:00:00 2001 From: soniakose Date: Wed, 23 Oct 2024 13:30:09 -0400 Subject: [PATCH 29/45] Update Colors.mdx --- docs/Foundations/Colors.mdx | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/docs/Foundations/Colors.mdx b/docs/Foundations/Colors.mdx index 343a77976..d5d5cc436 100644 --- a/docs/Foundations/Colors.mdx +++ b/docs/Foundations/Colors.mdx @@ -1,3 +1,31 @@ # Colors -TBD \ No newline at end of file +### Brand Colors + +#### Primary +These represent the core identity of the brand and are used to focus the user on core actions, such as primary buttons, navigation elements, and key call-to-actions. + + +| Preview | Token Name | Color Name | Hex Code | +|---------|--------------------------------------|-----------------|-----------| +|
| `--Colors-mpTokens-mpBrandPrimary-1` | Brand Primary | `#F8F6FB` | +|
| `--Colors-mpTokens-mpBrandPrimary-2` | Brand Primary 2 | `#EBE8F8` | +|
| `--Colors-mpTokens-mpBrandPrimary-3` | Brand Primary 3 | `#DBCEFF` | +|
| `--Colors-mpTokens-mpBrandPrimary-4` | Brand Primary 4 | `#C3AEFF` | +|
| `--Colors-mpTokens-mpBrandPrimary-5` | Brand Primary 5 | `#AB8EFF` | + +#### Secondary +These colors complement the primary palette and are used to support the primary actions without drawing too much attention, typically applied to backgrounds, borders, and secondary UI components. + + + + + + + + + + + +Border Colors: Colors used for UI borders, such as disabled states. +Icon Colors: Colors applied to icons, including strong and brand variations. From d5548604241296d6da2d80efb473d66c4cf1e3ce Mon Sep 17 00:00:00 2001 From: soniakose Date: Thu, 31 Oct 2024 14:29:02 -0400 Subject: [PATCH 30/45] Update Colors.mdx --- docs/Foundations/Colors.mdx | 32 +++++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/docs/Foundations/Colors.mdx b/docs/Foundations/Colors.mdx index d5d5cc436..e25ef8d63 100644 --- a/docs/Foundations/Colors.mdx +++ b/docs/Foundations/Colors.mdx @@ -5,18 +5,34 @@ #### Primary These represent the core identity of the brand and are used to focus the user on core actions, such as primary buttons, navigation elements, and key call-to-actions. +| Preview | Token Name | Color Name | Hex Code | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------|------------| +|
| `--Colors-mpTokens-mpBrandPrimary-1` | Brand Primary | `#F8F6FB` | +|
| `--Colors-mpTokens-mpBrandPrimary-2` | Brand Primary 2 | `#EBE8F8` | +|
| `--Colors-mpTokens-mpBrandPrimary-3` | Brand Primary 3 | `#DBCEFF` | +|
| `--Colors-mpTokens-mpBrandPrimary-4` | Brand Primary 4 | `#C3AEFF` | +|
| `--Colors-mpTokens-mpBrandPrimary-5` | Brand Primary 5 | `#AB8EFF` | +|
| `--Colors-mpTokens-mpBrandPrimary-6` | Brand Primary 6 | `#8255FF` | +|
| `--Colors-mpTokens-mpBrandPrimary-7` | Brand Primary 7 | `#5F29F8` | +|
| `--Colors-mpTokens-mpBrandPrimary-8` | Brand Primary 8 | `#3600D1` | +|
| `--Colors-mpTokens-mpBrandPrimary-9` | Brand Primary 9 | `#2C00AA` | +|
| `--Colors-mpTokens-mpBrandPrimary-10`| Brand Primary 10 | `#20007A` | -| Preview | Token Name | Color Name | Hex Code | -|---------|--------------------------------------|-----------------|-----------| -|
| `--Colors-mpTokens-mpBrandPrimary-1` | Brand Primary | `#F8F6FB` | -|
| `--Colors-mpTokens-mpBrandPrimary-2` | Brand Primary 2 | `#EBE8F8` | -|
| `--Colors-mpTokens-mpBrandPrimary-3` | Brand Primary 3 | `#DBCEFF` | -|
| `--Colors-mpTokens-mpBrandPrimary-4` | Brand Primary 4 | `#C3AEFF` | -|
| `--Colors-mpTokens-mpBrandPrimary-5` | Brand Primary 5 | `#AB8EFF` | #### Secondary These colors complement the primary palette and are used to support the primary actions without drawing too much attention, typically applied to backgrounds, borders, and secondary UI components. +| Preview | Token Name | Color Name | Hex Code | +|----------------------------------------------------------------------------------------------------|---------------------------------------|---------------------|------------| +|
| `--Colors-mpTokens-mpBrandSecondary-2` | Brand Secondary 2 | `#FAF9F8` | +|
| `--Colors-mpTokens-mpBrandSecondary-3` | Brand Secondary 3 | `#ECEAE9` | +|
| `--Colors-mpTokens-mpBrandSecondary-4` | Brand Secondary 4 | `#DCDCD8` | +|
| `--Colors-mpTokens-mpBrandSecondary-5` | Brand Secondary 5 | `#BABBB5` | +|
| `--Colors-mpTokens-mpBrandSecondary-6` | Brand Secondary 6 | `#717368` | +|
| `--Colors-mpTokens-mpBrandSecondary-7` | Brand Secondary 7 | `#505249` | +|
| `--Colors-mpTokens-mpBrandSecondary-8` | Brand Secondary 8 | `#2C2D2B` | +|
| `--Colors-mpTokens-mpBrandSecondary-9` | Brand Secondary 9 | `#212020` | +|
| `--Colors-mpTokens-mpBrandSecondary-10`| Brand Secondary 10 | `#0F0E0E` | @@ -27,5 +43,3 @@ These colors complement the primary palette and are used to support the primary -Border Colors: Colors used for UI borders, such as disabled states. -Icon Colors: Colors applied to icons, including strong and brand variations. From 9eef872c6bb43c379a190af160d69d6df4872626 Mon Sep 17 00:00:00 2001 From: soniakose Date: Thu, 31 Oct 2024 14:33:53 -0400 Subject: [PATCH 31/45] Create Foundational Palette.mdx --- docs/Foundations/Foundational Pallette.mdx | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/Foundations/Foundational Pallette.mdx diff --git a/docs/Foundations/Foundational Pallette.mdx b/docs/Foundations/Foundational Pallette.mdx new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/docs/Foundations/Foundational Pallette.mdx @@ -0,0 +1 @@ + From 98513508d0680eb99543b6eb93c75304e12e616e Mon Sep 17 00:00:00 2001 From: soniakose Date: Thu, 31 Oct 2024 14:35:43 -0400 Subject: [PATCH 32/45] Update Foundational Pallette.mdx --- docs/Foundations/Foundational Pallette.mdx | 47 ++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/docs/Foundations/Foundational Pallette.mdx b/docs/Foundations/Foundational Pallette.mdx index 8b1378917..456db5f53 100644 --- a/docs/Foundations/Foundational Pallette.mdx +++ b/docs/Foundations/Foundational Pallette.mdx @@ -1 +1,48 @@ +Blue Colors +markdown +Copy code +| Preview | Token Name | Color Name | Hex Code | +|----------------------------------------------------------------------------------------------------|---------------------------------------|---------------------|------------| +|
| `--Colors-Base-Blue-1` | Base Blue 1 | `#E6F4FF` | +|
| `--Colors-Base-Blue-2` | Base Blue 2 | `#BAE0FF` | +|
| `--Colors-Base-Blue-3` | Base Blue 3 | `#91CAFF` | +|
| `--Colors-Base-Blue-4` | Base Blue 4 | `#69B1FF` | +|
| `--Colors-Base-Blue-5` | Base Blue 5 | `#4096FF` | +|
| `--Colors-Base-Blue-6` | Base Blue 6 | `#1677FF` | +|
| `--Colors-Base-Blue-7` | Base Blue 7 | `#0958D9` | +|
| `--Colors-Base-Blue-8` | Base Blue 8 | `#003EB3` | +|
| `--Colors-Base-Blue-9` | Base Blue 9 | `#002C8C` | +|
| `--Colors-Base-Cyan-1` | Base Cyan 1 | `#E6FFFB` | +|
| `--Colors-Base-Cyan-2` | Base Cyan 2 | `#B5F5EC` | +|
| `--Colors-Base-Cyan-3` | Base Cyan 3 | `#87E8DE` | +|
| `--Colors-Base-Cyan-4` | Base Cyan 4 | `#5CDBD3` | +|
| `--Colors-Base-Cyan-5` | Base Cyan 5 | `#36CFC9` | +|
| `--Colors-Base-Cyan-6` | Base Cyan 6 | `#13C2C2` | +|
| `--Colors-Base-Cyan-7` | Base Cyan 7 | `#08979C` | +|
| `--Colors-Base-Cyan-8` | Base Cyan 8 | `#006D75` | +|
| `--Colors-Base-Cyan-9` | Base Cyan 9 | `#00474F` | +|
| `--Colors-Base-Cyan-10` | Base Cyan 10 | `#002329` | + +Geek Blue Colors +markdown +Copy code +| Preview | Token Name | Color Name | Hex Code | +|----------------------------------------------------------------------------------------------------|---------------------------------------|---------------------|------------| +|
| `--Colors-Base-Geekblue-1` | Base Geekblue 1 | `#F0F5FF` | +|
| `--Colors-Base-Geekblue-2` | Base Geekblue 2 | `#D6E4FF` | +|
| `--Colors-Base-Geekblue-3` | Base Geekblue 3 | `#ADC6FF` | +|
| `--Colors-Base-Geekblue-4` | Base Geekblue 4 | `#85A5FF` | +|
| `--Colors-Base-Geekblue-5` | Base Geekblue 5 | `#597EF7` | +|
| `--Colors-Base-Geekblue-6` | Base Geekblue 6 | `#2F54EB` | +|
| `--Colors-Base-Geekblue-7` | Base Geekblue 7 | `#1D39C4` | +|
| `--Colors-Base-Geekblue-8` | Base Geekblue 8 | `#10239E` | +|
| `--Colors-Base-Geekblue-9` | Base Geekblue 9 | `#061178` | +|
| `--Colors-mpTokens-mpBrandPrimary-1` | Brand Primary | `#F8F6FB` | -|
| `--Colors-mpTokens-mpBrandPrimary-2` | Brand Primary 2 | `#EBE8F8` | -|
| `--Colors-mpTokens-mpBrandPrimary-3` | Brand Primary 3 | `#DBCEFF` | -|
| `--Colors-mpTokens-mpBrandPrimary-4` | Brand Primary 4 | `#C3AEFF` | -|
| `--Colors-mpTokens-mpBrandPrimary-5` | Brand Primary 5 | `#AB8EFF` | -|
| `--Colors-mpTokens-mpBrandPrimary-6` | Brand Primary 6 | `#8255FF` | -|
| `--Colors-mpTokens-mpBrandPrimary-7` | Brand Primary 7 | `#5F29F8` | -|
| `--Colors-mpTokens-mpBrandPrimary-8` | Brand Primary 8 | `#3600D1` | -|
| `--Colors-mpTokens-mpBrandPrimary-9` | Brand Primary 9 | `#2C00AA` | -|
| `--Colors-mpTokens-mpBrandPrimary-10`| Brand Primary 10 | `#20007A` | +| Hex Code | Token Name | Color Name | +|---------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#F8F6FB` | `--Colors-mpTokens-mpBrandPrimary-1` | Brand Primary 1 | +|
`#EBE8F8` | `--Colors-mpTokens-mpBrandPrimary-2` | Brand Primary 2 | +|
`#DBCEFF` | `--Colors-mpTokens-mpBrandPrimary-3` | Brand Primary 3 | +|
`#C3AEFF` | `--Colors-mpTokens-mpBrandPrimary-4` | Brand Primary 4 | +|
`#AB8EFF` | `--Colors-mpTokens-mpBrandPrimary-5` | Brand Primary 5 | +|
`#8255FF` | `--Colors-mpTokens-mpBrandPrimary-6` | Brand Primary 6 | +|
`#5F29F8` | `--Colors-mpTokens-mpBrandPrimary-7` | Brand Primary 7 | +|
`#3600D1` | `--Colors-mpTokens-mpBrandPrimary-8` | Brand Primary 8 | +|
`#2C00AA` | `--Colors-mpTokens-mpBrandPrimary-9` | Brand Primary 9 | +|
`#20007A` | `--Colors-mpTokens-mpBrandPrimary-10`| Brand Primary 10 | + #### Secondary These colors complement the primary palette and are used to support the primary actions without drawing too much attention, typically applied to backgrounds, borders, and secondary UI components. -| Preview | Token Name | Color Name | Hex Code | -|----------------------------------------------------------------------------------------------------|---------------------------------------|---------------------|------------| -|
| `--Colors-mpTokens-mpBrandSecondary-2` | Brand Secondary 2 | `#FAF9F8` | -|
| `--Colors-mpTokens-mpBrandSecondary-3` | Brand Secondary 3 | `#ECEAE9` | -|
| `--Colors-mpTokens-mpBrandSecondary-4` | Brand Secondary 4 | `#DCDCD8` | -|
| `--Colors-mpTokens-mpBrandSecondary-5` | Brand Secondary 5 | `#BABBB5` | -|
| `--Colors-mpTokens-mpBrandSecondary-6` | Brand Secondary 6 | `#717368` | -|
| `--Colors-mpTokens-mpBrandSecondary-7` | Brand Secondary 7 | `#505249` | -|
| `--Colors-mpTokens-mpBrandSecondary-8` | Brand Secondary 8 | `#2C2D2B` | -|
| `--Colors-mpTokens-mpBrandSecondary-9` | Brand Secondary 9 | `#212020` | -|
| `--Colors-mpTokens-mpBrandSecondary-10`| Brand Secondary 10 | `#0F0E0E` | +| Hex Code | Token Name | Color Name | +|---------------------------------------------------------------------------------------------------|---------------------------------------|---------------------| +|
`#FAF9F8` | `--Colors-mpTokens-mpBrandSecondary-2` | Brand Secondary 2 | +|
`#ECEAE9` | `--Colors-mpTokens-mpBrandSecondary-3` | Brand Secondary 3 | +|
`#DCDCD8` | `--Colors-mpTokens-mpBrandSecondary-4` | Brand Secondary 4 | +|
`#BABBB5` | `--Colors-mpTokens-mpBrandSecondary-5` | Brand Secondary 5 | +|
`#717368` | `--Colors-mpTokens-mpBrandSecondary-6` | Brand Secondary 6 | +|
`#505249` | `--Colors-mpTokens-mpBrandSecondary-7` | Brand Secondary 7 | +|
`#2C2D2B` | `--Colors-mpTokens-mpBrandSecondary-8` | Brand Secondary 8 | +|
`#212020` | `--Colors-mpTokens-mpBrandSecondary-9` | Brand Secondary 9 | +|
`#0F0E0E` | `--Colors-mpTokens-mpBrandSecondary-10`| Brand Secondary 10 | From 741946bc8f3c362fae392ce938ac49a083ab5310 Mon Sep 17 00:00:00 2001 From: soniakose Date: Thu, 31 Oct 2024 15:34:32 -0400 Subject: [PATCH 36/45] Update and rename Foundational Pallette.mdx to Base Palette.mdx --- docs/Foundations/Base Palette.mdx | 179 +++++++++++++++++++++ docs/Foundations/Foundational Pallette.mdx | 48 ------ 2 files changed, 179 insertions(+), 48 deletions(-) create mode 100644 docs/Foundations/Base Palette.mdx delete mode 100644 docs/Foundations/Foundational Pallette.mdx diff --git a/docs/Foundations/Base Palette.mdx b/docs/Foundations/Base Palette.mdx new file mode 100644 index 000000000..9156a06af --- /dev/null +++ b/docs/Foundations/Base Palette.mdx @@ -0,0 +1,179 @@ +### Blue + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#E6F4FF` | `--Colors-Base-Blue-1` | Base Blue 1 | +|
`#BAE0FF` | `--Colors-Base-Blue-2` | Base Blue 2 | +|
`#91CAFF` | `--Colors-Base-Blue-3` | Base Blue 3 | +|
`#69B1FF` | `--Colors-Base-Blue-4` | Base Blue 4 | +|
`#4096FF` | `--Colors-Base-Blue-5` | Base Blue 5 | +|
`#1677FF` | `--Colors-Base-Blue-6` | Base Blue 6 | +|
`#0958D9` | `--Colors-Base-Blue-7` | Base Blue 7 | +|
`#003EB3` | `--Colors-Base-Blue-8` | Base Blue 8 | +|
`#002C8C` | `--Colors-Base-Blue-9` | Base Blue 9 | +|
`#001D66` | `--Colors-Base-Blue-10` | Base Blue 10 | + +### Cyan + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#E6FFFB` | `--Colors-Base-Cyan-1` | Base Cyan 1 | +|
`#B5F5EC` | `--Colors-Base-Cyan-2` | Base Cyan 2 | +|
`#87E8DE` | `--Colors-Base-Cyan-3` | Base Cyan 3 | +|
`#5CDBD3` | `--Colors-Base-Cyan-4` | Base Cyan 4 | +|
`#36CFC9` | `--Colors-Base-Cyan-5` | Base Cyan 5 | +|
`#13C2C2` | `--Colors-Base-Cyan-6` | Base Cyan 6 | +|
`#08979C` | `--Colors-Base-Cyan-7` | Base Cyan 7 | +|
`#006D75` | `--Colors-Base-Cyan-8` | Base Cyan 8 | +|
`#00474F` | `--Colors-Base-Cyan-9` | Base Cyan 9 | +|
`#002329` | `--Colors-Base-Cyan-10` | Base Cyan 10 | + +### Geek Blue + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#F0F5FF` | `--Colors-Base-Geekblue-1` | Base Geek Blue 1 | +|
`#D6E4FF` | `--Colors-Base-Geekblue-2` | Base Geek Blue 2 | +|
`#ADC6FF` | `--Colors-Base-Geekblue-3` | Base Geek Blue 3 | +|
`#85A5FF` | `--Colors-Base-Geekblue-4` | Base Geek Blue 4 | +|
`#597EF7` | `--Colors-Base-Geekblue-5` | Base Geek Blue 5 | +|
`#2F54EB` | `--Colors-Base-Geekblue-6` | Base Geek Blue 6 | +|
`#1D39C4` | `--Colors-Base-Geekblue-7` | Base Geek Blue 7 | +|
`#10239E` | `--Colors-Base-Geekblue-8` | Base Geek Blue 8 | +|
`#061178` | `--Colors-Base-Geekblue-9` | Base Geek Blue 9 | +|
`#030852` | `--Colors-Base-Geekblue-10` | Base Geek Blue 10 | + +### Gold + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#FFFBE6` | `--Colors-Base-Gold-1` | Base Gold 1 | +|
`#FFF1B8` | `--Colors-Base-Gold-2` | Base Gold 2 | +|
`#FFE58F` | `--Colors-Base-Gold-3` | Base Gold 3 | +|
`#FFD666` | `--Colors-Base-Gold-4` | Base Gold 4 | +|
`#FFC53D` | `--Colors-Base-Gold-5` | Base Gold 5 | +|
`#FAAD14` | `--Colors-Base-Gold-6` | Base Gold 6 | +|
`#D48806` | `--Colors-Base-Gold-7` | Base Gold 7 | +|
`#AD6800` | `--Colors-Base-Gold-8` | Base Gold 8 | +|
`#874D00` | `--Colors-Base-Gold-9` | Base Gold 9 | +|
`#613400` | `--Colors-Base-Gold-10` | Base Gold 10 | + +### Green + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#F6FFED` | `--Colors-Base-Green-1` | Base Green 1 | +|
`#D9F7BE` | `--Colors-Base-Green-2` | Base Green 2 | +|
`#B7EB8F` | `--Colors-Base-Green-3` | Base Green 3 | +|
`#95DE64` | `--Colors-Base-Green-4` | Base Green 4 | +|
`#73D13D` | `--Colors-Base-Green-5` | Base Green 5 | +|
`#52C41A` | `--Colors-Base-Green-6` | Base Green 6 | +|
`#389E0D` | `--Colors-Base-Green-7` | Base Green 7 | +|
`#237804` | `--Colors-Base-Green-8` | Base Green 8 | +|
`#135200` | `--Colors-Base-Green-9` | Base Green 9 | +|
`#092B00` | `--Colors-Base-Green-10` | Base Green 10 | + +### Lime + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#FCFFE6` | `--Colors-Base-Lime-1` | Base Lime 1 | +|
`#F4FFB8` | `--Colors-Base-Lime-2` | Base Lime 2 | +|
`#EAFF8F` | `--Colors-Base-Lime-3` | Base Lime 3 | +|
`#D3F261` | `--Colors-Base-Lime-4` | Base Lime 4 | +|
`#BAE637` | `--Colors-Base-Lime-5` | Base Lime 5 | +|
`#A0D911` | `--Colors-Base-Lime-6` | Base Lime 6 | +|
`#7CB305` | `--Colors-Base-Lime-7` | Base Lime 7 | +|
`#5B8C00` | `--Colors-Base-Lime-8` | Base Lime 8 | +|
`#3F6600` | `--Colors-Base-Lime-9` | Base Lime 9 | +|
`#254000` | `--Colors-Base-Lime-10` | Base Lime 10 | + +### Magenta + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#FFF0F6` | `--Colors-Base-Magenta-1` | Base Magenta 1 | +|
`#FFD6E7` | `--Colors-Base-Magenta-2` | Base Magenta 2 | +|
`#FFADD2` | `--Colors-Base-Magenta-3` | Base Magenta 3 | +|
`#FF85C0` | `--Colors-Base-Magenta-4` | Base Magenta 4 | +|
`#F759AB` | `--Colors-Base-Magenta-5` | Base Magenta 5 | +|
`#EB2F96` | `--Colors-Base-Magenta-6` | Base Magenta 6 | +|
`#C41D7F` | `--Colors-Base-Magenta-7` | Base Magenta 7 | +|
`#9E1068` | `--Colors-Base-Magenta-8` | Base Magenta 8 | +|
`#780650` | `--Colors-Base-Magenta-9` | Base Magenta 9 | +|
`#520339` | `--Colors-Base-Magenta-10` | Base Magenta 10 | + +### Orange + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#FFF7E6` | `--Colors-Base-Orange-1` | Base Orange 1 | +|
`#FFE7BA` | `--Colors-Base-Orange-2` | Base Orange 2 | +|
`#FFD591` | `--Colors-Base-Orange-3` | Base Orange 3 | +|
`#FFC069` | `--Colors-Base-Orange-4` | Base Orange 4 | +|
`#FFA940` | `--Colors-Base-Orange-5` | Base Orange 5 | +|
`#FA8C16` | `--Colors-Base-Orange-6` | Base Orange 6 | +|
`#D46B08` | `--Colors-Base-Orange-7` | Base Orange 7 | +|
`#AD4E00` | `--Colors-Base-Orange-8` | Base Orange 8 | +|
`#873800` | `--Colors-Base-Orange-9` | Base Orange 9 | +|
`#612500` | `--Colors-Base-Orange-10` | Base Orange 10 | + +### Purple + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#F9F0FF` | `--Colors-Base-Purple-1` | Base Purple 1 | +|
`#EFDBFF` | `--Colors-Base-Purple-2` | Base Purple 2 | +|
`#D3ADF7` | `--Colors-Base-Purple-3` | Base Purple 3 | +|
`#B37FEB` | `--Colors-Base-Purple-4` | Base Purple 4 | +|
`#9254DE` | `--Colors-Base-Purple-5` | Base Purple 5 | +|
`#722ED1` | `--Colors-Base-Purple-6` | Base Purple 6 | +|
`#531DAB` | `--Colors-Base-Purple-7` | Base Purple 7 | +|
`#391085` | `--Colors-Base-Purple-8` | Base Purple 8 | +|
`#22075E` | `--Colors-Base-Purple-9` | Base Purple 9 | +|
`#120338` | `--Colors-Base-Purple-10` | Base Purple 10 | + +### Red + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#FFF1F0` | `--Colors-Base-Red-1` | Base Red 1 | +|
`#FFCCC7` | `--Colors-Base-Red-2` | Base Red 2 | +|
`#FFA39E` | `--Colors-Base-Red-3` | Base Red 3 | +|
`#FF7875` | `--Colors-Base-Red-4` | Base Red 4 | +|
`#FF4D4F` | `--Colors-Base-Red-5` | Base Red 5 | +|
`#F5222D` | `--Colors-Base-Red-6` | Base Red 6 | +|
`#CF1322` | `--Colors-Base-Red-7` | Base Red 7 | +|
`#A8071A` | `--Colors-Base-Red-8` | Base Red 8 | +|
`#820014` | `--Colors-Base-Red-9` | Base Red 9 | +|
`#5C0011` | `--Colors-Base-Red-10` | Base Red 10 | + +### Volcano + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#FFF2E8` | `--Colors-Base-Volcano-1` | Base Volcano 1 | +|
`#FFD8BF` | `--Colors-Base-Volcano-2` | Base Volcano 2 | +|
`#FFBB96` | `--Colors-Base-Volcano-3` | Base Volcano 3 | +|
`#FF9C6E` | `--Colors-Base-Volcano-4` | Base Volcano 4 | +|
`#FF7A45` | `--Colors-Base-Volcano-5` | Base Volcano 5 | +|
`#FA541C` | `--Colors-Base-Volcano-6` | Base Volcano 6 | +|
`#D4380D` | `--Colors-Base-Volcano-7` | Base Volcano 7 | +|
`#AD2102` | `--Colors-Base-Volcano-8` | Base Volcano 8 | +|
`#871400` | `--Colors-Base-Volcano-9` | Base Volcano 9 | +|
`#610B00` | `--Colors-Base-Volcano-10` | Base Volcano 10 | + +### Yellow + +| Hex Code | Token Name | Color Name | +|----------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| +|
`#FEFFE6` | `--Colors-Base-Yellow-1` | Base Yellow 1 | +|
`#FFFFB8` | `--Colors-Base-Yellow-2` | Base Yellow 2 | +|
`#FFFB8F` | `--Colors-Base-Yellow-3` | Base Yellow 3 | +|
`#FFF566` | `--Colors-Base-Yellow-4` | Base Yellow 4 | +|
`#FFEC3D` | `--Colors-Base-Yellow-5` | Base Yellow 5 | +|
`#FADB14` | `--Colors-Base-Yellow-6` | Base Yellow 6 | +|
`#D4B106` | `--Colors-Base-Yellow-7` | Base Yellow 7 | +|
`#AD8B00` | `--Colors-Base-Yellow-8` | Base Yellow 8 | +|
`#876800` | `--Colors-Base-Yellow-9` | Base Yellow 9 | +|
`#614700` | `--Colors-Base-Yellow-10` | Base Yellow 10 | diff --git a/docs/Foundations/Foundational Pallette.mdx b/docs/Foundations/Foundational Pallette.mdx deleted file mode 100644 index 456db5f53..000000000 --- a/docs/Foundations/Foundational Pallette.mdx +++ /dev/null @@ -1,48 +0,0 @@ -Blue Colors -markdown -Copy code -| Preview | Token Name | Color Name | Hex Code | -|----------------------------------------------------------------------------------------------------|---------------------------------------|---------------------|------------| -|
| `--Colors-Base-Blue-1` | Base Blue 1 | `#E6F4FF` | -|
| `--Colors-Base-Blue-2` | Base Blue 2 | `#BAE0FF` | -|
| `--Colors-Base-Blue-3` | Base Blue 3 | `#91CAFF` | -|
| `--Colors-Base-Blue-4` | Base Blue 4 | `#69B1FF` | -|
| `--Colors-Base-Blue-5` | Base Blue 5 | `#4096FF` | -|
| `--Colors-Base-Blue-6` | Base Blue 6 | `#1677FF` | -|
| `--Colors-Base-Blue-7` | Base Blue 7 | `#0958D9` | -|
| `--Colors-Base-Blue-8` | Base Blue 8 | `#003EB3` | -|
| `--Colors-Base-Blue-9` | Base Blue 9 | `#002C8C` | -|
| `--Colors-Base-Cyan-1` | Base Cyan 1 | `#E6FFFB` | -|
| `--Colors-Base-Cyan-2` | Base Cyan 2 | `#B5F5EC` | -|
| `--Colors-Base-Cyan-3` | Base Cyan 3 | `#87E8DE` | -|
| `--Colors-Base-Cyan-4` | Base Cyan 4 | `#5CDBD3` | -|
| `--Colors-Base-Cyan-5` | Base Cyan 5 | `#36CFC9` | -|
| `--Colors-Base-Cyan-6` | Base Cyan 6 | `#13C2C2` | -|
| `--Colors-Base-Cyan-7` | Base Cyan 7 | `#08979C` | -|
| `--Colors-Base-Cyan-8` | Base Cyan 8 | `#006D75` | -|
| `--Colors-Base-Cyan-9` | Base Cyan 9 | `#00474F` | -|
| `--Colors-Base-Cyan-10` | Base Cyan 10 | `#002329` | - -Geek Blue Colors -markdown -Copy code -| Preview | Token Name | Color Name | Hex Code | -|----------------------------------------------------------------------------------------------------|---------------------------------------|---------------------|------------| -|
| `--Colors-Base-Geekblue-1` | Base Geekblue 1 | `#F0F5FF` | -|
| `--Colors-Base-Geekblue-2` | Base Geekblue 2 | `#D6E4FF` | -|
| `--Colors-Base-Geekblue-3` | Base Geekblue 3 | `#ADC6FF` | -|
| `--Colors-Base-Geekblue-4` | Base Geekblue 4 | `#85A5FF` | -|
| `--Colors-Base-Geekblue-5` | Base Geekblue 5 | `#597EF7` | -|
| `--Colors-Base-Geekblue-6` | Base Geekblue 6 | `#2F54EB` | -|
| `--Colors-Base-Geekblue-7` | Base Geekblue 7 | `#1D39C4` | -|
| `--Colors-Base-Geekblue-8` | Base Geekblue 8 | `#10239E` | -|
| `--Colors-Base-Geekblue-9` | Base Geekblue 9 | `#061178` | -|
`#52C41A` | `--Colors-Brand-Success-colorSuccess` | `var(--Colors-Base-Green-6)` | + +### Warning Color + +| Hex Code | Token Name | Value | +|----------------------------------------------------------------------------------------------------|----------------------------------------|--------------------------| +|
`#FAAD14` | `--Colors-Brand-Warning-colorWarning` | `var(--Colors-Base-Gold-6)` | + +### Info Color + +| Hex Code | Token Name | Value | +|--------------------------------------|------------------------------------|-------------------------------------| +| Inherited from Primary Color | `--Colors-Brand-Info-colorInfo` | `var(--Colors-Brand-Primary-colorPrimary)` | + + + +### Error Color + +| Hex Code | Token Name | Value | +|----------------------------------------------------------------------------------------------------|-------------------------------------|-----------| +|
`#FF4D4F` | `--Colors-Brand-Error-colorError` | `#FF4D4F` | From 862f4c4c3a5337a9f58b43a03a2bacac1e179492 Mon Sep 17 00:00:00 2001 From: soniakose Date: Thu, 31 Oct 2024 16:41:58 -0400 Subject: [PATCH 41/45] Update Brand Palette.mdx --- docs/Foundations/Brand Palette.mdx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/docs/Foundations/Brand Palette.mdx b/docs/Foundations/Brand Palette.mdx index 3e37fb479..5e3899c87 100644 --- a/docs/Foundations/Brand Palette.mdx +++ b/docs/Foundations/Brand Palette.mdx @@ -1,7 +1,16 @@ # Brand Colors -#### Primary -These represent the core identity of the brand and are used to focus the user on core actions, such as primary buttons, navigation elements, and key call-to-actions. +### Primary +The Primary Color is the main brand color, used to represent key actions and elements across the UI. In Ant Design, this color is typically applied to interactive elements such as primary buttons, active links, and highlighted items to draw user attention and establish brand identity. + +| Hex Code | Token Name | Value | +|----------------------------------------------------------------------------------------------------|-------------------------------------|-----------------------------------------| +|
`#3600D1` | `--Colors-Brand-Primary-colorPrimary` | `var(--Colors-mpTokens-mpBrandPrimary-8)` | + + +#### Primary Color Variations + +To create a visually consistent and accessible interface, the primary color comes with several variations, or shades, which provide a range of intensities for different UI needs. | Hex Code | Token Name | Color Name | |---------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| From 79527c98e14c6c8ae40175eb5f4ec3e035b66ead Mon Sep 17 00:00:00 2001 From: soniakose Date: Thu, 31 Oct 2024 16:47:25 -0400 Subject: [PATCH 42/45] Update Semantic Palette.mdx --- docs/Foundations/Semantic Palette.mdx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/Foundations/Semantic Palette.mdx b/docs/Foundations/Semantic Palette.mdx index 5c7bf4dcb..edc2b33bb 100644 --- a/docs/Foundations/Semantic Palette.mdx +++ b/docs/Foundations/Semantic Palette.mdx @@ -1,4 +1,4 @@ -# Semenatic Palette +# Semantic Palette ### Success Color @@ -15,9 +15,11 @@ ### Info Color -| Hex Code | Token Name | Value | -|--------------------------------------|------------------------------------|-------------------------------------| -| Inherited from Primary Color | `--Colors-Brand-Info-colorInfo` | `var(--Colors-Brand-Primary-colorPrimary)` | + +| Hex Code | Token Name | Value | +|----------------------------------------------------------------------------------------------------|------------------------------------|-------------------------------------| +|
`#3600D1` | `--Colors-Brand-Info-colorInfo` | `var(--Colors-Brand-Primary-colorPrimary)` | + From a0ba6ef070f266f85af713c91b28b36df9602270 Mon Sep 17 00:00:00 2001 From: soniakose Date: Thu, 31 Oct 2024 17:01:16 -0400 Subject: [PATCH 43/45] Update Semantic Palette.mdx --- docs/Foundations/Semantic Palette.mdx | 44 +++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/docs/Foundations/Semantic Palette.mdx b/docs/Foundations/Semantic Palette.mdx index edc2b33bb..49f4cb552 100644 --- a/docs/Foundations/Semantic Palette.mdx +++ b/docs/Foundations/Semantic Palette.mdx @@ -6,6 +6,21 @@ |----------------------------------------------------------------------------------------------------|----------------------------------------|--------------------------| |
`#52C41A` | `--Colors-Brand-Success-colorSuccess` | `var(--Colors-Base-Green-6)` | +#### Success Color Variations + +| Hex Code | Token Name | Value | +|----------------------------------------------------------------------------------------------------|---------------------------------------------|---------------------------------| +|
`#F6FFED` | `--Colors-Brand-Success-colorSuccessBg` | `var(--Colors-Base-Green-1)` | +|
`#D9F7BE` | `--Colors-Brand-Success-colorSuccessBgHover` | `var(--Colors-Base-Green-2)` | +|
`#B7EB8F` | `--Colors-Brand-Success-colorSuccessBorder` | `var(--Colors-Base-Green-3)` | +|
`#95DE64` | `--Colors-Brand-Success-colorSuccessBorderHover` | `var(--Colors-Base-Green-4)` | +|
`#95DE64` | `--Colors-Brand-Success-colorSuccessHover` | `var(--Colors-Base-Green-4)` | +|
`#389E0D` | `--Colors-Brand-Success-colorSuccessActive` | `var(--Colors-Base-Green-7)` | +|
`#73D13D` | `--Colors-Brand-Success-colorSuccessTextHover` | `var(--Colors-Base-Green-5)` | +|
`#52C41A` | `--Colors-Brand-Success-colorSuccessText` | `var(--Colors-Base-Green-6)` | +|
`#389E0D` | `--Colors-Brand-Success-colorSuccessTextActive` | `var(--Colors-Base-Green-7)` | + + ### Warning Color @@ -28,3 +43,32 @@ | Hex Code | Token Name | Value | |----------------------------------------------------------------------------------------------------|-------------------------------------|-----------| |
`#FF4D4F` | `--Colors-Brand-Error-colorError` | `#FF4D4F` | + + + + +### Text Colors +#### Neutral + +| Hex Code | Token Name | Value | +|----------------------------------------------------------------------------------------------------|---------------------------------------------|---------------------------------------------| +|
`rgba(0, 0, 0, 0.95)` | `--Colors-Neutral-Text-colorText` | rgba(0, 0, 0, 0.95) | +|
`rgba(0, 0, 0, 0.75)` | `--Colors-Neutral-Text-colorTextSecondary` | rgba(0, 0, 0, 0.75) | +|
`rgba(0, 0, 0, 0.55)` | `--Colors-Neutral-Text-colorTextTertiary` | rgba(0, 0, 0, 0.55) | +|
`rgba(0, 0, 0, 0.40)` | `--Colors-Neutral-Text-colorTextQuaternary` | rgba(0, 0, 0, 0.40) | +|
`#FFFFFF` | `--Colors-Neutral-Text-colorTextLightSolid` | #FFFFFF | +|
`rgba(0, 0, 0, 0.95)` | `--Colors-Neutral-Text-colorTextHeading` | var(--Colors-Neutral-Text-colorText) | +|
`rgba(0, 0, 0, 0.75)` | `--Colors-Neutral-Text-colorTextLabel` | var(--Colors-Neutral-Text-colorTextSecondary)| +|
`rgba(0, 0, 0, 0.55)` | `--Colors-Neutral-Text-colorTextDescription`| var(--Colors-Neutral-Text-colorTextTertiary) | +|
`rgba(0, 0, 0, 0.40)` | `--Colors-Neutral-Text-colorTextDisabled` | var(--Colors-Neutral-Text-colorTextQuaternary)| +|
`rgba(0, 0, 0, 0.40)` | `--Colors-Neutral-Text-colorTextPlaceholder`| var(--Colors-Neutral-Text-colorTextQuaternary)| + +--- + +#### Error +| Hex Code | Token Name | Value | +|----------------------------------------------------------------------------------------------------|---------------------------------------------|---------------------------------------------| +|
`#FF7875` | `--Colors-Brand-Error-colorErrorTextHover` | #FF7875 | +|
`#FF4D4F` | `--Colors-Brand-Error-colorErrorText` | #FF4D4F | +|
`#D9363E` | `--Colors-Brand-Error-colorErrorTextActive` | #D9363E | + From 72ffa778ec343a061e500e21d50a9f8f387cfaa6 Mon Sep 17 00:00:00 2001 From: soniakose Date: Thu, 31 Oct 2024 17:02:43 -0400 Subject: [PATCH 44/45] Update Semantic Palette.mdx --- docs/Foundations/Semantic Palette.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Foundations/Semantic Palette.mdx b/docs/Foundations/Semantic Palette.mdx index 49f4cb552..6faf1ec3f 100644 --- a/docs/Foundations/Semantic Palette.mdx +++ b/docs/Foundations/Semantic Palette.mdx @@ -1,5 +1,5 @@ # Semantic Palette - +A semantic color palette is a set of colors in a design system that conveys specific meanings or functions, rather than just aesthetic choices. Unlike base colors (which might be simple hues or gradients without assigned functions), semantic colors are mapped to particular purposes within the UI, helping users intuitively understand the state or role of elements. ### Success Color | Hex Code | Token Name | Value | From 05e4899db51845c059400c4d8fec5f3374c6f828 Mon Sep 17 00:00:00 2001 From: soniakose Date: Mon, 16 Dec 2024 10:36:42 -0500 Subject: [PATCH 45/45] Update Semantic Palette.mdx --- docs/Foundations/Semantic Palette.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Foundations/Semantic Palette.mdx b/docs/Foundations/Semantic Palette.mdx index 6faf1ec3f..863082843 100644 --- a/docs/Foundations/Semantic Palette.mdx +++ b/docs/Foundations/Semantic Palette.mdx @@ -1,5 +1,5 @@ # Semantic Palette -A semantic color palette is a set of colors in a design system that conveys specific meanings or functions, rather than just aesthetic choices. Unlike base colors (which might be simple hues or gradients without assigned functions), semantic colors are mapped to particular purposes within the UI, helping users intuitively understand the state or role of elements. +A semantic color palette is a set of colors in a design system that conveys specific meanings or functions, rather than just aesthetic choices. Unlike base colors , semantic colors are mapped to particular purposes within the UI, helping users intuitively understand the state or role of elements. ### Success Color | Hex Code | Token Name | Value |