From f0646e4aef455487eed9ef7740c1810fc35d1b5c Mon Sep 17 00:00:00 2001 From: Ambreen Hasan <48563658+ambreeen@users.noreply.github.com> Date: Tue, 13 Oct 2020 14:54:16 -0700 Subject: [PATCH] Updating 228 metadata with recent changes/missing token additions (#20) * Updating 228 metadata with recent changes/missing token additions * Update LSP version --- core/pom.xml | 4 +- .../resources/tokens/slds/components.json | 44261 +++++++++------- .../main/resources/tokens/slds/tokens.json | 1198 +- lsp/pom.xml | 6 +- pom.xml | 4 +- 5 files changed, 24939 insertions(+), 20534 deletions(-) diff --git a/core/pom.xml b/core/pom.xml index b3b05ab..4183c7f 100644 --- a/core/pom.xml +++ b/core/pom.xml @@ -7,12 +7,12 @@ com.salesforce.slds common - 0.0.5 + 0.0.6 com.salesforce.slds core - 0.0.5 + 0.0.6 diff --git a/core/src/main/resources/tokens/slds/components.json b/core/src/main/resources/tokens/slds/components.json index 02e82a7..4408503 100644 --- a/core/src/main/resources/tokens/slds/components.json +++ b/core/src/main/resources/tokens/slds/components.json @@ -1,26 +1,25 @@ [ { - "description" : "", + "description" : "A Carousel can accept a maximum number of 5 panels where only 1 panel is visible at a time.\n\nYou are able to navigate between panels by interacting with the `slds-carousel__indicator` elements that sit below the panel.\n\nA panel becomes visible by toggling the `slds-hide` class with the `slds-show` class on the `slds-carousel__panel` element.\n\nWhen making the `slds-carousel__panel` active, the indicator should be updated with the `slds-is-active` class. This provides visual feedback showing which carousel panel is active.\n\n### Accessibility\n\nA Carousel is built using a tabbed UI specification and requires the following to meet accessibility requirements:\n\n- The tab list, which should have `role=\"tablist\"`\n- The tabs in that list, which should each be an `` anchor wrapped in a `
  • ` list item\n- The tab panels, which display each tab’s content and should each have `role=\"tabpanel\"`\n\n**Expected markup:**\n\n- Selected tab’s anchor has `aria-selected=\"true\"`, all other tabs’ anchors have `aria-selected=\"false\"`\n- Selected tab’s anchor has `tabindex=\"0\"`, all other tabs have `tabindex=\"-1\"`\n- Each tab’s anchor has an `aria-controls` attribute whose value is the id of the associated `
    `\n- Each tab panel has an `aria-labelledby` attribute whose value is the id of its associated ``\n- When the Carousel is set to auto-play, the HTML for the pause button is required to precede the HTML of the tab set\n\n**Expected keyboard interactions:**\n\n- Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab\n- Tab key, when focus is before the tab list, moves focus to the selected tab panel\n- Tab key, when focus is on selected tabpanel, moves focus into the selected tabpanel's associated tab or to the next focusable element on the page if that panel has no focusable elements\n- Shift+Tab keys, when focus is on first element in a tab panel, move focus focus entirely from tabset", "annotations" : { - "layout" : "responsive", - "name" : "accordion", - "support" : "dev-ready", "base" : "true", - "lwc" : "true", - "synonyms" : "expando collapso, expandable sections, toggle visibility", - "type" : "expandable-panel", + "name" : "carousel", + "selector" : ".slds-carousel", + "summary" : "A carousel allows multiple pieces of featured content to occupy an allocated amount of space.", + "support" : "dev-ready", "category" : "experience", - "selector" : ".slds-accordion" + "type" : "navigation, data-display", + "layout" : "responsive" }, - "id" : "accordion", - "docPath" : "./ui/components/accordion/docs.mdx", - "selectors" : [ ".slds-accordion", ".slds-accordion__content", ".slds-accordion__list-item", ".slds-accordion__section", ".slds-accordion__summary", ".slds-accordion__summary-action", ".slds-accordion__summary-action-icon", ".slds-accordion__summary-content", ".slds-accordion__summary-heading", ".slds-is-open" ], + "id" : "carousel", + "docPath" : "./ui/components/carousel/docs.mdx", + "selectors" : [ ".slds-carousel", ".slds-carousel__autoplay", ".slds-carousel__content", ".slds-carousel__content-title", ".slds-carousel__image", ".slds-carousel__indicator", ".slds-carousel__indicator-action", ".slds-carousel__indicators", ".slds-carousel__panel-action", ".slds-carousel__panels", ".slds-carousel__stage", ".slds-is-active" ], "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Initializes an accordion list with more than one section that will have its display toggled by invoking an interaction on the summary title", + "summary" : "Initiates a carousel component", "name" : "base", - "selector" : ".slds-accordion", - "restrict" : "ul", + "selector" : ".slds-carousel", + "restrict" : "div", "variant" : "true", "support" : "dev-ready" }, @@ -30,65 +29,65 @@ "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "List item for each accordion section", - "selector" : ".slds-accordion__list-item", - "restrict" : ".slds-accordion li" - }, - "id" : ".slds-accordion__list-item", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Each expandable panel inside of an accordion", - "selector" : ".slds-accordion__section", - "restrict" : ".slds-accordion section" + "summary" : "Main stage for carousel's tab-panels and tab-list inidicators", + "selector" : ".slds-carousel__stage", + "restrict" : ".slds-carousel div" }, - "id" : ".slds-accordion__section", + "id" : ".slds-carousel__stage", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Summary title for each expandable panel inside of an accordion", - "selector" : ".slds-accordion__summary", - "restrict" : ".slds-accordion__section div" + "summary" : "Tabpanel region that contains all carousel panels", + "selector" : ".slds-carousel__panels", + "restrict" : ".slds-carousel__stage div" }, - "id" : ".slds-accordion__summary", + "id" : ".slds-carousel__panels", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Actionable element that contains the carousel's tab-panel content", + "selector" : ".slds-carousel__panel-action", + "restrict" : ".slds-carousel__stage a" + }, + "id" : ".slds-carousel__panel-action", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Actionable button inside of accordion summary that would toggle the visibility of each section", - "selector" : ".slds-accordion__summary-action", - "restrict" : ".slds-accordion__summary button" + "summary" : "Element that contains the image inside the carousel's tab-panel", + "selector" : ".slds-carousel__image", + "restrict" : ".slds-carousel__panel-action div" }, - "id" : ".slds-accordion__summary-action", + "id" : ".slds-carousel__image", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Element that contains the content inside the carousel's tab-panel", + "selector" : ".slds-carousel__content", + "restrict" : ".slds-carousel__panel-action div" + }, + "id" : ".slds-carousel__content", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Icon inside of actionable button within an accordion section", - "selector" : ".slds-accordion__summary-action-icon", - "restrict" : ".slds-accordion__summary-action svg" - }, - "id" : ".slds-accordion__summary-action-icon", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Text of summary title for each expandable panel inside of an accordion", - "selector" : ".slds-accordion__summary-content", - "restrict" : ".slds-accordion__summary-action span" + "summary" : "Heading element that contains the title of the carousel's tab-panel", + "selector" : ".slds-carousel__content-title", + "restrict" : ".slds-carousel__content h2" }, - "id" : ".slds-accordion__summary-content", + "id" : ".slds-carousel__content-title", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -100,41 +99,62 @@ }, { "description" : "", "annotations" : { - "summary" : "Summary title for each expandable panel inside of an accordion", - "selector" : ".slds-accordion__summary-heading", - "restrict" : ".slds-accordion__section h3" - }, - "id" : ".slds-accordion__summary-heading", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Each expandable panel inside of an accordion", - "selector" : ".slds-accordion__content", - "restrict" : ".slds-accordion__section div" + "summary" : "Element that contains the auto-play button icon to toggle on/off", + "selector" : ".slds-carousel__autoplay", + "restrict" : ".slds-carousel__stage span" }, - "id" : ".slds-accordion__content", + "id" : ".slds-carousel__autoplay", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } - }, { + } ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "List element that contains the carousel's tab-list inidicators", + "selector" : ".slds-carousel__indicators", + "restrict" : ".slds-carousel ul" + }, + "id" : ".slds-carousel__indicators", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { "description" : "", "annotations" : { - "name" : "toggle section", - "summary" : "Toggle visibility of accordion section + rotate icon", - "selector" : ".slds-is-open", - "restrict" : ".slds-accordion__section", - "modifier" : "true", - "group" : "visibility" + "summary" : "Carousel's tab-list inidicator items", + "selector" : ".slds-carousel__indicator", + "restrict" : ".slds-carousel__indicators li" }, - "id" : "toggle section", + "id" : ".slds-carousel__indicator", "docPath" : null, "selectors" : null, - "restrictees" : [ ], + "restrictees" : [ { + "description" : "", + "annotations" : { + "summary" : "Actionable element inside of each tab-list indicator", + "selector" : ".slds-carousel__indicator-action", + "restrict" : ".slds-carousel__indicator a" + }, + "id" : ".slds-carousel__indicator-action", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "", + "annotations" : { + "summary" : "Active state notifying the tab that its current panel is active", + "selector" : ".slds-is-active", + "restrict" : ".slds-carousel__indicator-action" + }, + "id" : ".slds-is-active", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], + "tokens" : { } + } ], "tokens" : { } } ], "tokens" : { } @@ -142,85 +162,156 @@ "tokens" : { } } ], "tokens" : { + "borderRadiusMedium" : { + "auraTokenName" : "borderRadiusMedium", + "cssProperties" : [ "border-bottom-left-radius", "border-bottom-right-radius", "border-radius", "border-top-left-radius", "border-top-right-radius" ], + "cssSelectors" : [ ".slds-carousel__content", ".slds-carousel__image", ".slds-carousel__panel-action" ], + "sassTokenName" : "$border-radius-medium", + "value" : "0.25rem", + "yamlTokenName" : "BORDER_RADIUS_MEDIUM", + "scope" : null + }, "borderWidthThin" : { "auraTokenName" : "borderWidthThin", - "cssProperties" : [ "border-top" ], - "cssSelectors" : [ ".slds-accordion__list-item" ], + "cssProperties" : [ "border" ], + "cssSelectors" : [ ".slds-carousel__indicator-action", ".slds-carousel__panel-action" ], "sassTokenName" : "$border-width-thin", "value" : "1px", "yamlTokenName" : "BORDER_WIDTH_THIN", "scope" : null }, - "colorBorder" : { - "auraTokenName" : "colorBorder", - "cssProperties" : [ "border-top" ], - "cssSelectors" : [ ".slds-accordion__list-item" ], - "sassTokenName" : "$color-border", - "value" : "#dddbda", - "yamlTokenName" : "COLOR_BORDER", + "brandAccessibleActive" : { + "auraTokenName" : "brandAccessibleActive", + "cssProperties" : [ "border-color" ], + "cssSelectors" : [ ".slds-carousel__panel-action:focus" ], + "sassTokenName" : "$brand-accessible-active", + "value" : "#005fb2", + "yamlTokenName" : "BRAND_ACCESSIBLE_ACTIVE", "scope" : null }, - "lineHeightButton" : { - "auraTokenName" : "lineHeightButton", - "cssProperties" : [ "line-height" ], - "cssSelectors" : [ ".slds-button.slds-accordion__summary-action" ], - "sassTokenName" : "$line-height-button", - "value" : "1.875rem", - "yamlTokenName" : "LINE_HEIGHT_BUTTON", + "carouselColorBackground" : { + "auraTokenName" : "carouselColorBackground", + "cssProperties" : [ "background" ], + "cssSelectors" : [ ".slds-carousel__content" ], + "sassTokenName" : "$carousel-color-background", + "value" : "#FFFFFF", + "yamlTokenName" : "CAROUSEL_COLOR_BACKGROUND", "scope" : null }, - "lineHeightHeading" : { - "auraTokenName" : "lineHeightHeading", - "cssProperties" : [ "line-height" ], - "cssSelectors" : [ ".slds-accordion__summary-heading" ], - "sassTokenName" : "$line-height-heading", - "value" : "1.25", - "yamlTokenName" : "LINE_HEIGHT_HEADING", + "carouselIndicatorColorBackground" : { + "auraTokenName" : "carouselIndicatorColorBackground", + "cssProperties" : [ "background" ], + "cssSelectors" : [ ".slds-carousel__indicator-action" ], + "sassTokenName" : "$carousel-indicator-color-background", + "value" : "#FFFFFF", + "yamlTokenName" : "CAROUSEL_INDICATOR_COLOR_BACKGROUND", "scope" : null }, - "spacingSmall" : { - "auraTokenName" : "spacingSmall", - "cssProperties" : [ "margin-bottom", "padding" ], - "cssSelectors" : [ ".slds-accordion__section", ".slds-is-open > .slds-accordion__summary" ], - "sassTokenName" : "$spacing-small", - "value" : "0.75rem", - "yamlTokenName" : "SPACING_SMALL", + "carouselIndicatorColorBackgroundActive" : { + "auraTokenName" : "carouselIndicatorColorBackgroundActive", + "cssProperties" : [ "background", "border-color" ], + "cssSelectors" : [ ".slds-carousel__indicator-action.slds-is-active, .slds-carousel__indicator-action.slds-is-active:hover" ], + "sassTokenName" : "$carousel-indicator-color-background-active", + "value" : "#0070D2", + "yamlTokenName" : "CAROUSEL_INDICATOR_COLOR_BACKGROUND_ACTIVE", "scope" : null }, - "varFontSize5" : { - "auraTokenName" : "varFontSize5", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-accordion__summary-heading" ], - "sassTokenName" : "$var-font-size-5", - "value" : "1rem", - "yamlTokenName" : "VAR_FONT_SIZE_5", + "carouselIndicatorColorBackgroundFocus" : { + "auraTokenName" : "carouselIndicatorColorBackgroundFocus", + "cssProperties" : [ "background-color", "border-color" ], + "cssSelectors" : [ ".slds-carousel__indicator-action:focus" ], + "sassTokenName" : "$carousel-indicator-color-background-focus", + "value" : "#005FB2", + "yamlTokenName" : "CAROUSEL_INDICATOR_COLOR_BACKGROUND_FOCUS", + "scope" : null + }, + "carouselIndicatorColorBackgroundHover" : { + "auraTokenName" : "carouselIndicatorColorBackgroundHover", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-carousel__indicator-action:hover" ], + "sassTokenName" : "$carousel-indicator-color-background-hover", + "value" : "#fafaf9", + "yamlTokenName" : "CAROUSEL_INDICATOR_COLOR_BACKGROUND_HOVER", + "scope" : null + }, + "carouselIndicatorWidth" : { + "auraTokenName" : "carouselIndicatorWidth", + "cssProperties" : [ "height", "width" ], + "cssSelectors" : [ ".slds-carousel__indicator-action" ], + "sassTokenName" : "$carousel-indicator-width", + "value" : "1rem", + "yamlTokenName" : "CAROUSEL_INDICATOR_WIDTH", + "scope" : null + }, + "colorBorder" : { + "auraTokenName" : "colorBorder", + "cssProperties" : [ "border" ], + "cssSelectors" : [ ".slds-carousel__indicator-action", ".slds-carousel__panel-action" ], + "sassTokenName" : "$color-border", + "value" : "#dddbda", + "yamlTokenName" : "COLOR_BORDER", + "scope" : null + }, + "fontSize5" : { + "auraTokenName" : "fontSize5", + "cssProperties" : [ "font-size" ], + "cssSelectors" : [ ".slds-carousel__content-title" ], + "sassTokenName" : "$font-size-5", + "value" : "1rem", + "yamlTokenName" : "FONT_SIZE_5", + "scope" : null + }, + "spacingSmall" : { + "auraTokenName" : "spacingSmall", + "cssProperties" : [ "padding" ], + "cssSelectors" : [ ".slds-carousel__content" ], + "sassTokenName" : "$spacing-small", + "value" : "0.75rem", + "yamlTokenName" : "SPACING_SMALL", + "scope" : null + }, + "spacingXSmall" : { + "auraTokenName" : "spacingXSmall", + "cssProperties" : [ "margin" ], + "cssSelectors" : [ ".slds-carousel__indicators" ], + "sassTokenName" : "$spacing-x-small", + "value" : "0.5rem", + "yamlTokenName" : "SPACING_X_SMALL", + "scope" : null + }, + "spacingXxSmall" : { + "auraTokenName" : "spacingXxSmall", + "cssProperties" : [ "bottom", "margin" ], + "cssSelectors" : [ ".slds-carousel__autoplay", ".slds-carousel__indicator" ], + "sassTokenName" : "$spacing-xx-small", + "value" : "0.25rem", + "yamlTokenName" : "SPACING_XX_SMALL", "scope" : null } } }, { "description" : "", "annotations" : { - "summary" : "The activity timeline displays each of the user’s upcoming, current, and past activities.", "base" : "true", - "name" : "activity-timeline", - "selector" : ".slds-timeline__item_expandable", + "name" : "slider", + "selector" : ".slds-slider", + "summary" : "An input range slider lets the user specify a numeric value which must be between two specified values.", "support" : "dev-ready", - "category" : "experience", - "type" : "data-display", - "role" : "article" + "category" : "base", + "type" : "user-input" }, - "id" : "activity-timeline", - "docPath" : "./ui/components/activity-timeline/docs.mdx", - "selectors" : [ ".slds-is-open", ".slds-timeline__details-action-icon", ".slds-timeline__icon", ".slds-timeline__item_call", ".slds-timeline__item_details", ".slds-timeline__item_email", ".slds-timeline__item_event", ".slds-timeline__item_expandable", ".slds-timeline__item_task" ], + "id" : "slider", + "docPath" : "./ui/components/slider/docs.mdx", + "selectors" : [ ".slds-slider", ".slds-slider__value", ".slds-slider_vertical" ], "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Create each expandable activity timeline item in a list", + "summary" : "Initializes slider component", "name" : "base", - "selector" : ".slds-timeline__item_expandable", + "selector" : ".slds-slider", "restrict" : "div", - "support" : "dev-ready", - "variant" : "true" + "variant" : "true", + "support" : "dev-ready" }, "id" : "base", "docPath" : null, @@ -228,86 +319,11 @@ "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Class to show and hide details", - "selector" : ".slds-timeline__item_details", - "restrict" : ".slds-timeline__item_expandable article" - }, - "id" : ".slds-timeline__item_details", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "expand", - "summary" : "Toggles the visibility of the timeline item", - "selector" : ".slds-is-open", - "restrict" : ".slds-timeline__item_expandable", - "modifier" : "true", - "group" : "visibility" - }, - "id" : "expand", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Applies line connector for a call timeline item", - "selector" : ".slds-timeline__item_call", - "restrict" : ".slds-timeline__item_expandable" - }, - "id" : ".slds-timeline__item_call", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Applies line connector for an email timeline item", - "selector" : ".slds-timeline__item_email", - "restrict" : ".slds-timeline__item_expandable" - }, - "id" : ".slds-timeline__item_email", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Applies line connector for an event timeline item", - "selector" : ".slds-timeline__item_event", - "restrict" : ".slds-timeline__item_expandable" - }, - "id" : ".slds-timeline__item_event", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Applies line connector for a task timeline item", - "selector" : ".slds-timeline__item_task", - "restrict" : ".slds-timeline__item_expandable" - }, - "id" : ".slds-timeline__item_task", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Icon associated with timeline item", - "selector" : ".slds-timeline__icon", - "restrict" : ".slds-timeline__item_expandable .slds-icon_container" + "summary" : "Element that contains value of input range", + "selector" : ".slds-slider__value", + "restrict" : ".slds-slider span" }, - "id" : ".slds-timeline__icon", + "id" : ".slds-slider__value", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -315,11 +331,12 @@ }, { "description" : "", "annotations" : { - "summary" : "Icon inside of actionable button within an expandable timeline item", - "selector" : ".slds-timeline__details-action-icon", - "restrict" : ".slds-timeline__item_expandable svg" + "summary" : "Modifier that makes the slider vertical", + "selector" : ".slds-slider_vertical", + "restrict" : ".slds-slider", + "modifier" : "true" }, - "id" : ".slds-timeline__details-action-icon", + "id" : ".slds-slider_vertical", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -328,285 +345,180 @@ "tokens" : { } } ], "tokens" : { - "borderWidthThick" : { - "auraTokenName" : "borderWidthThick", - "cssProperties" : [ "border", "top", "width" ], - "cssSelectors" : [ ".slds-timeline__icon", ".slds-timeline__item_expandable:before", ".slds-timeline__media:before, .slds-media_timeline:before, .slds-media--timeline:before" ], - "sassTokenName" : "$border-width-thick", - "value" : "2px", - "yamlTokenName" : "BORDER_WIDTH_THICK", - "scope" : null - }, - "borderWidthThin" : { - "auraTokenName" : "borderWidthThin", - "cssProperties" : [ "border-bottom", "margin-left" ], - "cssSelectors" : [ "&:after", ".slds-timeline__item_expandable:before", ".slds-timeline__media:before, .slds-media_timeline:before, .slds-media--timeline:before", ".slds-timeline__title" ], - "sassTokenName" : "$border-width-thin", - "value" : "1px", - "yamlTokenName" : "BORDER_WIDTH_THIN", + "borderRadiusSmall" : { + "auraTokenName" : "borderRadiusSmall", + "cssProperties" : [ "border-radius" ], + "cssSelectors" : [ ".slds-slider__range", ".slds-slider__range::-moz-range-track", ".slds-slider__range::-ms-track", ".slds-slider__range::-webkit-slider-runnable-track" ], + "sassTokenName" : "$border-radius-small", + "value" : "0.125rem", + "yamlTokenName" : "BORDER_RADIUS_SMALL", "scope" : null }, - "colorBackgroundAlt" : { - "auraTokenName" : "colorBackgroundAlt", + "brandAccessible" : { + "auraTokenName" : "brandAccessible", "cssProperties" : [ "background" ], - "cssSelectors" : [ "&-content", ".slds-timeline__title" ], - "sassTokenName" : "$color-background-alt", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_BACKGROUND_ALT", + "cssSelectors" : [ ".slds-slider__range::-moz-range-thumb", ".slds-slider__range::-ms-thumb", ".slds-slider__range::-webkit-slider-thumb" ], + "sassTokenName" : "$brand-accessible", + "value" : "#0070d2", + "yamlTokenName" : "BRAND_ACCESSIBLE", "scope" : null }, - "colorBackgroundReminder" : { - "auraTokenName" : "colorBackgroundReminder", + "brandAccessibleActive" : { + "auraTokenName" : "brandAccessibleActive", "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-timeline__trigger:hover" ], - "sassTokenName" : "$color-background-reminder", - "value" : "#F4F6F9", - "yamlTokenName" : "COLOR_BACKGROUND_REMINDER", + "cssSelectors" : [ ".slds-slider__range::-moz-range-thumb:hover", ".slds-slider__range::-ms-thumb:hover", ".slds-slider__range::-webkit-slider-thumb:hover", ".slds-slider__range:active::-moz-range-thumb", ".slds-slider__range:active::-webkit-slider-thumb", ".slds-slider__range:focus::-moz-range-thumb", ".slds-slider__range:focus::-webkit-slider-thumb" ], + "sassTokenName" : "$brand-accessible-active", + "value" : "#005fb2", + "yamlTokenName" : "BRAND_ACCESSIBLE_ACTIVE", "scope" : null }, - "colorBorder" : { - "auraTokenName" : "colorBorder", - "cssProperties" : [ "background", "border-bottom" ], - "cssSelectors" : [ "&:after", ".slds-timeline__item_expandable:before", ".slds-timeline__media:before, .slds-media_timeline:before, .slds-media--timeline:before", ".slds-timeline__title" ], - "sassTokenName" : "$color-border", - "value" : "#dddbda", - "yamlTokenName" : "COLOR_BORDER", + "heightInput" : { + "auraTokenName" : "heightInput", + "cssProperties" : [ "height" ], + "cssSelectors" : [ ".slds-slider_vertical" ], + "sassTokenName" : "$height-input", + "value" : "1.875rem", + "yamlTokenName" : "HEIGHT_INPUT", "scope" : null }, - "colorTextWeak" : { - "auraTokenName" : "colorTextWeak", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-timeline__date" ], - "sassTokenName" : "$color-text-weak", - "value" : "#3e3e3c", - "yamlTokenName" : "COLOR_TEXT_WEAK", + "heightTappableSmall" : { + "auraTokenName" : "heightTappableSmall", + "cssProperties" : [ "height", "left", "margin-left", "margin-top", "min-height", "width" ], + "cssSelectors" : [ ".slds-slider", ".slds-slider__range::-moz-range-thumb", ".slds-slider__range::-ms-thumb", ".slds-slider__range::-webkit-slider-thumb", ".slds-slider_vertical .slds-slider__range", ".slds-slider_vertical .slds-slider__value" ], + "sassTokenName" : "$height-tappable-small", + "value" : "2rem", + "yamlTokenName" : "HEIGHT_TAPPABLE_SMALL", "scope" : null }, - "email" : { - "auraTokenName" : "email", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-timeline__item_email:before", ".slds-timeline__media_email:before, .slds-timeline__media--email:before" ], - "sassTokenName" : "$email", - "value" : "#95AEC5", - "yamlTokenName" : "EMAIL", + "shadowButtonFocus" : { + "auraTokenName" : "shadowButtonFocus", + "cssProperties" : [ "box-shadow" ], + "cssSelectors" : [ ".slds-slider__range:focus::-moz-range-thumb", ".slds-slider__range:focus::-webkit-slider-thumb" ], + "sassTokenName" : "$shadow-button-focus", + "value" : "0 0 3px #0070D2", + "yamlTokenName" : "SHADOW_BUTTON_FOCUS", "scope" : null }, - "event" : { - "auraTokenName" : "event", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-timeline__item_event:before", ".slds-timeline__media_event:before, .slds-timeline__media--event:before" ], - "sassTokenName" : "$event", - "value" : "#EB7092", - "yamlTokenName" : "EVENT", + "sizeXSmall" : { + "auraTokenName" : "sizeXSmall", + "cssProperties" : [ "height", "transform-origin", "width" ], + "cssSelectors" : [ ".slds-slider_vertical", ".slds-slider_vertical .slds-slider__range" ], + "sassTokenName" : "$size-x-small", + "value" : "12rem", + "yamlTokenName" : "SIZE_X_SMALL", "scope" : null }, - "fontSize2" : { - "auraTokenName" : "fontSize2", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-timeline__date" ], - "sassTokenName" : "$font-size-2", - "value" : "0.75rem", - "yamlTokenName" : "FONT_SIZE_2", + "sliderColorBackgroundDisabled" : { + "auraTokenName" : "sliderColorBackgroundDisabled", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-slider__range[disabled]::-moz-range-thumb", ".slds-slider__range[disabled]::-moz-range-track", ".slds-slider__range[disabled]::-ms-thumb", ".slds-slider__range[disabled]::-ms-track", ".slds-slider__range[disabled]::-webkit-slider-runnable-track", ".slds-slider__range[disabled]::-webkit-slider-thumb" ], + "sassTokenName" : "$slider-color-background-disabled", + "value" : "#ecebea", + "yamlTokenName" : "SLIDER_COLOR_BACKGROUND_DISABLED", "scope" : null }, - "logACall" : { - "auraTokenName" : "logACall", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-timeline__item_call:before", ".slds-timeline__media_call:before, .slds-timeline__media--call:before" ], - "sassTokenName" : "$log-a-call", - "value" : "#48C3CC", - "yamlTokenName" : "LOG_A_CALL", + "sliderHandleShadow" : { + "auraTokenName" : "sliderHandleShadow", + "cssProperties" : [ "box-shadow" ], + "cssSelectors" : [ ".slds-slider__range::-moz-range-thumb", ".slds-slider__range::-ms-thumb", ".slds-slider__range::-webkit-slider-thumb" ], + "sassTokenName" : "$slider-handle-shadow", + "value" : "rgba(0, 0, 0, 0.16) 0 2px 3px", + "yamlTokenName" : "SLIDER_HANDLE_SHADOW", "scope" : null }, - "spacingLarge" : { - "auraTokenName" : "spacingLarge", - "cssProperties" : [ "padding-bottom" ], - "cssSelectors" : [ ".slds-timeline__media, .slds-media_timeline, .slds-media--timeline" ], - "sassTokenName" : "$spacing-large", - "value" : "1.5rem", - "yamlTokenName" : "SPACING_LARGE", + "sliderHandleSize" : { + "auraTokenName" : "sliderHandleSize", + "cssProperties" : [ "height", "left", "margin-left", "margin-top", "width" ], + "cssSelectors" : [ ".slds-slider__range::-moz-range-thumb", ".slds-slider__range::-ms-thumb", ".slds-slider__range::-webkit-slider-thumb", ".slds-slider_vertical .slds-slider__range", ".slds-slider_vertical .slds-slider__value" ], + "sassTokenName" : "$slider-handle-size", + "value" : "1rem", + "yamlTokenName" : "SLIDER_HANDLE_SIZE", "scope" : null }, - "spacingMedium" : { - "auraTokenName" : "spacingMedium", - "cssProperties" : [ "padding", "padding-bottom", "padding-right" ], - "cssSelectors" : [ "&-content", ".slds-timeline__item_expandable", ".slds-timeline__item_expandable.slds-is-open .slds-timeline__item_details", ".slds-timeline__title" ], - "sassTokenName" : "$spacing-medium", - "value" : "1rem", - "yamlTokenName" : "SPACING_MEDIUM", + "sliderTrackColorBackground" : { + "auraTokenName" : "sliderTrackColorBackground", + "cssProperties" : [ "background" ], + "cssSelectors" : [ ".slds-slider__range::-moz-range-track", ".slds-slider__range::-ms-track", ".slds-slider__range::-webkit-slider-runnable-track" ], + "sassTokenName" : "$slider-track-color-background", + "value" : "#ecebea", + "yamlTokenName" : "SLIDER_TRACK_COLOR_BACKGROUND", + "scope" : null + }, + "sliderTrackHeight" : { + "auraTokenName" : "sliderTrackHeight", + "cssProperties" : [ "height", "margin-top" ], + "cssSelectors" : [ ".slds-slider__range::-moz-range-track", ".slds-slider__range::-ms-thumb", ".slds-slider__range::-ms-track", ".slds-slider__range::-webkit-slider-runnable-track", ".slds-slider__range::-webkit-slider-thumb" ], + "sassTokenName" : "$slider-track-height", + "value" : "4px", + "yamlTokenName" : "SLIDER_TRACK_HEIGHT", "scope" : null }, "spacingXSmall" : { "auraTokenName" : "spacingXSmall", - "cssProperties" : [ "bottom", "margin-left", "margin-right", "padding-right" ], - "cssSelectors" : [ "&:after", ".slds-timeline__item_expandable .slds-media__figure .slds-button_icon", ".slds-timeline__item_expandable .slds-timeline__actions_inline", ".slds-timeline__item_expandable .slds-timeline__actions_inline .slds-timeline__date", ".slds-timeline__title" ], + "cssProperties" : [ "margin-top", "padding" ], + "cssSelectors" : [ ".slds-slider", ".slds-slider__value" ], "sassTokenName" : "$spacing-x-small", "value" : "0.5rem", "yamlTokenName" : "SPACING_X_SMALL", "scope" : null - }, - "spacingXxSmall" : { - "auraTokenName" : "spacingXxSmall", - "cssProperties" : [ "margin-bottom", "margin-right", "padding" ], - "cssSelectors" : [ ".slds-timeline__date", ".slds-timeline__item_expandable .slds-checkbox", ".slds-timeline__item_expandable .slds-media__body", ".slds-timeline__item_expandable .slds-media__figure", ".slds-timeline__trigger" ], - "sassTokenName" : "$spacing-xx-small", - "value" : "0.25rem", - "yamlTokenName" : "SPACING_XX_SMALL", - "scope" : null - }, - "squareIconMediumBoundaryAlt" : { - "auraTokenName" : "squareIconMediumBoundaryAlt", - "cssProperties" : [ "left" ], - "cssSelectors" : [ ".slds-timeline__item_expandable:before" ], - "sassTokenName" : "$square-icon-medium-boundary-alt", - "value" : "2.25rem", - "yamlTokenName" : "SQUARE_ICON_MEDIUM_BOUNDARY_ALT", - "scope" : null - }, - "squareIconSmallBoundary" : { - "auraTokenName" : "squareIconSmallBoundary", - "cssProperties" : [ "left" ], - "cssSelectors" : [ ".slds-timeline__media:before, .slds-media_timeline:before, .slds-media--timeline:before" ], - "sassTokenName" : "$square-icon-small-boundary", - "value" : "1.5rem", - "yamlTokenName" : "SQUARE_ICON_SMALL_BOUNDARY", - "scope" : null - }, - "task" : { - "auraTokenName" : "task", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-timeline__item_task:before", ".slds-timeline__media_task:before, .slds-timeline__media--task:before" ], - "sassTokenName" : "$task", - "value" : "#4BC076", - "yamlTokenName" : "TASK", - "scope" : null } } }, { - "description" : "#### Accessibility\n\nNotifications should contain `role=\"alert\"` on the container to signal to\nassistive technology that they require the user’s immediate attention. Use a\nspan with `.slds-assistive-text` to let the user know what type of notification it is.", + "description" : "", "annotations" : { - "summary" : "Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action.", - "layout" : "responsive", - "name" : "alert", - "support" : "dev-ready", "base" : "true", - "role" : "alert", - "type" : "messaging", + "name" : "datetime-picker", + "role" : "grid, combobox", + "selector" : ".slds-datetime-picker", + "summary" : "A datetime picker is used to select a day and a time.", + "support" : "dev-ready", "category" : "experience", - "selector" : ".slds-notify_alert" + "type" : "data-entry" }, - "id" : "alert", - "docPath" : "./ui/components/alert/docs.mdx", - "selectors" : [ ".slds-notify__close", ".slds-notify_alert" ], + "id" : "datetime-picker", + "docPath" : "./ui/components/datetime-picker/docs.mdx", + "selectors" : [ ".slds-datetime-picker" ], "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Initializes alert notification", + "summary" : "Initializes a datetime picker", "name" : "base", - "selector" : ".slds-notify_alert", + "selector" : ".slds-datetime-picker", "restrict" : "div", - "support" : "dev-ready", - "variant" : "true" + "variant" : "true", + "support" : "dev-ready" }, "id" : "base", "docPath" : null, "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Alert close button", - "selector" : ".slds-notify__close", - "restrict" : ".slds-notify_alert div" - }, - "id" : ".slds-notify__close", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], + "restrictees" : [ ], "tokens" : { } } ], - "tokens" : { - "colorBackgroundToast" : { - "auraTokenName" : "colorBackgroundToast", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-notify_alert, .slds-notify--alert" ], - "sassTokenName" : "$color-background-toast", - "value" : "#706e6b", - "yamlTokenName" : "COLOR_BACKGROUND_TOAST", - "scope" : null - }, - "fontWeightLight" : { - "auraTokenName" : "fontWeightLight", - "cssProperties" : [ "font-weight" ], - "cssSelectors" : [ ".slds-notify_alert, .slds-notify--alert" ], - "sassTokenName" : "$font-weight-light", - "value" : "300", - "yamlTokenName" : "FONT_WEIGHT_LIGHT", - "scope" : null - }, - "spacingSmall" : { - "auraTokenName" : "spacingSmall", - "cssProperties" : [ "right" ], - "cssSelectors" : [ ".slds-notify_alert .slds-notify__close, .slds-notify--alert .slds-notify__close" ], - "sassTokenName" : "$spacing-small", - "value" : "0.75rem", - "yamlTokenName" : "SPACING_SMALL", - "scope" : null - }, - "spacingXLarge" : { - "auraTokenName" : "spacingXLarge", - "cssProperties" : [ "padding" ], - "cssSelectors" : [ ".slds-notify_alert, .slds-notify--alert" ], - "sassTokenName" : "$spacing-x-large", - "value" : "2rem", - "yamlTokenName" : "SPACING_X_LARGE", - "scope" : null - }, - "spacingXSmall" : { - "auraTokenName" : "spacingXSmall", - "cssProperties" : [ "padding" ], - "cssSelectors" : [ ".slds-notify_alert, .slds-notify--alert" ], - "sassTokenName" : "$spacing-x-small", - "value" : "0.5rem", - "yamlTokenName" : "SPACING_X_SMALL", - "scope" : null - }, - "spacingXxSmall" : { - "auraTokenName" : "spacingXxSmall", - "cssProperties" : [ "margin-left" ], - "cssSelectors" : [ ".slds-notify_alert .slds-notify__close, .slds-notify--alert .slds-notify__close" ], - "sassTokenName" : "$spacing-xx-small", - "value" : "0.25rem", - "yamlTokenName" : "SPACING_XX_SMALL", - "scope" : null - } - } + "tokens" : { } }, { "description" : "", "annotations" : { - "summary" : "The App Launcher allows the user to quickly access all the apps and functionality with their organization.", - "layout" : "responsive", - "name" : "app-launcher", - "support" : "dev-ready", "base" : "true", - "role" : "modal-dialog", - "type" : "navigation", + "name" : "dueling-picklist", + "role" : "listbox", + "selector" : ".slds-dueling-list", + "summary" : "A dueling-picklist is used to move options between two lists and is often referred to as a multi-select. Sometimes, the list options can then be re-ordered, depending on the use case.", + "support" : "dev-ready", "category" : "experience", - "selector" : ".slds-app-launcher__tile" + "type" : "data-entry" }, - "id" : "app-launcher", - "docPath" : "./ui/components/app-launcher/docs.mdx", - "selectors" : [ ".slds-app-launcher__tile", ".slds-app-launcher__tile-body", ".slds-app-launcher__tile-body_small", ".slds-app-launcher__tile-figure", ".slds-app-launcher__tile-figure_small", ".slds-app-launcher__tile_small", ".slds-is-draggable", ".slds-is-grabbed" ], + "id" : "dueling-picklist", + "docPath" : "./ui/components/dueling-picklist/docs.mdx", + "selectors" : [ ".slds-dropdown_length-10", ".slds-dropdown_length-5", ".slds-dropdown_length-7", ".slds-dropdown_length-with-icon-10", ".slds-dropdown_length-with-icon-5", ".slds-dropdown_length-with-icon-7", ".slds-dueling-list", ".slds-dueling-list__column", ".slds-dueling-list__column_responsive", ".slds-dueling-list__options", ".slds-has-focus", ".slds-is-disabled", ".slds-is-grabbed", ".slds-is-selected", ".slds-is-selected", ".slds-listbox", ".slds-listbox_horizontal", ".slds-listbox__icon-selected", ".slds-listbox_inline", ".slds-listbox__item", ".slds-listbox__option", ".slds-listbox__option_entity", ".slds-listbox__option_has-meta", ".slds-listbox__option-header", ".slds-listbox__option-icon", ".slds-listbox__option-meta", ".slds-listbox__option_plain", ".slds-listbox__option-text_entity", ".slds-listbox_vertical" ], "restrictees" : [ { - "description" : "", + "description" : "A dueling picklist inherits styles from the listbox component", "annotations" : { + "summary" : "Initializes a dueling picklist", "name" : "base", - "summary" : "Tile cards that contains the app information, the icon and description", - "selector" : ".slds-app-launcher__tile", + "selector" : ".slds-dueling-list", "restrict" : "div", - "support" : "dev-ready", - "variant" : "true" + "variant" : "true", + "support" : "dev-ready" }, "id" : "base", "docPath" : null, @@ -614,62 +526,21 @@ "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Tile card that containes the just app icon and title", - "selector" : ".slds-app-launcher__tile_small", - "restrict" : ".slds-app-launcher__tile", - "deprecated" : "true" + "summary" : "Handles the layout of the dueling picklist", + "selector" : ".slds-dueling-list__column", + "restrict" : ".slds-dueling-list div" }, - "id" : ".slds-app-launcher__tile_small", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Add styles associated with drag and drop of a tile", - "selector" : ".slds-is-draggable", - "restrict" : ".slds-app-launcher__tile" - }, - "id" : ".slds-is-draggable", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "grabbed", - "summary" : "Add styles associated with a tile being grabbed in drag and drop interaction", - "selector" : ".slds-is-grabbed", - "restrict" : ".slds-app-launcher__tile", - "modifier" : "true", - "group" : "interactions" - }, - "id" : "grabbed", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "App image or icon", - "selector" : ".slds-app-launcher__tile-figure", - "restrict" : ".slds-app-launcher__tile div" - }, - "id" : ".slds-app-launcher__tile-figure", + "id" : ".slds-dueling-list__column", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "App image or icon of a small tile", - "selector" : ".slds-app-launcher__tile-figure_small", - "restrict" : ".slds-app-launcher__tile-figure", - "deprecated" : "true" + "summary" : "Changes the layout of the dueling picklist to be responsive", + "selector" : ".slds-dueling-list__column_responsive", + "restrict" : ".slds-dueling-list__column" }, - "id" : ".slds-app-launcher__tile-figure_small", + "id" : ".slds-dueling-list__column_responsive", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -679,384 +550,343 @@ }, { "description" : "", "annotations" : { - "summary" : "App title and description", - "selector" : ".slds-app-launcher__tile-body", - "restrict" : ".slds-app-launcher__tile div" + "summary" : "Bounding visual container for listbox of options", + "selector" : ".slds-dueling-list__options", + "restrict" : ".slds-dueling-list div" }, - "id" : ".slds-app-launcher__tile-body", + "id" : ".slds-dueling-list__options", "docPath" : null, "selectors" : null, "restrictees" : [ { - "description" : "", + "description" : "Listbox container", "annotations" : { - "summary" : "App title, no description", - "selector" : ".slds-app-launcher__tile-body_small", - "restrict" : ".slds-app-launcher__tile-body", - "deprecated" : "true" + "summary" : null, + "name" : "listbox", + "selector" : ".slds-listbox", + "restrict" : ".slds-dropdown ul, .slds-dueling-list__options ul, .slds-pill_container ul, .slds-listbox_selection-group ul, .slds-combobox_container ul, .slds-form-element__control ul, .slds-popover__body ul", + "variant" : "true", + "support" : "dev-ready" }, - "id" : ".slds-app-launcher__tile-body_small", + "id" : "listbox", "docPath" : null, "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { - "borderRadiusMedium" : { - "auraTokenName" : "borderRadiusMedium", - "cssProperties" : [ "border-radius" ], - "cssSelectors" : [ ".slds-app-launcher__tile", ".slds-app-launcher__tile-body", ".slds-app-launcher__tile-figure", ".slds-app-launcher__tile-figure_small, .slds-app-launcher__tile-figure--small" ], - "sassTokenName" : "$border-radius-medium", - "value" : "0.25rem", - "yamlTokenName" : "BORDER_RADIUS_MEDIUM", - "scope" : null - }, - "borderWidthThin" : { - "auraTokenName" : "borderWidthThin", - "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-app-launcher__tile", ".slds-app-launcher__tile-figure_small, .slds-app-launcher__tile-figure--small" ], - "sassTokenName" : "$border-width-thin", - "value" : "1px", - "yamlTokenName" : "BORDER_WIDTH_THIN", - "scope" : null - }, - "brandAccessibleActive" : { - "auraTokenName" : "brandAccessibleActive", - "cssProperties" : [ "border-color" ], - "cssSelectors" : [ ".slds-app-launcher__tile:hover, .slds-app-launcher__tile:focus, .slds-app-launcher__tile:active" ], - "sassTokenName" : "$brand-accessible-active", - "value" : "#005fb2", - "yamlTokenName" : "BRAND_ACCESSIBLE_ACTIVE", - "scope" : null - }, - "colorBackground" : { - "auraTokenName" : "colorBackground", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-app-launcher__tile-body" ], - "sassTokenName" : "$color-background", - "value" : "#f3f2f2", - "yamlTokenName" : "COLOR_BACKGROUND", - "scope" : null - }, - "colorBorder" : { - "auraTokenName" : "colorBorder", - "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-app-launcher__tile", ".slds-app-launcher__tile-figure_small, .slds-app-launcher__tile-figure--small" ], - "sassTokenName" : "$color-border", - "value" : "#dddbda", - "yamlTokenName" : "COLOR_BORDER", - "scope" : null - }, - "colorBorderSelectionHover" : { - "auraTokenName" : "colorBorderSelectionHover", - "cssProperties" : [ "border-color" ], - "cssSelectors" : [ ".slds-app-launcher__tile_small:hover .slds-app-launcher__tile-figure_small, .slds-app-launcher__tile_small:hover .slds-app-launcher__tile-figure--small, .slds-app-launcher__tile_small:focus .slds-app-launcher__tile-figure_small, .slds-app-launcher__tile_small:focus .slds-app-launcher__tile-figure--small, .slds-app-launcher__tile--small:hover .slds-app-launcher__tile-figure_small, .slds-app-launcher__tile--small:hover .slds-app-launcher__tile-figure--small, .slds-app-launcher__tile--small:focus .slds-app-launcher__tile-figure_small, .slds-app-launcher__tile--small:focus .slds-app-launcher__tile-figure--small" ], - "sassTokenName" : "$color-border-selection-hover", - "value" : "#1589ee", - "yamlTokenName" : "COLOR_BORDER_SELECTION_HOVER", - "scope" : null - }, - "colorTextInverse" : { - "auraTokenName" : "colorTextInverse", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-app-launcher__tile-figure" ], - "sassTokenName" : "$color-text-inverse", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_TEXT_INVERSE", - "scope" : null - }, - "sizeLarge" : { - "auraTokenName" : "sizeLarge", - "cssProperties" : [ "flex" ], - "cssSelectors" : [ ".slds-app-launcher__header-search" ], - "sassTokenName" : "$size-large", - "value" : "25rem", - "yamlTokenName" : "SIZE_LARGE", - "scope" : null - }, - "spacingMedium" : { - "auraTokenName" : "spacingMedium", - "cssProperties" : [ "padding" ], - "cssSelectors" : [ ".slds-app-launcher__header-search" ], - "sassTokenName" : "$spacing-medium", - "value" : "1rem", - "yamlTokenName" : "SPACING_MEDIUM", - "scope" : null - }, - "spacingSmall" : { - "auraTokenName" : "spacingSmall", - "cssProperties" : [ "padding" ], - "cssSelectors" : [ ".slds-app-launcher__tile-body", ".slds-app-launcher__tile-figure" ], - "sassTokenName" : "$spacing-small", - "value" : "0.75rem", - "yamlTokenName" : "SPACING_SMALL", - "scope" : null - }, - "spacingXSmall" : { - "auraTokenName" : "spacingXSmall", - "cssProperties" : [ "margin", "padding" ], - "cssSelectors" : [ ".slds-app-launcher__tile", ".slds-app-launcher__tile-body", ".slds-app-launcher__tile-body_small, .slds-app-launcher__tile-body--small" ], - "sassTokenName" : "$spacing-x-small", - "value" : "0.5rem", - "yamlTokenName" : "SPACING_X_SMALL", - "scope" : null - }, - "spacingXxSmall" : { - "auraTokenName" : "spacingXxSmall", - "cssProperties" : [ "padding-bottom" ], - "cssSelectors" : [ ".slds-app-launcher__tile.slds-is-draggable .slds-app-launcher__tile-figure" ], - "sassTokenName" : "$spacing-xx-small", - "value" : "0.25rem", - "yamlTokenName" : "SPACING_XX_SMALL", - "scope" : null - } - } -}, { - "description" : "An avatar can be circular or a rounded rectangle, depending on usage. The\ndefault is a rounded rectangle and requires `.slds-avatar` as the base class.\nUse a circle for all people-oriented objects that could potentially render\nas avatars. For a fully round avatar, add the `.slds-avatar_circle` class.\nFour additional classes are available for sizing.\n\nIf an image is unavailable, up to two letters can be used instead. If the\nrecord name contains two words, like first and last name, use the first\ncapitalized letter of each. For records that only have a single word name,\nuse the first two letters of that word using one capital and one lower case\nletter. If either an image or initials are unavailable, use the object icon as a fallback.", - "annotations" : { - "layout" : "responsive", - "name" : "avatar", - "support" : "dev-ready", - "base" : "true", - "lwc" : "true", - "synonyms" : "identity", - "type" : "data-display", - "category" : "base", - "selector" : ".slds-avatar" - }, - "id" : "avatar", - "docPath" : "./ui/components/avatar/docs.mdx", - "selectors" : [ ".slds-avatar", ".slds-avatar-grouped__initials", ".slds-avatar__initials", ".slds-avatar__initials_inverse", ".slds-avatar_circle", ".slds-avatar_group-image-large", ".slds-avatar_group-image-medium", ".slds-avatar_group-image-small", ".slds-avatar_large", ".slds-avatar_medium", ".slds-avatar_profile-image-large", ".slds-avatar_profile-image-medium", ".slds-avatar_profile-image-small", ".slds-avatar_small", ".slds-avatar_x-small" ], - "restrictees" : [ { - "description" : "An image is the preferred format for an avatar", - "annotations" : { - "summary" : "Creates an avatar component", - "name" : "base", - "selector" : ".slds-avatar", - "restrict" : "div, span, a", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "base", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "name" : "Small Group Image", - "summary" : "Uses the small group image as the avatar icon", - "selector" : ".slds-avatar_group-image-small", - "restrict" : ".slds-avatar" - }, - "id" : "Small Group Image", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "Medium Group Image", - "summary" : "Uses the medium group image as the avatar icon", - "selector" : ".slds-avatar_group-image-medium", - "restrict" : ".slds-avatar" - }, - "id" : "Medium Group Image", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "Large Group Image", - "summary" : "Uses the large group image as the avatar icon", - "selector" : ".slds-avatar_group-image-large", - "restrict" : ".slds-avatar" - }, - "id" : "Large Group Image", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "Small User Profile Image", - "summary" : "Uses the small user avatar image as the avatar icon", - "selector" : ".slds-avatar_profile-image-small", - "restrict" : ".slds-avatar" - }, - "id" : "Small User Profile Image", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "Medium User Profile Image", - "summary" : "Uses the medium user avatar image as the avatar icon", - "selector" : ".slds-avatar_profile-image-medium", - "restrict" : ".slds-avatar" - }, - "id" : "Medium User Profile Image", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "Large User Profile Image", - "summary" : "Uses the large user avatar image as the avatar icon", - "selector" : ".slds-avatar_profile-image-large", - "restrict" : ".slds-avatar" - }, - "id" : "Large User Profile Image", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "x-small", - "summary" : "Size modifier for avatars - X-Small", - "selector" : ".slds-avatar_x-small", - "restrict" : ".slds-avatar", - "modifier" : "true", - "group" : "size" - }, - "id" : "x-small", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "small", - "summary" : "Size modifier for avatars - Small", - "selector" : ".slds-avatar_small", - "restrict" : ".slds-avatar", - "modifier" : "true", - "group" : "size" - }, - "id" : "small", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "medium", - "summary" : "Size modifier for avatars - Medium", - "selector" : ".slds-avatar_medium", - "restrict" : ".slds-avatar", - "modifier" : "true", - "group" : "size" - }, - "id" : "medium", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "large", - "summary" : "Size modifier for avatars - Large", - "selector" : ".slds-avatar_large", - "restrict" : ".slds-avatar", - "modifier" : "true", - "group" : "size" - }, - "id" : "large", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "circle", - "summary" : "Make avatar a circle", - "selector" : ".slds-avatar_circle", - "restrict" : ".slds-avatar", - "modifier" : "true", - "group" : "radius" - }, - "id" : "circle", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "If an image is unavailable, up to two letters can be used instead.\nIf the record name contains two words, like first and last name, use\nthe first capitalized letter of each. For records that only have a\nsingle word name, use the first two letters of that word using one\ncapital and one lower case letter. The background color should match\nthe entity or object icon. If no image or initials are available,\nthe fallback should be the icon for the entity or object.", - "annotations" : { - "name" : "initials", - "summary" : "Used for initials inside an avatar", - "selector" : ".slds-avatar__initials", - "restrict" : ".slds-avatar abbr", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "initials", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Modifier for the initials Avatar in an Avatar Group", - "name" : "initials", - "selector" : ".slds-avatar-grouped__initials", - "restrict" : ".slds-avatar__initials", - "modifier" : "true" - }, - "id" : "initials", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "inversed", - "summary" : "Used for initials that are dark text on light background", - "selector" : ".slds-avatar__initials_inverse", - "restrict" : ".slds-avatar__initials", - "modifier" : "true", - "group" : "color" - }, - "id" : "inversed", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], + "restrictees" : [ { + "description" : "Inline listbox", + "annotations" : { + "summary" : null, + "selector" : ".slds-listbox_inline", + "restrict" : ".slds-listbox", + "modifier" : "true" + }, + "id" : ".slds-listbox_inline", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "Horizontal listbox", + "annotations" : { + "summary" : null, + "selector" : ".slds-listbox_horizontal", + "restrict" : ".slds-listbox", + "modifier" : "true" + }, + "id" : ".slds-listbox_horizontal", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "Listbox item", + "annotations" : { + "summary" : null, + "selector" : ".slds-listbox__item", + "restrict" : ".slds-listbox > li" + }, + "id" : ".slds-listbox__item", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "Choosable option within listbox", + "annotations" : { + "summary" : null, + "selector" : ".slds-listbox__option", + "restrict" : ".slds-listbox__item > div" + }, + "id" : ".slds-listbox__option", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "", + "annotations" : { + "summary" : "Header for choosable option within listbox", + "selector" : ".slds-listbox__option-header", + "restrict" : ".slds-listbox__option h3" + }, + "id" : ".slds-listbox__option-header", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Container for listbox option icon", + "selector" : ".slds-listbox__option-icon", + "restrict" : ".slds-listbox__option span" + }, + "id" : ".slds-listbox__option-icon", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "Focus state of a vertical listbox option", + "annotations" : { + "summary" : null, + "selector" : ".slds-has-focus", + "restrict" : ".slds-listbox__option", + "modifier" : "true" + }, + "id" : ".slds-has-focus", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "Modifies the listbox option if it contains an entity object", + "annotations" : { + "summary" : null, + "selector" : ".slds-listbox__option_entity", + "restrict" : ".slds-listbox__option" + }, + "id" : ".slds-listbox__option_entity", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "Modifies the listbox option if it contains an plain object or string", + "annotations" : { + "summary" : null, + "selector" : ".slds-listbox__option_plain", + "restrict" : ".slds-listbox__option" + }, + "id" : ".slds-listbox__option_plain", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "If the listbox option has metadata or secondary information that sits below its primary text", + "annotations" : { + "summary" : null, + "selector" : ".slds-listbox__option_has-meta", + "restrict" : ".slds-listbox__option" + }, + "id" : ".slds-listbox__option_has-meta", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "Modifier that makes selected icon visible", + "annotations" : { + "summary" : null, + "selector" : ".slds-is-selected", + "restrict" : ".slds-listbox__option", + "modifier" : "true" + }, + "id" : ".slds-is-selected", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "The main text of an entity listbox", + "annotations" : { + "summary" : null, + "selector" : ".slds-listbox__option-text_entity", + "restrict" : ".slds-listbox__option span" + }, + "id" : ".slds-listbox__option-text_entity", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "The metadata or secondary text of an entity listbox", + "annotations" : { + "summary" : null, + "selector" : ".slds-listbox__option-meta", + "restrict" : ".slds-listbox__option span" + }, + "id" : ".slds-listbox__option-meta", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], + "tokens" : { } + }, { + "description" : "The icon within a plain listbox that indicates if an option has been selected or not.", + "annotations" : { + "summary" : null, + "selector" : ".slds-listbox__icon-selected", + "restrict" : ".slds-listbox__item svg" + }, + "id" : ".slds-listbox__icon-selected", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], + "tokens" : { } + }, { + "description" : "Creates a vertical listbox", + "annotations" : { + "summary" : null, + "selector" : ".slds-listbox_vertical", + "restrict" : ".slds-listbox", + "modifier" : "true" + }, + "id" : ".slds-listbox_vertical", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Forces overflow scrolling after 5 list items", + "selector" : ".slds-dropdown_length-5", + "restrict" : ".slds-dropdown, .slds-dropdown__list, .slds-listbox", + "modifier" : "true", + "group" : "height" + }, + "id" : ".slds-dropdown_length-5", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Forces overflow scrolling after 7 list items", + "selector" : ".slds-dropdown_length-7", + "restrict" : ".slds-dropdown, .slds-dropdown__list, .slds-listbox", + "modifier" : "true", + "group" : "height" + }, + "id" : ".slds-dropdown_length-7", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Forces overflow scrolling after 10 list items", + "selector" : ".slds-dropdown_length-10", + "restrict" : ".slds-dropdown, .slds-dropdown__list, .slds-listbox", + "modifier" : "true", + "group" : "height" + }, + "id" : ".slds-dropdown_length-10", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Forces overflow scrolling after 5 list items with an icon", + "selector" : ".slds-dropdown_length-with-icon-5", + "restrict" : ".slds-dropdown, .slds-dropdown__list, .slds-listbox", + "modifier" : "true", + "group" : "height" + }, + "id" : ".slds-dropdown_length-with-icon-5", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Forces overflow scrolling after 7 list items with an icon", + "selector" : ".slds-dropdown_length-with-icon-7", + "restrict" : ".slds-dropdown, .slds-dropdown__list, .slds-listbox", + "modifier" : "true", + "group" : "height" + }, + "id" : ".slds-dropdown_length-with-icon-7", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Forces overflow scrolling after 10 list items with an icon", + "selector" : ".slds-dropdown_length-with-icon-10", + "restrict" : ".slds-dropdown, .slds-dropdown__list, .slds-listbox", + "modifier" : "true", + "group" : "height" + }, + "id" : ".slds-dropdown_length-with-icon-10", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Selected/dragging state of a listbox option", + "selector" : ".slds-is-selected", + "restrict" : ".slds-dueling-list__options div" + }, + "id" : ".slds-is-selected", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "grabbed state of a listbox option", + "selector" : ".slds-is-grabbed", + "restrict" : ".slds-dueling-list__options div" + }, + "id" : ".slds-is-grabbed", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Disabled state of a picklist option", + "selector" : ".slds-is-disabled", + "restrict" : ".slds-dueling-list__options" + }, + "id" : ".slds-is-disabled", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], "tokens" : { } } ], "tokens" : { } } ], "tokens" : { - "borderRadiusCircle" : { - "auraTokenName" : "borderRadiusCircle", - "cssProperties" : [ "border-radius" ], - "cssSelectors" : [ ".slds-avatar_circle, .slds-avatar--circle" ], - "sassTokenName" : "$border-radius-circle", - "value" : "50%", - "yamlTokenName" : "BORDER_RADIUS_CIRCLE", - "scope" : null - }, "borderRadiusMedium" : { "auraTokenName" : "borderRadiusMedium", "cssProperties" : [ "border-radius" ], - "cssSelectors" : [ ".slds-avatar" ], + "cssSelectors" : [ ".slds-dueling-list__options, .slds-picklist__options" ], "sassTokenName" : "$border-radius-medium", "value" : "0.25rem", "yamlTokenName" : "BORDER_RADIUS_MEDIUM", @@ -1065,182 +895,200 @@ "borderWidthThin" : { "auraTokenName" : "borderWidthThin", "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-avatar_empty, .slds-avatar--empty" ], + "cssSelectors" : [ ".slds-dueling-list__options, .slds-picklist__options" ], "sassTokenName" : "$border-width-thin", "value" : "1px", "yamlTokenName" : "BORDER_WIDTH_THIN", "scope" : null }, - "colorBackground" : { - "auraTokenName" : "colorBackground", + "brandAccessible" : { + "auraTokenName" : "brandAccessible", "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-avatar__initials_inverse" ], - "sassTokenName" : "$color-background", - "value" : "#f3f2f2", - "yamlTokenName" : "COLOR_BACKGROUND", + "cssSelectors" : [ ".slds-dueling-list__options [aria-selected=\"true\"], .slds-picklist__options [aria-selected=\"true\"]" ], + "sassTokenName" : "$brand-accessible", + "value" : "#0070d2", + "yamlTokenName" : "BRAND_ACCESSIBLE", "scope" : null }, - "colorBorder" : { - "auraTokenName" : "colorBorder", - "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-avatar_empty, .slds-avatar--empty" ], - "sassTokenName" : "$color-border", - "value" : "#dddbda", - "yamlTokenName" : "COLOR_BORDER", + "brandAccessibleActive" : { + "auraTokenName" : "brandAccessibleActive", + "cssProperties" : [ "background" ], + "cssSelectors" : [ ".slds-dueling-list__options [aria-selected=\"true\"]:hover, .slds-dueling-list__options [aria-selected=\"true\"]:focus, .slds-picklist__options [aria-selected=\"true\"]:hover, .slds-picklist__options [aria-selected=\"true\"]:focus" ], + "sassTokenName" : "$brand-accessible-active", + "value" : "#005fb2", + "yamlTokenName" : "BRAND_ACCESSIBLE_ACTIVE", "scope" : null }, - "colorTextInverse" : { - "auraTokenName" : "colorTextInverse", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-avatar", ".slds-avatar__initials:hover" ], - "sassTokenName" : "$color-text-inverse", + "colorBackgroundInputActive" : { + "auraTokenName" : "colorBackgroundInputActive", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-dueling-list__options, .slds-picklist__options" ], + "sassTokenName" : "$color-background-input-active", "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_TEXT_INVERSE", + "yamlTokenName" : "COLOR_BACKGROUND_INPUT_ACTIVE", "scope" : null }, - "colorTextWeak" : { - "auraTokenName" : "colorTextWeak", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-avatar__initials_inverse", ".slds-avatar__initials_inverse:hover" ], - "sassTokenName" : "$color-text-weak", - "value" : "#3e3e3c", - "yamlTokenName" : "COLOR_TEXT_WEAK", + "colorBackgroundInputDisabled" : { + "auraTokenName" : "colorBackgroundInputDisabled", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-dueling-list__options.slds-is-disabled, .slds-picklist__options.slds-is-disabled" ], + "sassTokenName" : "$color-background-input-disabled", + "value" : "#ecebea", + "yamlTokenName" : "COLOR_BACKGROUND_INPUT_DISABLED", "scope" : null }, - "fontSize1" : { - "auraTokenName" : "fontSize1", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-avatar_small, .slds-avatar--small", ".slds-avatar_x-small, .slds-avatar--x-small" ], - "sassTokenName" : "$font-size-1", - "value" : "0.625rem", - "yamlTokenName" : "FONT_SIZE_1", + "colorBackgroundRowActive" : { + "auraTokenName" : "colorBackgroundRowActive", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-picklist__item > a:active, .slds-picklist__item > span:active", ".slds-picklist__item[aria-selected=\"true\"]" ], + "sassTokenName" : "$color-background-row-active", + "value" : "#ecebea", + "yamlTokenName" : "COLOR_BACKGROUND_ROW_ACTIVE", "scope" : null }, - "fontSize6" : { - "auraTokenName" : "fontSize6", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-avatar_large, .slds-avatar--large" ], - "sassTokenName" : "$font-size-6", - "value" : "1.125rem", - "yamlTokenName" : "FONT_SIZE_6", + "colorBackgroundRowHover" : { + "auraTokenName" : "colorBackgroundRowHover", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-picklist__item > a:hover, .slds-picklist__item > span:hover" ], + "sassTokenName" : "$color-background-row-hover", + "value" : "#f3f2f2", + "yamlTokenName" : "COLOR_BACKGROUND_ROW_HOVER", "scope" : null }, - "fontSizeHeadingSmall" : { - "auraTokenName" : "fontSizeHeadingSmall", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-avatar", ".slds-avatar_medium, .slds-avatar--medium" ], - "sassTokenName" : "$font-size-heading-small", - "value" : "0.875rem", - "yamlTokenName" : "FONT_SIZE_HEADING_SMALL", + "colorBorderInput" : { + "auraTokenName" : "colorBorderInput", + "cssProperties" : [ "border" ], + "cssSelectors" : [ ".slds-dueling-list__options, .slds-picklist__options" ], + "sassTokenName" : "$color-border-input", + "value" : "#dddbda", + "yamlTokenName" : "COLOR_BORDER_INPUT", "scope" : null }, - "fontWeightLight" : { - "auraTokenName" : "fontWeightLight", - "cssProperties" : [ "font-weight" ], - "cssSelectors" : [ ".slds-avatar_large, .slds-avatar--large" ], - "sassTokenName" : "$font-weight-light", - "value" : "300", - "yamlTokenName" : "FONT_WEIGHT_LIGHT", + "colorBorderInputDisabled" : { + "auraTokenName" : "colorBorderInputDisabled", + "cssProperties" : [ "border-color" ], + "cssSelectors" : [ ".slds-dueling-list__options.slds-is-disabled, .slds-picklist__options.slds-is-disabled" ], + "sassTokenName" : "$color-border-input-disabled", + "value" : "#c9c7c5", + "yamlTokenName" : "COLOR_BORDER_INPUT_DISABLED", "scope" : null }, - "groupDefaultAvatar" : { - "auraTokenName" : "groupDefaultAvatar", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-avatar.slds-avatar_group-image-large" ], - "sassTokenName" : "$group-default-avatar", - "value" : "/assets/images/group_avatar_200.png", - "yamlTokenName" : "GROUP_DEFAULT_AVATAR", + "colorTextButtonBrand" : { + "auraTokenName" : "colorTextButtonBrand", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-dueling-list__options [aria-selected=\"true\"], .slds-picklist__options [aria-selected=\"true\"]" ], + "sassTokenName" : "$color-text-button-brand", + "value" : "#FFFFFF", + "yamlTokenName" : "COLOR_TEXT_BUTTON_BRAND", "scope" : null }, - "groupDefaultAvatarMedium" : { - "auraTokenName" : "groupDefaultAvatarMedium", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-avatar.slds-avatar_group-image-medium" ], - "sassTokenName" : "$group-default-avatar-medium", - "value" : "/assets/images/group_avatar_160.png", - "yamlTokenName" : "GROUP_DEFAULT_AVATAR_MEDIUM", + "colorTextButtonBrandHover" : { + "auraTokenName" : "colorTextButtonBrandHover", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-dueling-list__options [aria-selected=\"true\"]:hover, .slds-dueling-list__options [aria-selected=\"true\"]:focus, .slds-picklist__options [aria-selected=\"true\"]:hover, .slds-picklist__options [aria-selected=\"true\"]:focus" ], + "sassTokenName" : "$color-text-button-brand-hover", + "value" : "#FFFFFF", + "yamlTokenName" : "COLOR_TEXT_BUTTON_BRAND_HOVER", "scope" : null }, - "groupDefaultAvatarSmall" : { - "auraTokenName" : "groupDefaultAvatarSmall", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-avatar.slds-avatar_group-image-small" ], - "sassTokenName" : "$group-default-avatar-small", - "value" : "/assets/images/group_avatar_96.png", - "yamlTokenName" : "GROUP_DEFAULT_AVATAR_SMALL", + "colorTextInputDisabled" : { + "auraTokenName" : "colorTextInputDisabled", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-dueling-list__options.slds-is-disabled, .slds-picklist__options.slds-is-disabled" ], + "sassTokenName" : "$color-text-input-disabled", + "value" : "#3e3e3c", + "yamlTokenName" : "COLOR_TEXT_INPUT_DISABLED", "scope" : null }, - "lineHeightHeading" : { - "auraTokenName" : "lineHeightHeading", + "lineHeightText" : { + "auraTokenName" : "lineHeightText", "cssProperties" : [ "line-height" ], - "cssSelectors" : [ ".slds-avatar_large, .slds-avatar--large" ], - "sassTokenName" : "$line-height-heading", - "value" : "1.25", - "yamlTokenName" : "LINE_HEIGHT_HEADING", + "cssSelectors" : [ ".slds-picklist__item" ], + "sassTokenName" : "$line-height-text", + "value" : "1.5", + "yamlTokenName" : "LINE_HEIGHT_TEXT", "scope" : null }, - "lineHeightReset" : { - "auraTokenName" : "lineHeightReset", - "cssProperties" : [ "line-height" ], - "cssSelectors" : [ ".slds-avatar" ], - "sassTokenName" : "$line-height-reset", - "value" : "1", - "yamlTokenName" : "LINE_HEIGHT_RESET", + "sizeSmall" : { + "auraTokenName" : "sizeSmall", + "cssProperties" : [ "flex", "height", "width" ], + "cssSelectors" : [ ".slds-dueling-list__column_responsive", ".slds-dueling-list__options, .slds-picklist__options" ], + "sassTokenName" : "$size-small", + "value" : "15rem", + "yamlTokenName" : "SIZE_SMALL", "scope" : null }, - "userDefaultAvatar" : { - "auraTokenName" : "userDefaultAvatar", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-avatar.slds-avatar_profile-image-large" ], - "sassTokenName" : "$user-default-avatar", - "value" : "/assets/images/profile_avatar_200.png", - "yamlTokenName" : "USER_DEFAULT_AVATAR", + "sizeXxSmall" : { + "auraTokenName" : "sizeXxSmall", + "cssProperties" : [ "min-width" ], + "cssSelectors" : [ ".slds-dueling-list__column_responsive" ], + "sassTokenName" : "$size-xx-small", + "value" : "6rem", + "yamlTokenName" : "SIZE_XX_SMALL", "scope" : null }, - "userDefaultAvatarMedium" : { - "auraTokenName" : "userDefaultAvatarMedium", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-avatar.slds-avatar_profile-image-medium" ], - "sassTokenName" : "$user-default-avatar-medium", - "value" : "/assets/images/profile_avatar_160.png", - "yamlTokenName" : "USER_DEFAULT_AVATAR_MEDIUM", + "spacingLarge" : { + "auraTokenName" : "spacingLarge", + "cssProperties" : [ "margin-top" ], + "cssSelectors" : [ ".slds-dueling-list__column .slds-button:first-of-type", ".slds-picklist_draggable .slds-button:first-of-type, .slds-picklist--draggable .slds-button:first-of-type" ], + "sassTokenName" : "$spacing-large", + "value" : "1.5rem", + "yamlTokenName" : "SPACING_LARGE", "scope" : null }, - "userDefaultAvatarSmall" : { - "auraTokenName" : "userDefaultAvatarSmall", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-avatar.slds-avatar_profile-image-small" ], - "sassTokenName" : "$user-default-avatar-small", - "value" : "/assets/images/profile_avatar_96.png", - "yamlTokenName" : "USER_DEFAULT_AVATAR_SMALL", + "spacingSmall" : { + "auraTokenName" : "spacingSmall", + "cssProperties" : [ "padding" ], + "cssSelectors" : [ ".slds-picklist__item > a, .slds-picklist__item > span" ], + "sassTokenName" : "$spacing-small", + "value" : "0.75rem", + "yamlTokenName" : "SPACING_SMALL", + "scope" : null + }, + "spacingXSmall" : { + "auraTokenName" : "spacingXSmall", + "cssProperties" : [ "padding" ], + "cssSelectors" : [ ".slds-picklist__item > a, .slds-picklist__item > span" ], + "sassTokenName" : "$spacing-x-small", + "value" : "0.5rem", + "yamlTokenName" : "SPACING_X_SMALL", + "scope" : null + }, + "spacingXxSmall" : { + "auraTokenName" : "spacingXxSmall", + "cssProperties" : [ "margin", "padding" ], + "cssSelectors" : [ ".slds-dueling-list__column .slds-button", ".slds-dueling-list__options, .slds-picklist__options", ".slds-picklist_draggable .slds-button, .slds-picklist--draggable .slds-button" ], + "sassTokenName" : "$spacing-xx-small", + "value" : "0.25rem", + "yamlTokenName" : "SPACING_XX_SMALL", "scope" : null } } }, { - "description" : "An avatar group is an element that communicates to the user that there is\nmore than 1 person associated to an item. It contains two avatar\ncomponents with modifying classes.", + "description" : "Create a button with a `button` or `a` element to retain the native click\nfunction.\n\nUse a disabled attribute when a button can’t be clicked.", "annotations" : { - "summary" : "Avatar Groups are used to bunch together avatars within a shared context", - "layout" : "responsive", - "name" : "avatar-group", - "support" : "dev-ready", "base" : "true", - "synonyms" : "identity, face pile", - "type" : "data-display", + "name" : "buttons", + "role" : "button", + "selector" : ".slds-button, .slds-button_stateful, .slds-button_dual-stateful, .slds-button_reset", + "summary" : "Buttons are used to invoke an event", + "support" : "dev-ready", "category" : "base", - "selector" : ".slds-avatar-group" + "type" : "action", + "layout" : "responsive" }, - "id" : "avatar-group", - "docPath" : "./ui/components/avatar-group/docs.mdx", - "selectors" : [ ".slds-avatar-group", ".slds-avatar-group_large", ".slds-avatar-group_medium", ".slds-avatar-group_small", ".slds-avatar-group_x-small", ".slds-avatar-grouped", ".slds-avatar-grouped__initials", ".slds-avatar-grouped__primary", ".slds-avatar-grouped__secondary", ".slds-avatar-grouped_inverse" ], + "id" : "buttons", + "docPath" : "./ui/components/buttons/docs.mdx", + "selectors" : [ ".slds-button", ".slds-button_brand", ".slds-button_destructive", ".slds-button_dual-stateful", ".slds-button_first", ".slds-button_full-width", ".slds-button__icon", ".slds-button__icon_large", ".slds-button__icon_left", ".slds-button__icon_right", ".slds-button__icon_small", ".slds-button__icon_x-small", ".slds-button_inverse", ".slds-button_last", ".slds-button_middle", ".slds-button_neutral", ".slds-button_outline-brand", ".slds-button_stateful", ".slds-button_stretch", ".slds-button_success", ".slds-button_text-destructive", ".slds-icon_x-small", ".slds-input__button_decrement", ".slds-input__button_increment", ".slds-is-pressed", ".slds-is-selected", ".slds-is-selected-clicked", ".slds-not-selected", ".slds-text-not-pressed", ".slds-text-not-selected", ".slds-text-pressed", ".slds-text-selected", ".slds-text-selected-focus" ], "restrictees" : [ { - "description" : "An image is the preferred format for an avatar", + "description" : "", "annotations" : { - "summary" : "Creates an Avatar Group", + "summary" : "This neutralizes all the base styles making it look like a text link", "name" : "base", - "selector" : ".slds-avatar-group", - "restrict" : "div, span", - "support" : "dev-ready", - "variant" : "true" + "selector" : ".slds-button", + "restrict" : "button, a, span", + "variant" : "true", + "support" : "dev-ready" }, "id" : "base", "docPath" : null, @@ -1248,84 +1096,23 @@ "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Variant of an Avatar in an Avatar Group", - "name" : "grouped", - "selector" : ".slds-avatar-grouped", - "restrict" : ".slds-avatar-group span", - "variant" : "true" + "summary" : "Explicitly style the first button in a button group", + "selector" : ".slds-button_first", + "restrict" : ".slds-button" }, - "id" : "grouped", + "id" : ".slds-button_first", "docPath" : null, "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Variant of an Avatar with inverse background in an Avatar Group", - "name" : "grouped-inverse", - "selector" : ".slds-avatar-grouped_inverse", - "restrict" : ".slds-avatar-grouped", - "modifier" : "true" - }, - "id" : "grouped-inverse", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Modifier for the primary Avatar in an Avatar Group", - "name" : "grouped-primary", - "selector" : ".slds-avatar-grouped__primary", - "restrict" : ".slds-avatar-grouped", - "modifier" : "true" - }, - "id" : "grouped-primary", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Modifier for the Avatar that contains User Initials in an Avatar Group", - "name" : "initials", - "selector" : ".slds-avatar-grouped__initials", - "restrict" : ".slds-avatar-grouped", - "modifier" : "true" - }, - "id" : "initials", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Modifier for the secondary Avatar in an Avatar Group", - "name" : "grouped-secondary", - "selector" : ".slds-avatar-grouped__secondary", - "restrict" : ".slds-avatar-grouped", - "modifier" : "true" - }, - "id" : "grouped-secondary", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], + "restrictees" : [ ], "tokens" : { } }, { "description" : "", "annotations" : { - "summary" : "Creates an extra small Avatar Group", - "name" : "x-small", - "selector" : ".slds-avatar-group_x-small", - "restrict" : ".slds-avatar-group", - "modifier" : "true", - "group" : "sizing" + "summary" : "Explicitly style buttons in the middle (i.e., not first or last) in a button group", + "selector" : ".slds-button_middle", + "restrict" : ".slds-button" }, - "id" : "x-small", + "id" : ".slds-button_middle", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -1333,14 +1120,11 @@ }, { "description" : "", "annotations" : { - "summary" : "Creates a small Avatar Group", - "name" : "small", - "selector" : ".slds-avatar-group_small", - "restrict" : ".slds-avatar-group", - "modifier" : "true", - "group" : "sizing" + "summary" : "Explicitly style the last button in a button group", + "selector" : ".slds-button_last", + "restrict" : ".slds-button" }, - "id" : "small", + "id" : ".slds-button_last", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -1348,14 +1132,14 @@ }, { "description" : "", "annotations" : { - "summary" : "Creates a medium Avatar Group", - "name" : "medium", - "selector" : ".slds-avatar-group_medium", - "restrict" : ".slds-avatar-group", + "summary" : "Creates the gray border with white background default style", + "name" : "neutral", + "selector" : ".slds-button_neutral", + "restrict" : ".slds-button", "modifier" : "true", - "group" : "sizing" + "group" : "theme" }, - "id" : "medium", + "id" : "neutral", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -1363,106 +1147,42 @@ }, { "description" : "", "annotations" : { - "summary" : "Creates a large Avatar Group", - "name" : "large", - "selector" : ".slds-avatar-group_large", - "restrict" : ".slds-avatar-group", + "summary" : "Creates the brand blue Salesforce style", + "name" : "brand", + "selector" : ".slds-button_brand", + "restrict" : ".slds-button", "modifier" : "true", - "group" : "sizing" + "group" : "theme" }, - "id" : "large", + "id" : "brand", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { - "borderRadiusCircle" : { - "auraTokenName" : "borderRadiusCircle", - "cssProperties" : [ "border-radius" ], - "cssSelectors" : [ ".slds-avatar-grouped" ], - "sassTokenName" : "$border-radius-circle", - "value" : "50%", - "yamlTokenName" : "BORDER_RADIUS_CIRCLE", - "scope" : null - }, - "borderWidthThin" : { - "auraTokenName" : "borderWidthThin", - "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-avatar-grouped" ], - "sassTokenName" : "$border-width-thin", - "value" : "1px", - "yamlTokenName" : "BORDER_WIDTH_THIN", - "scope" : null - }, - "colorBackground" : { - "auraTokenName" : "colorBackground", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-avatar-grouped_inverse" ], - "sassTokenName" : "$color-background", - "value" : "#f3f2f2", - "yamlTokenName" : "COLOR_BACKGROUND", - "scope" : null - }, - "colorGray1" : { - "auraTokenName" : "colorGray1", - "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-avatar-grouped" ], - "sassTokenName" : "$color-gray-1", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_GRAY_1", - "scope" : null - }, - "user" : { - "auraTokenName" : "user", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-avatar-grouped" ], - "sassTokenName" : "$user", - "value" : "#34BECD", - "yamlTokenName" : "USER", - "scope" : null - } - } -}, { - "description" : "", - "annotations" : { - "summary" : "Badges are labels which hold small amounts of information.", - "layout" : "responsive", - "name" : "badges", - "support" : "dev-ready", - "base" : "true", - "lwc" : "true", - "type" : "data-display", - "category" : "base", - "selector" : ".slds-badge" - }, - "id" : "badges", - "docPath" : "./ui/components/badges/docs.mdx", - "selectors" : [ ".slds-badge", ".slds-badge__icon", ".slds-badge__icon_inverse", ".slds-badge__icon_left", ".slds-badge__icon_right", ".slds-badge_inverse", ".slds-badge_lightest" ], - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Create badge component", - "name" : "base", - "selector" : ".slds-badge", - "restrict" : "span", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "base", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { + }, { "description" : "", "annotations" : { - "summary" : "Change badge color to a dark with light text", + "summary" : "Creates the outlined button with the brand color", + "name" : "outline-brand", + "selector" : ".slds-button_outline-brand", + "restrict" : ".slds-button", + "modifier" : "true", + "group" : "theme" + }, + "id" : "outline-brand", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Creates the inverse style for dark backgrounds", "name" : "inverse", - "selector" : ".slds-badge_inverse", - "restrict" : ".slds-badge", + "selector" : ".slds-button_inverse", + "restrict" : ".slds-button", "modifier" : "true", - "group" : "color" + "group" : "theme" }, "id" : "inverse", "docPath" : null, @@ -1472,14 +1192,14 @@ }, { "description" : "", "annotations" : { - "summary" : "Change badge color to white with normal text", - "name" : "lightest", - "selector" : ".slds-badge_lightest", - "restrict" : ".slds-badge", + "summary" : "Creates a red button style", + "name" : "destructive", + "selector" : ".slds-button_destructive", + "restrict" : ".slds-button", "modifier" : "true", - "group" : "color" + "group" : "theme" }, - "id" : "lightest", + "id" : "destructive", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -1487,26 +1207,57 @@ }, { "description" : "", "annotations" : { - "summary" : "Adds an icon to badge", - "name" : "icon-container", - "selector" : ".slds-badge__icon", - "restrict" : ".slds-badge span", - "modifier" : "true" + "summary" : "Creates a neutral button with red text", + "name" : "text-destructive", + "selector" : ".slds-button_text-destructive", + "restrict" : ".slds-button", + "modifier" : "true", + "group" : "theme" }, - "id" : "icon-container", + "id" : "text-destructive", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Creates a green button style", + "name" : "success", + "selector" : ".slds-button_success", + "restrict" : ".slds-button", + "modifier" : "true", + "group" : "theme" + }, + "id" : "success", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Sizing for icon that sits inside button__icon", + "name" : "with-icon", + "selector" : ".slds-button__icon", + "restrict" : ".slds-button svg", + "variant" : "true", + "support" : "dev-ready" + }, + "id" : "with-icon", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Change badge icon fill color to inverse", - "name" : "icon-inverse", - "selector" : ".slds-badge__icon_inverse", - "restrict" : ".slds-badge__icon", + "summary" : "Large size button icon svg", + "name" : "large", + "selector" : ".slds-button__icon_large", + "restrict" : ".slds-button__icon", "modifier" : "true", - "group" : "color" + "group" : "size" }, - "id" : "icon-inverse", + "id" : "large", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -1514,14 +1265,14 @@ }, { "description" : "", "annotations" : { - "summary" : "Adds an icon to the left of the badge text", - "name" : "icon-left", - "selector" : ".slds-badge__icon_left", - "restrict" : ".slds-badge__icon", + "summary" : "Small size button icon svg", + "name" : "small", + "selector" : ".slds-button__icon_small", + "restrict" : ".slds-button__icon", "modifier" : "true", - "group" : "spacing" + "group" : "size" }, - "id" : "icon-left", + "id" : "small", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -1529,179 +1280,68 @@ }, { "description" : "", "annotations" : { - "summary" : "Adds an icon to the right of the badge text", - "name" : "icon-right", - "selector" : ".slds-badge__icon_right", - "restrict" : ".slds-badge__icon", + "summary" : "X-Small size button icon svg", + "name" : "x-small", + "selector" : ".slds-button__icon_x-small", + "restrict" : ".slds-button__icon", "modifier" : "true", - "group" : "spacing" + "group" : "size" }, - "id" : "icon-right", + "id" : "x-small", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Position of icon when sitting to the left side of the text when inside a button", + "selector" : ".slds-button__icon_left", + "restrict" : ".slds-button__icon, .slds-button__icon_stateful" + }, + "id" : ".slds-button__icon_left", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Position of icon when sitting to the right side of the text when inside a button", + "selector" : ".slds-button__icon_right", + "restrict" : ".slds-button__icon, .slds-button__icon_stateful" + }, + "id" : ".slds-button__icon_right", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : null, + "selector" : ".slds-icon_x-small", + "restrict" : ".slds-icon, .slds-button__icon", + "modifier" : "true", + "group" : "size" + }, + "id" : ".slds-icon_x-small", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } } ], "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { - "badgeColorBackgroundInverse" : { - "auraTokenName" : "badgeColorBackgroundInverse", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-badge_inverse" ], - "sassTokenName" : "$badge-color-background-inverse", - "value" : "#706e6b", - "yamlTokenName" : "BADGE_COLOR_BACKGROUND_INVERSE", - "scope" : null - }, - "badgeColorBackgroundLightest" : { - "auraTokenName" : "badgeColorBackgroundLightest", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-badge_lightest" ], - "sassTokenName" : "$badge-color-background-lightest", - "value" : "#FFFFFF", - "yamlTokenName" : "BADGE_COLOR_BACKGROUND_LIGHTEST", - "scope" : null - }, - "borderRadiusPill" : { - "auraTokenName" : "borderRadiusPill", - "cssProperties" : [ "border-radius" ], - "cssSelectors" : [ ".slds-badge" ], - "sassTokenName" : "$border-radius-pill", - "value" : "15rem", - "yamlTokenName" : "BORDER_RADIUS_PILL", - "scope" : null - }, - "borderWidthThin" : { - "auraTokenName" : "borderWidthThin", - "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-badge_lightest" ], - "sassTokenName" : "$border-width-thin", - "value" : "1px", - "yamlTokenName" : "BORDER_WIDTH_THIN", - "scope" : null - }, - "colorBackgroundDark" : { - "auraTokenName" : "colorBackgroundDark", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-badge" ], - "sassTokenName" : "$color-background-dark", - "value" : "#ecebea", - "yamlTokenName" : "COLOR_BACKGROUND_DARK", - "scope" : null - }, - "colorBorder" : { - "auraTokenName" : "colorBorder", - "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-badge_lightest" ], - "sassTokenName" : "$color-border", - "value" : "#dddbda", - "yamlTokenName" : "COLOR_BORDER", - "scope" : null - }, - "colorTextDefault" : { - "auraTokenName" : "colorTextDefault", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-badge" ], - "sassTokenName" : "$color-text-default", - "value" : "#080707", - "yamlTokenName" : "COLOR_TEXT_DEFAULT", - "scope" : null - }, - "colorTextIconDefault" : { - "auraTokenName" : "colorTextIconDefault", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-badge__icon" ], - "sassTokenName" : "$color-text-icon-default", - "value" : "#706e6b", - "yamlTokenName" : "COLOR_TEXT_ICON_DEFAULT", - "scope" : null - }, - "colorTextInverse" : { - "auraTokenName" : "colorTextInverse", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-badge_inverse" ], - "sassTokenName" : "$color-text-inverse", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_TEXT_INVERSE", - "scope" : null - }, - "fontSize2" : { - "auraTokenName" : "fontSize2", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-badge", ".slds-badge_lightest" ], - "sassTokenName" : "$font-size-2", - "value" : "0.75rem", - "yamlTokenName" : "FONT_SIZE_2", - "scope" : null - }, - "fontWeightBold" : { - "auraTokenName" : "fontWeightBold", - "cssProperties" : [ "font-weight" ], - "cssSelectors" : [ ".slds-badge" ], - "sassTokenName" : "$font-weight-bold", - "value" : "700", - "yamlTokenName" : "FONT_WEIGHT_BOLD", - "scope" : null - }, - "spacingXSmall" : { - "auraTokenName" : "spacingXSmall", - "cssProperties" : [ "margin-left", "padding" ], - "cssSelectors" : [ ".slds-badge", ".slds-badge + .slds-badge" ], - "sassTokenName" : "$spacing-x-small", - "value" : "0.5rem", - "yamlTokenName" : "SPACING_X_SMALL", - "scope" : null - }, - "spacingXxSmall" : { - "auraTokenName" : "spacingXxSmall", - "cssProperties" : [ "margin-left", "margin-right", "padding" ], - "cssSelectors" : [ ".slds-badge", ".slds-badge__icon_left", ".slds-badge__icon_right" ], - "sassTokenName" : "$spacing-xx-small", - "value" : "0.25rem", - "yamlTokenName" : "SPACING_XX_SMALL", - "scope" : null - } - } -}, { - "description" : "", - "annotations" : { - "base" : "true", - "name" : "brand-band", - "selector" : ".slds-brand-band", - "support" : "dev-ready", - "category" : "feature", - "brandable" : "true", - "layout" : "responsive" - }, - "id" : "brand-band", - "docPath" : "./ui/components/brand-band/docs.mdx", - "selectors" : [ ".slds-brand-band", ".slds-brand-band_cover", ".slds-brand-band_group", ".slds-brand-band_large", ".slds-brand-band_medium", ".slds-brand-band_none", ".slds-brand-band_small", ".slds-brand-band_user" ], - "restrictees" : [ { - "description" : "", - "annotations" : { - "variant" : "true", - "name" : "base", - "selector" : ".slds-brand-band", - "restrict" : "div", - "support" : "dev-ready" - }, - "id" : "base", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { + }, { "description" : "", "annotations" : { - "name" : "cover", - "summary" : "Changes background image to be set to cover rather than contain", - "selector" : ".slds-brand-band_cover", - "restrict" : ".slds-brand-band", + "summary" : "Creates a button style for full width that resets styling", + "selector" : ".slds-button_full-width", + "restrict" : ".slds-button", "modifier" : "true", - "group" : "position" + "group" : "size" }, - "id" : "cover", + "id" : ".slds-button_full-width", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -1709,14 +1349,13 @@ }, { "description" : "", "annotations" : { - "name" : "small", - "summary" : "Sets height of brand band to", - "selector" : ".slds-brand-band_small", - "restrict" : ".slds-brand-band", + "summary" : "Creates a button style for 100% width with centered text that maintains current styling", + "selector" : ".slds-button_stretch", + "restrict" : ".slds-button", "modifier" : "true", - "group" : "sizing" + "group" : "size" }, - "id" : "small", + "id" : ".slds-button_stretch", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -1724,14 +1363,11 @@ }, { "description" : "", "annotations" : { - "name" : "medium", - "summary" : "Sets height of brand band to", - "selector" : ".slds-brand-band_medium", - "restrict" : ".slds-brand-band", - "modifier" : "true", - "group" : "sizing" + "summary" : "Positions decrement button within counter input field", + "selector" : ".slds-input__button_decrement", + "restrict" : " .slds-button" }, - "id" : "medium", + "id" : ".slds-input__button_decrement", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -1739,29 +1375,38 @@ }, { "description" : "", "annotations" : { - "name" : "large", - "summary" : "Sets height of brand band to", - "selector" : ".slds-brand-band_large", - "restrict" : ".slds-brand-band", - "modifier" : "true", - "group" : "sizing" + "summary" : "Positions increment button within counter input field", + "selector" : ".slds-input__button_increment", + "restrict" : ".slds-button" }, - "id" : "large", + "id" : ".slds-input__button_increment", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } - }, { + } ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Initiates a dual stateful button", + "name" : "dual-stateful", + "selector" : ".slds-button_dual-stateful", + "restrict" : "button", + "variant" : "true", + "support" : "dev-ready" + }, + "id" : "dual-stateful", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { "description" : "", "annotations" : { - "name" : "no background", - "summary" : "Removes image but keeps page background", - "selector" : ".slds-brand-band_none", - "restrict" : ".slds-brand-band", - "modifier" : "true", - "group" : "visibility" + "summary" : "Shown text when button is not pressed - default state", + "selector" : ".slds-text-not-pressed", + "restrict" : ".slds-button_dual-stateful span" }, - "id" : "no background", + "id" : ".slds-text-not-pressed", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -1769,14 +1414,11 @@ }, { "description" : "", "annotations" : { - "name" : "Group background", - "summary" : "Uses the group banner image as the page background image", - "selector" : ".slds-brand-band_group", - "restrict" : ".slds-brand-band", - "modifier" : "true", - "group" : "image" + "summary" : "Shown text when button is pressed", + "selector" : ".slds-text-pressed", + "restrict" : ".slds-button_dual-stateful span" }, - "id" : "Group background", + "id" : ".slds-text-pressed", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -1784,331 +1426,630 @@ }, { "description" : "", "annotations" : { - "name" : "User profile background", - "summary" : "Uses the user profile banner image as the page background image", - "selector" : ".slds-brand-band_user", - "restrict" : ".slds-brand-band", + "summary" : "When button is in pressed state", + "selector" : ".slds-is-pressed", + "restrict" : ".slds-button_dual-stateful", "modifier" : "true", - "group" : "image" + "group" : "interaction" }, - "id" : "User profile background", + "id" : ".slds-is-pressed", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } } ], "tokens" : { } - } ], - "tokens" : { - "bannerGroupDefaultImage" : { - "auraTokenName" : "bannerGroupDefaultImage", - "cssProperties" : [ "background-image" ], - "cssSelectors" : [ ".slds-brand-band.slds-brand-band_group:before" ], - "sassTokenName" : "$banner-group-default-image", - "value" : "/assets/images/themes/oneSalesforce/banner-group-public-default.png", - "yamlTokenName" : "BANNER_GROUP_DEFAULT_IMAGE", - "scope" : null - }, - "bannerUserDefaultImage" : { - "auraTokenName" : "bannerUserDefaultImage", - "cssProperties" : [ "background-image" ], - "cssSelectors" : [ ".slds-brand-band.slds-brand-band_user:before" ], - "sassTokenName" : "$banner-user-default-image", - "value" : "/assets/images/themes/oneSalesforce/banner-user-default.png", - "yamlTokenName" : "BANNER_USER_DEFAULT_IMAGE", - "scope" : null - }, - "brandBackgroundDark" : { - "auraTokenName" : "brandBackgroundDark", - "cssProperties" : [ "background-image" ], - "cssSelectors" : [ ".slds-brand-band:before" ], - "sassTokenName" : "$brand-background-dark", - "value" : "#195594", - "yamlTokenName" : "BRAND_BACKGROUND_DARK", - "scope" : null + }, { + "description" : "", + "annotations" : { + "summary" : "Initiates a stateful button", + "name" : "stateful", + "selector" : ".slds-button_stateful", + "restrict" : "button", + "variant" : "true", + "support" : "dev-ready" }, - "brandBackgroundDarkTransparent" : { - "auraTokenName" : "brandBackgroundDarkTransparent", - "cssProperties" : [ "background-image" ], - "cssSelectors" : [ ".slds-brand-band:before" ], - "sassTokenName" : "$brand-background-dark-transparent", - "value" : "rgba(25,85,148,0)", - "yamlTokenName" : "BRAND_BACKGROUND_DARK_TRANSPARENT", + "id" : "stateful", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "Default state of a stateful button", + "annotations" : { + "summary" : null, + "selector" : ".slds-not-selected", + "restrict" : ".slds-button_stateful", + "modifier" : "true", + "group" : "interaction" + }, + "id" : ".slds-not-selected", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Shown text when button is selected", + "selector" : ".slds-text-selected", + "restrict" : ".slds-button_stateful span" + }, + "id" : ".slds-text-selected", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Shown text when button is selected and focused", + "selector" : ".slds-text-selected-focus", + "restrict" : ".slds-button_stateful span" + }, + "id" : ".slds-text-selected-focus", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Shown text when button is not selected - default state", + "selector" : ".slds-text-not-selected", + "restrict" : ".slds-button_stateful span" + }, + "id" : ".slds-text-not-selected", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "When button is selected and still has focus from click", + "selector" : ".slds-is-selected-clicked", + "restrict" : ".slds-button_stateful", + "modifier" : "true", + "group" : "interaction" + }, + "id" : ".slds-is-selected-clicked", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "When button is pressed and selected", + "selector" : ".slds-is-selected", + "restrict" : ".slds-button_stateful", + "modifier" : "true", + "group" : "interaction" + }, + "id" : ".slds-is-selected", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], + "tokens" : { } + } ], + "tokens" : { + "borderWidthThin" : { + "auraTokenName" : "borderWidthThin", + "cssProperties" : [ "border", "border-width" ], + "cssSelectors" : [ ".slds-button", ".slds-button_inverse:focus, .slds-button--inverse:focus, .slds-button_icon-border-inverse:focus, .slds-button--icon-border-inverse:focus", "a.slds-button_inverse:focus, a.slds-button--inverse:focus" ], + "sassTokenName" : "$border-width-thin", + "value" : "1px", + "yamlTokenName" : "BORDER_WIDTH_THIN", "scope" : null }, - "brandBackgroundPrimary" : { - "auraTokenName" : "brandBackgroundPrimary", - "cssProperties" : [ "background-image" ], - "cssSelectors" : [ ".slds-brand-band:after" ], - "sassTokenName" : "$brand-background-primary", - "value" : "#b0c4df", - "yamlTokenName" : "BRAND_BACKGROUND_PRIMARY", + "brandAccessible" : { + "auraTokenName" : "brandAccessible", + "cssProperties" : [ "background-color", "border-color", "color" ], + "cssSelectors" : [ ".slds-button", ".slds-button_brand, .slds-button--brand", ".slds-button_dual-stateful.slds-is-pressed", ".slds-button_outline-brand", ".slds-button_outline-brand:active", ".slds-button_outline-brand:hover, .slds-button_outline-brand:focus" ], + "sassTokenName" : "$brand-accessible", + "value" : "#0070d2", + "yamlTokenName" : "BRAND_ACCESSIBLE", "scope" : null }, - "brandBackgroundPrimaryTransparent" : { - "auraTokenName" : "brandBackgroundPrimaryTransparent", - "cssProperties" : [ "background-image" ], - "cssSelectors" : [ ".slds-brand-band:after" ], - "sassTokenName" : "$brand-background-primary-transparent", - "value" : "rgba(176,196,223,0)", - "yamlTokenName" : "BRAND_BACKGROUND_PRIMARY_TRANSPARENT", + "brandAccessibleActive" : { + "auraTokenName" : "brandAccessibleActive", + "cssProperties" : [ "background-color", "border-color", "color" ], + "cssSelectors" : [ ".slds-button:active", ".slds-button:hover, .slds-button:focus", ".slds-button_brand:active, .slds-button--brand:active", ".slds-button_brand:hover, .slds-button_brand:focus, .slds-button--brand:hover, .slds-button--brand:focus", ".slds-button_dual-stateful.slds-is-pressed:focus, .slds-button_dual-stateful.slds-is-pressed:hover" ], + "sassTokenName" : "$brand-accessible-active", + "value" : "#005fb2", + "yamlTokenName" : "BRAND_ACCESSIBLE_ACTIVE", "scope" : null }, - "brandBandDefaultImage" : { - "auraTokenName" : "brandBandDefaultImage", - "cssProperties" : [ "background-image" ], - "cssSelectors" : [ ".slds-brand-band:before" ], - "sassTokenName" : "$brand-band-default-image", - "value" : "/assets/images/themes/oneSalesforce/banner-brand-default.png", - "yamlTokenName" : "BRAND_BAND_DEFAULT_IMAGE", + "brandDisabled" : { + "auraTokenName" : "brandDisabled", + "cssProperties" : [ "background-color", "border-color" ], + "cssSelectors" : [ ".slds-button_brand[disabled], .slds-button_brand:disabled, .slds-button--brand[disabled], .slds-button--brand:disabled", ".slds-button_destructive[disabled], .slds-button_destructive:disabled, .slds-button--destructive[disabled], .slds-button--destructive:disabled", ".slds-button_success[disabled], .slds-button_success:disabled, .slds-button--success[disabled], .slds-button--success:disabled" ], + "sassTokenName" : "$brand-disabled", + "value" : "#c9c7c5", + "yamlTokenName" : "BRAND_DISABLED", "scope" : null }, - "brandBandImageHeightLarge" : { - "auraTokenName" : "brandBandImageHeightLarge", - "cssProperties" : [ "height", "top" ], - "cssSelectors" : [ ".slds-brand-band.slds-brand-band_large:after", ".slds-brand-band.slds-brand-band_large:before" ], - "sassTokenName" : "$brand-band-image-height-large", - "value" : "18.75rem", - "yamlTokenName" : "BRAND_BAND_IMAGE_HEIGHT_LARGE", + "buttonBorderRadius" : { + "auraTokenName" : "buttonBorderRadius", + "cssProperties" : [ "border-radius" ], + "cssSelectors" : [ ".slds-button" ], + "sassTokenName" : "$button-border-radius", + "value" : ".25rem", + "yamlTokenName" : "BUTTON_BORDER_RADIUS", "scope" : null }, - "brandBandImageHeightMedium" : { - "auraTokenName" : "brandBandImageHeightMedium", - "cssProperties" : [ "height", "top" ], - "cssSelectors" : [ ".slds-brand-band.slds-brand-band_medium:after", ".slds-brand-band.slds-brand-band_medium:before" ], - "sassTokenName" : "$brand-band-image-height-medium", - "value" : "12.5rem", - "yamlTokenName" : "BRAND_BAND_IMAGE_HEIGHT_MEDIUM", + "buttonColorBackgroundPrimary" : { + "auraTokenName" : "buttonColorBackgroundPrimary", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-button_neutral, .slds-button--neutral", ".slds-button_outline-brand", ".slds-button_text-destructive" ], + "sassTokenName" : "$button-color-background-primary", + "value" : "#FFFFFF", + "yamlTokenName" : "BUTTON_COLOR_BACKGROUND_PRIMARY", "scope" : null }, - "brandBandImageHeightSmall" : { - "auraTokenName" : "brandBandImageHeightSmall", - "cssProperties" : [ "height", "top" ], - "cssSelectors" : [ ".slds-brand-band.slds-brand-band_small:after", ".slds-brand-band.slds-brand-band_small:before" ], - "sassTokenName" : "$brand-band-image-height-small", - "value" : "6rem", - "yamlTokenName" : "BRAND_BAND_IMAGE_HEIGHT_SMALL", + "buttonColorBorderPrimary" : { + "auraTokenName" : "buttonColorBorderPrimary", + "cssProperties" : [ "border-color" ], + "cssSelectors" : [ ".slds-button_inverse, .slds-button--inverse", ".slds-button_inverse:active, .slds-button--inverse:active", ".slds-button_inverse:hover, .slds-button_inverse:focus, .slds-button--inverse:hover, .slds-button--inverse:focus", ".slds-button_text-destructive", ".slds-button_text-destructive:active", ".slds-button_text-destructive:hover, .slds-button_text-destructive:focus", ".slds-button_text-destructive[disabled], .slds-button_text-destructive:disabled" ], + "sassTokenName" : "$button-color-border-primary", + "value" : "#dddbda", + "yamlTokenName" : "BUTTON_COLOR_BORDER_PRIMARY", "scope" : null }, - "brandBandScrimHeight" : { - "auraTokenName" : "brandBandScrimHeight", - "cssProperties" : [ "height", "top" ], - "cssSelectors" : [ ".slds-brand-band.slds-brand-band_large:after", ".slds-brand-band.slds-brand-band_medium:after", ".slds-brand-band.slds-brand-band_small:after", ".slds-brand-band:after" ], - "sassTokenName" : "$brand-band-scrim-height", - "value" : "3.125rem", - "yamlTokenName" : "BRAND_BAND_SCRIM_HEIGHT", + "colorBackgroundButtonDefaultActive" : { + "auraTokenName" : "colorBackgroundButtonDefaultActive", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-button_neutral.slds-is-selected:active:not([disabled]), .slds-button--neutral.slds-is-selected:active:not([disabled])", ".slds-button_neutral:active, .slds-button--neutral:active", ".slds-button_outline-brand:active", ".slds-button_text-destructive:active" ], + "sassTokenName" : "$color-background-button-default-active", + "value" : "#EEF1F6", + "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_DEFAULT_ACTIVE", "scope" : null }, - "cardColorBackground" : { - "auraTokenName" : "cardColorBackground", + "colorBackgroundButtonDefaultDisabled" : { + "auraTokenName" : "colorBackgroundButtonDefaultDisabled", "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-template_iframe" ], - "sassTokenName" : "$card-color-background", + "cssSelectors" : [ ".slds-button_neutral[disabled], .slds-button_neutral:disabled, .slds-button--neutral[disabled], .slds-button--neutral:disabled", ".slds-button_outline-brand[disabled], .slds-button_outline-brand:disabled", ".slds-button_text-destructive[disabled], .slds-button_text-destructive:disabled" ], + "sassTokenName" : "$color-background-button-default-disabled", "value" : "#FFFFFF", - "yamlTokenName" : "CARD_COLOR_BACKGROUND", + "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED", "scope" : null }, - "colorBackgroundAlt" : { - "auraTokenName" : "colorBackgroundAlt", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-brand-band .slds-brand-band_blank" ], - "sassTokenName" : "$color-background-alt", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_BACKGROUND_ALT", + "colorBackgroundButtonDefaultHover" : { + "auraTokenName" : "colorBackgroundButtonDefaultHover", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-button_inverse:active, .slds-button--inverse:active", ".slds-button_inverse:hover, .slds-button_inverse:focus, .slds-button--inverse:hover, .slds-button--inverse:focus", ".slds-button_neutral.slds-is-selected:hover:not([disabled]), .slds-button_neutral.slds-is-selected:focus:not([disabled]), .slds-button--neutral.slds-is-selected:hover:not([disabled]), .slds-button--neutral.slds-is-selected:focus:not([disabled])", ".slds-button_neutral:hover, .slds-button_neutral:focus, .slds-button--neutral:hover, .slds-button--neutral:focus", ".slds-button_outline-brand:hover, .slds-button_outline-brand:focus", ".slds-button_text-destructive:hover, .slds-button_text-destructive:focus" ], + "sassTokenName" : "$color-background-button-default-hover", + "value" : "#F4F6F9", + "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_DEFAULT_HOVER", "scope" : null }, - "templateGutters" : { - "auraTokenName" : "templateGutters", - "cssProperties" : [ "height", "margin", "padding", "width" ], - "cssSelectors" : [ ".slds-template__content", ".slds-template_app", ".slds-template_bottom-magnet", ".slds-template_default", ".slds-template_iframe" ], - "sassTokenName" : "$template-gutters", - "value" : "0.75rem", - "yamlTokenName" : "TEMPLATE_GUTTERS", + "colorBackgroundButtonInverse" : { + "auraTokenName" : "colorBackgroundButtonInverse", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-button_inverse, .slds-button--inverse" ], + "sassTokenName" : "$color-background-button-inverse", + "value" : "transparent", + "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_INVERSE", "scope" : null }, - "templateProfileGutters" : { - "auraTokenName" : "templateProfileGutters", - "cssProperties" : [ "padding" ], - "cssSelectors" : [ ".slds-template_profile" ], - "sassTokenName" : "$template-profile-gutters", - "value" : "8rem 0.75rem 0.75rem", - "yamlTokenName" : "TEMPLATE_PROFILE_GUTTERS", + "colorBackgroundButtonInverseDisabled" : { + "auraTokenName" : "colorBackgroundButtonInverseDisabled", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-button_inverse[disabled], .slds-button_inverse:disabled, .slds-button--inverse[disabled], .slds-button--inverse:disabled" ], + "sassTokenName" : "$color-background-button-inverse-disabled", + "value" : "transparent", + "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED", + "scope" : null + }, + "colorBackgroundButtonSuccess" : { + "auraTokenName" : "colorBackgroundButtonSuccess", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-button_success, .slds-button--success" ], + "sassTokenName" : "$color-background-button-success", + "value" : "#4BCA81", + "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_SUCCESS", + "scope" : null + }, + "colorBackgroundButtonSuccessActive" : { + "auraTokenName" : "colorBackgroundButtonSuccessActive", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-button_success:active, .slds-button--success:active" ], + "sassTokenName" : "$color-background-button-success-active", + "value" : "#04844B", + "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_SUCCESS_ACTIVE", + "scope" : null + }, + "colorBackgroundButtonSuccessHover" : { + "auraTokenName" : "colorBackgroundButtonSuccessHover", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-button_success:hover, .slds-button_success:focus, .slds-button--success:hover, .slds-button--success:focus" ], + "sassTokenName" : "$color-background-button-success-hover", + "value" : "#04844B", + "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_SUCCESS_HOVER", + "scope" : null + }, + "colorBackgroundDestructive" : { + "auraTokenName" : "colorBackgroundDestructive", + "cssProperties" : [ "background-color", "border-color" ], + "cssSelectors" : [ ".slds-button_destructive, .slds-button--destructive", ".slds-button_destructive:hover, .slds-button_destructive:focus, .slds-button--destructive:hover, .slds-button--destructive:focus" ], + "sassTokenName" : "$color-background-destructive", + "value" : "#C23934", + "yamlTokenName" : "COLOR_BACKGROUND_DESTRUCTIVE", + "scope" : null + }, + "colorBackgroundDestructiveActive" : { + "auraTokenName" : "colorBackgroundDestructiveActive", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-button_destructive:active, .slds-button--destructive:active" ], + "sassTokenName" : "$color-background-destructive-active", + "value" : "#870500", + "yamlTokenName" : "COLOR_BACKGROUND_DESTRUCTIVE_ACTIVE", + "scope" : null + }, + "colorBackgroundDestructiveHover" : { + "auraTokenName" : "colorBackgroundDestructiveHover", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-button_destructive:hover, .slds-button_destructive:focus, .slds-button--destructive:hover, .slds-button--destructive:focus" ], + "sassTokenName" : "$color-background-destructive-hover", + "value" : "#A61A14", + "yamlTokenName" : "COLOR_BACKGROUND_DESTRUCTIVE_HOVER", + "scope" : null + }, + "colorBorder" : { + "auraTokenName" : "colorBorder", + "cssProperties" : [ "border-color" ], + "cssSelectors" : [ ".slds-button_outline-brand[disabled], .slds-button_outline-brand:disabled" ], + "sassTokenName" : "$color-border", + "value" : "#dddbda", + "yamlTokenName" : "COLOR_BORDER", + "scope" : null + }, + "colorBorderButtonFocusInverse" : { + "auraTokenName" : "colorBorderButtonFocusInverse", + "cssProperties" : [ "border" ], + "cssSelectors" : [ ".slds-button_inverse:focus, .slds-button--inverse:focus, .slds-button_icon-border-inverse:focus, .slds-button--icon-border-inverse:focus", "a.slds-button_inverse:focus, a.slds-button--inverse:focus" ], + "sassTokenName" : "$color-border-button-focus-inverse", + "value" : "#ecebea", + "yamlTokenName" : "COLOR_BORDER_BUTTON_FOCUS_INVERSE", + "scope" : null + }, + "colorBorderButtonInverseDisabled" : { + "auraTokenName" : "colorBorderButtonInverseDisabled", + "cssProperties" : [ "border-color" ], + "cssSelectors" : [ ".slds-button_inverse[disabled], .slds-button_inverse:disabled, .slds-button--inverse[disabled], .slds-button--inverse:disabled" ], + "sassTokenName" : "$color-border-button-inverse-disabled", + "value" : "rgba(255, 255, 255, 0.15)", + "yamlTokenName" : "COLOR_BORDER_BUTTON_INVERSE_DISABLED", + "scope" : null + }, + "colorBorderDestructiveActive" : { + "auraTokenName" : "colorBorderDestructiveActive", + "cssProperties" : [ "border-color" ], + "cssSelectors" : [ ".slds-button_destructive:active, .slds-button--destructive:active" ], + "sassTokenName" : "$color-border-destructive-active", + "value" : "#870500", + "yamlTokenName" : "COLOR_BORDER_DESTRUCTIVE_ACTIVE", + "scope" : null + }, + "colorBorderPrimary" : { + "auraTokenName" : "colorBorderPrimary", + "cssProperties" : [ "border-color" ], + "cssSelectors" : [ ".slds-button_neutral, .slds-button--neutral", ".slds-button_neutral.slds-is-selected:hover:not([disabled]), .slds-button_neutral.slds-is-selected:focus:not([disabled]), .slds-button--neutral.slds-is-selected:hover:not([disabled]), .slds-button--neutral.slds-is-selected:focus:not([disabled])", ".slds-button_neutral:active, .slds-button--neutral:active", ".slds-button_neutral:hover, .slds-button_neutral:focus, .slds-button--neutral:hover, .slds-button--neutral:focus", ".slds-button_neutral[disabled], .slds-button_neutral:disabled, .slds-button--neutral[disabled], .slds-button--neutral:disabled" ], + "sassTokenName" : "$color-border-primary", + "value" : "#dddbda", + "yamlTokenName" : "COLOR_BORDER_PRIMARY", + "scope" : null + }, + "colorBorderSuccess" : { + "auraTokenName" : "colorBorderSuccess", + "cssProperties" : [ "border-color" ], + "cssSelectors" : [ ".slds-button_success, .slds-button--success" ], + "sassTokenName" : "$color-border-success", + "value" : "#4BCA81", + "yamlTokenName" : "COLOR_BORDER_SUCCESS", + "scope" : null + }, + "colorBorderSuccessDark" : { + "auraTokenName" : "colorBorderSuccessDark", + "cssProperties" : [ "border-color" ], + "cssSelectors" : [ ".slds-button_success:active, .slds-button--success:active", ".slds-button_success:hover, .slds-button_success:focus, .slds-button--success:hover, .slds-button--success:focus" ], + "sassTokenName" : "$color-border-success-dark", + "value" : "#04844B", + "yamlTokenName" : "COLOR_BORDER_SUCCESS_DARK", + "scope" : null + }, + "colorTextBrandPrimary" : { + "auraTokenName" : "colorTextBrandPrimary", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-button_brand, .slds-button--brand", ".slds-button_brand:active, .slds-button--brand:active", ".slds-button_brand:hover, .slds-button_brand:focus, .slds-button--brand:hover, .slds-button--brand:focus", ".slds-button_dual-stateful.slds-is-pressed", ".slds-button_dual-stateful.slds-is-pressed:focus, .slds-button_dual-stateful.slds-is-pressed:hover" ], + "sassTokenName" : "$color-text-brand-primary", + "value" : "#FFFFFF", + "yamlTokenName" : "COLOR_TEXT_BRAND_PRIMARY", + "scope" : null + }, + "colorTextButtonBrandDisabled" : { + "auraTokenName" : "colorTextButtonBrandDisabled", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-button_brand[disabled], .slds-button_brand:disabled, .slds-button--brand[disabled], .slds-button--brand:disabled", ".slds-button_destructive[disabled], .slds-button_destructive:disabled, .slds-button--destructive[disabled], .slds-button--destructive:disabled", ".slds-button_success[disabled], .slds-button_success:disabled, .slds-button--success[disabled], .slds-button--success:disabled" ], + "sassTokenName" : "$color-text-button-brand-disabled", + "value" : "#FFFFFF", + "yamlTokenName" : "COLOR_TEXT_BUTTON_BRAND_DISABLED", + "scope" : null + }, + "colorTextButtonDefault" : { + "auraTokenName" : "colorTextButtonDefault", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-button_inverse:hover, .slds-button_inverse:focus, .slds-button_inverse:active, .slds-button--inverse:hover, .slds-button--inverse:focus, .slds-button--inverse:active, .slds-button_icon-border-inverse:hover, .slds-button_icon-border-inverse:focus, .slds-button_icon-border-inverse:active, .slds-button--icon-border-inverse:hover, .slds-button--icon-border-inverse:focus, .slds-button--icon-border-inverse:active" ], + "sassTokenName" : "$color-text-button-default", + "value" : "#0070D2", + "yamlTokenName" : "COLOR_TEXT_BUTTON_DEFAULT", + "scope" : null + }, + "colorTextButtonDefaultDisabled" : { + "auraTokenName" : "colorTextButtonDefaultDisabled", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-button[disabled], .slds-button:disabled", ".slds-button_outline-brand[disabled], .slds-button_outline-brand:disabled", ".slds-button_text-destructive[disabled], .slds-button_text-destructive:disabled" ], + "sassTokenName" : "$color-text-button-default-disabled", + "value" : "#dddbda", + "yamlTokenName" : "COLOR_TEXT_BUTTON_DEFAULT_DISABLED", + "scope" : null + }, + "colorTextButtonInverse" : { + "auraTokenName" : "colorTextButtonInverse", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-button_inverse, .slds-button_inverse:link, .slds-button_inverse:visited, .slds-button--inverse, .slds-button--inverse:link, .slds-button--inverse:visited, .slds-button_icon-border-inverse, .slds-button_icon-border-inverse:link, .slds-button_icon-border-inverse:visited, .slds-button--icon-border-inverse, .slds-button--icon-border-inverse:link, .slds-button--icon-border-inverse:visited" ], + "sassTokenName" : "$color-text-button-inverse", + "value" : "#ecebea", + "yamlTokenName" : "COLOR_TEXT_BUTTON_INVERSE", + "scope" : null + }, + "colorTextButtonInverseDisabled" : { + "auraTokenName" : "colorTextButtonInverseDisabled", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-button_inverse[disabled], .slds-button_inverse:disabled, .slds-button--inverse[disabled], .slds-button--inverse:disabled, .slds-button_icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled, .slds-button--icon-border-inverse[disabled], .slds-button--icon-border-inverse:disabled" ], + "sassTokenName" : "$color-text-button-inverse-disabled", + "value" : "rgba(255, 255, 255, 0.50)", + "yamlTokenName" : "COLOR_TEXT_BUTTON_INVERSE_DISABLED", + "scope" : null + }, + "colorTextDefault" : { + "auraTokenName" : "colorTextDefault", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-button_success, .slds-button--success" ], + "sassTokenName" : "$color-text-default", + "value" : "#080707", + "yamlTokenName" : "COLOR_TEXT_DEFAULT", + "scope" : null + }, + "colorTextDestructive" : { + "auraTokenName" : "colorTextDestructive", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-button_text-destructive" ], + "sassTokenName" : "$color-text-destructive", + "value" : "#C23934", + "yamlTokenName" : "COLOR_TEXT_DESTRUCTIVE", + "scope" : null + }, + "colorTextDestructiveHover" : { + "auraTokenName" : "colorTextDestructiveHover", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-button_text-destructive:active", ".slds-button_text-destructive:hover, .slds-button_text-destructive:focus" ], + "sassTokenName" : "$color-text-destructive-hover", + "value" : "#A12B2B", + "yamlTokenName" : "COLOR_TEXT_DESTRUCTIVE_HOVER", + "scope" : null + }, + "colorTextInverse" : { + "auraTokenName" : "colorTextInverse", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-button_destructive, .slds-button--destructive", ".slds-button_destructive:active, .slds-button--destructive:active", ".slds-button_destructive:hover, .slds-button_destructive:focus, .slds-button--destructive:hover, .slds-button--destructive:focus", ".slds-button_success:active, .slds-button--success:active", ".slds-button_success:hover, .slds-button_success:focus, .slds-button--success:hover, .slds-button--success:focus" ], + "sassTokenName" : "$color-text-inverse", + "value" : "#FFFFFF", + "yamlTokenName" : "COLOR_TEXT_INVERSE", + "scope" : null + }, + "fontWeightBold" : { + "auraTokenName" : "fontWeightBold", + "cssProperties" : [ "font-weight" ], + "cssSelectors" : [ ".slds-button" ], + "sassTokenName" : "$font-weight-bold", + "value" : "700", + "yamlTokenName" : "FONT_WEIGHT_BOLD", + "scope" : null + }, + "lineHeightButton" : { + "auraTokenName" : "lineHeightButton", + "cssProperties" : [ "line-height" ], + "cssSelectors" : [ ".slds-button" ], + "sassTokenName" : "$line-height-button", + "value" : "1.875rem", + "yamlTokenName" : "LINE_HEIGHT_BUTTON", + "scope" : null + }, + "lineHeightButtonSmall" : { + "auraTokenName" : "lineHeightButtonSmall", + "cssProperties" : [ "line-height" ], + "cssSelectors" : [ ".slds-button_small, .slds-button--small" ], + "sassTokenName" : "$line-height-button-small", + "value" : "1.75rem", + "yamlTokenName" : "LINE_HEIGHT_BUTTON_SMALL", + "scope" : null + }, + "shadowButtonFocus" : { + "auraTokenName" : "shadowButtonFocus", + "cssProperties" : [ "box-shadow" ], + "cssSelectors" : [ ".slds-button:focus", "a.slds-button:focus" ], + "sassTokenName" : "$shadow-button-focus", + "value" : "0 0 3px #0070D2", + "yamlTokenName" : "SHADOW_BUTTON_FOCUS", + "scope" : null + }, + "shadowButtonFocusInverse" : { + "auraTokenName" : "shadowButtonFocusInverse", + "cssProperties" : [ "box-shadow" ], + "cssSelectors" : [ ".slds-button_inverse:focus, .slds-button--inverse:focus, .slds-button_icon-border-inverse:focus, .slds-button--icon-border-inverse:focus", "a.slds-button_inverse:focus, a.slds-button--inverse:focus" ], + "sassTokenName" : "$shadow-button-focus-inverse", + "value" : "0 0 3px #ecebea", + "yamlTokenName" : "SHADOW_BUTTON_FOCUS_INVERSE", "scope" : null - } - } -}, { - "description" : "Breadcrumbs are typically constructed with an `ol` because their order\nmatters. You mark up breadcrumbs with classes from the horizontal list\nutility. When you add the `.slds-breadcrumb` class, the separators are\nautomatically generated.\n\n**Overflow Menu Variant**\n\nThe overflow menu breadcrumbs variant is a composition of the overflow menu with actions example of the menus component and breadcrumbs component. To implement this, include the overflow menu as the first `
  • ` in the breadcrumb component. In order to vertically align all of the breadcrumb items to the center, add the `.slds-grid_vertical-align-center` class to the `
      `.\n\n#### Accessibility\n\nPlace the breadcrumb in a `nav` element with `role=\"navigation\"`.\nThe `nav` element is also marked-up with `aria-label=\"Breadcrumbs\"` to\ndescribe the type of navigation.", - "annotations" : { - "summary" : "Use breadcrumbs to note the path of a record and help the user to navigate back to the parent.", - "name" : "breadcrumbs", - "support" : "dev-ready", - "base" : "true", - "role" : "navigation", - "lwc" : "true", - "type" : "navigation", - "category" : "base", - "selector" : ".slds-breadcrumb" - }, - "id" : "breadcrumbs", - "docPath" : "./ui/components/breadcrumbs/docs.mdx", - "selectors" : [ ".slds-breadcrumb", ".slds-breadcrumb__item" ], - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Create breadcrumbs component", - "name" : "base", - "selector" : ".slds-breadcrumb", - "restrict" : "ol", - "support" : "dev-ready", - "variant" : "true" }, - "id" : "base", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Item of the breadcrumb list", - "selector" : ".slds-breadcrumb__item", - "restrict" : ".slds-breadcrumb li" - }, - "id" : ".slds-breadcrumb__item", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { "spacingXSmall" : { "auraTokenName" : "spacingXSmall", - "cssProperties" : [ "left", "margin-right", "padding" ], - "cssSelectors" : [ ".slds-breadcrumb .slds-dropdown-trigger", ".slds-breadcrumb .slds-list__item > a, .slds-breadcrumb__item > a", ".slds-breadcrumb .slds-list__item:before, .slds-breadcrumb__item:before" ], + "cssProperties" : [ "margin-left", "margin-right" ], + "cssSelectors" : [ ".slds-button__icon_left, .slds-button__icon--left", ".slds-button__icon_right, .slds-button__icon--right" ], "sassTokenName" : "$spacing-x-small", "value" : "0.5rem", "yamlTokenName" : "SPACING_X_SMALL", "scope" : null + }, + "spacingXxSmall" : { + "auraTokenName" : "spacingXxSmall", + "cssProperties" : [ "margin-left" ], + "cssSelectors" : [ ".slds-button + .slds-button", ".slds-button + .slds-button-group, .slds-button + .slds-button-group-list", ".slds-button-space-left" ], + "sassTokenName" : "$spacing-xx-small", + "value" : "0.25rem", + "yamlTokenName" : "SPACING_XX_SMALL", + "scope" : null + }, + "squareIconMediumBoundary" : { + "auraTokenName" : "squareIconMediumBoundary", + "cssProperties" : [ "min-height" ], + "cssSelectors" : [ ".slds-button_small, .slds-button--small" ], + "sassTokenName" : "$square-icon-medium-boundary", + "value" : "2rem", + "yamlTokenName" : "SQUARE_ICON_MEDIUM_BOUNDARY", + "scope" : null } } }, { "description" : "", "annotations" : { - "summary" : "Builder specific global header", "base" : "true", - "name" : "builder-header", - "selector" : ".slds-builder-header_container", + "name" : "prompt", + "role" : "alert", + "selector" : ".slds-modal_prompt", "support" : "dev-ready", - "category" : "feature", - "type" : "navigation", - "role" : "navigation" + "category" : "experience", + "type" : "messaging", + "layout" : "responsive" }, - "id" : "builder-header", - "docPath" : "./ui/components/builder-header/docs.mdx", - "selectors" : [ ".slds-builder-header", ".slds-builder-header__item", ".slds-builder-header__item-action", ".slds-builder-header__item-label", ".slds-builder-header__nav", ".slds-builder-header__nav-item", ".slds-builder-header__nav-list", ".slds-builder-header__utilities", ".slds-builder-header_container", ".slds-builder-toolbar", ".slds-builder-toolbar__actions", ".slds-builder-toolbar__item-group" ], + "id" : "prompt", + "docPath" : "./ui/components/prompt/docs.mdx", + "selectors" : [ ".slds-modal_prompt" ], "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Container that fixes the builder header to the top of the viewport, contains builder header element", + "summary" : "Initializes Prompt style notification", "name" : "base", - "selector" : ".slds-builder-header_container", - "restrict" : "div", - "support" : "dev-ready", - "variant" : "true" + "selector" : ".slds-modal_prompt", + "restrict" : "section[role=\"alertdialog\"]", + "variant" : "true", + "support" : "dev-ready" }, "id" : "base", "docPath" : null, "selectors" : null, - "restrictees" : [ { - "description" : "", + "restrictees" : [ ], + "tokens" : { } + } ], + "tokens" : { + "spacingXLarge" : { + "auraTokenName" : "spacingXLarge", + "cssProperties" : [ "padding-left", "padding-right" ], + "cssSelectors" : [ ".slds-modal_prompt .slds-modal__content, .slds-modal--prompt .slds-modal__content" ], + "sassTokenName" : "$spacing-x-large", + "value" : "2rem", + "yamlTokenName" : "SPACING_X_LARGE", + "scope" : null + } + } +}, { + "description" : "To initialize a card, apply the `.slds-card` class to a containing `
      `.\nA card is made up of three sections, a header, a body, and a footer.\nThe card header will get the `.slds-card__header` class.\nThe card body will get the `.slds-card__body` class. The card footer will\nget the `.slds-card__footer` class.", + "annotations" : { + "base" : "true", + "name" : "cards", + "role" : "article", + "selector" : ".slds-card, .slds-card-wrapper", + "summary" : "Cards are used to apply a container around a related grouping of information.", + "support" : "dev-ready", + "category" : "base, structure", + "type" : "data-display, layout", + "layout" : "responsive" + }, + "id" : "cards", + "docPath" : "./ui/components/cards/docs.mdx", + "selectors" : [ ".slds-card", ".slds-card__body", ".slds-card__body_inner", ".slds-card_boundary", ".slds-card__footer", ".slds-card__footer-action", ".slds-card__header", ".slds-card__header-link", ".slds-card__header-title", ".slds-card-wrapper", ".slds-einstein-header" ], + "restrictees" : [ { + "description" : "", + "annotations" : { + "summary" : "Initializes card", + "name" : "base", + "selector" : ".slds-card", + "restrict" : "article, div, section", + "variant" : "true", + "support" : "dev-ready" + }, + "id" : "base", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "", "annotations" : { - "summary" : "Creates builder specific global header", - "selector" : ".slds-builder-header", - "restrict" : ".slds-builder-header_container header" + "summary" : "Used to bring back the border on a card when needed", + "selector" : ".slds-card_boundary", + "restrict" : ".slds-card" }, - "id" : ".slds-builder-header", + "id" : ".slds-card_boundary", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Initializes card header", + "selector" : ".slds-card__header", + "restrict" : ".slds-card div" + }, + "id" : ".slds-card__header", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Direct child descendant item of the builder header", - "selector" : ".slds-builder-header__item", - "restrict" : ".slds-builder-header div, .slds-builder-header nav" + "summary" : "Title element within card header", + "selector" : ".slds-card__header-title", + "restrict" : ".slds-card__header h2" }, - "id" : ".slds-builder-header__item", + "id" : ".slds-card__header-title", "docPath" : null, "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Label inside of a header item", - "selector" : ".slds-builder-header__item-label", - "restrict" : ".slds-builder-header__item span, .slds-builder-header__item div, .slds-builder-header__item h1" - }, - "id" : ".slds-builder-header__item-label", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Action or label inside of a header item", - "selector" : ".slds-builder-header__item-action", - "restrict" : ".slds-builder-header__item a, .slds-builder-header__item button" - }, - "id" : ".slds-builder-header__item-action", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], + "restrictees" : [ ], "tokens" : { } }, { "description" : "", "annotations" : { - "summary" : "Container around builder header's nav region", - "selector" : ".slds-builder-header__nav", - "restrict" : ".slds-builder-header nav" + "summary" : "Actionable element within the card header title", + "selector" : ".slds-card__header-link", + "restrict" : ".slds-card__header h2 a" }, - "id" : ".slds-builder-header__nav", + "id" : ".slds-card__header-link", "docPath" : null, "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "List containing navigation items of a builder header", - "selector" : ".slds-builder-header__nav-list", - "restrict" : ".slds-builder-header__nav ul" - }, - "id" : ".slds-builder-header__nav-list", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Items of the builder headers nav", - "selector" : ".slds-builder-header__nav-item", - "restrict" : ".slds-builder-header__nav li" - }, - "id" : ".slds-builder-header__nav-item", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], + "restrictees" : [ ], "tokens" : { } }, { "description" : "", "annotations" : { - "summary" : "Container around builder header's utiltity region containing the back and help links", - "selector" : ".slds-builder-header__utilities", - "restrict" : ".slds-builder-header div" + "summary" : "Einstein themed card header", + "name" : "einstein", + "selector" : ".slds-einstein-header", + "restrict" : ".slds-card__header", + "variant" : "true", + "support" : "dev-ready" }, - "id" : ".slds-builder-header__utilities", + "id" : "einstein", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -2118,36 +2059,45 @@ }, { "description" : "", "annotations" : { - "name" : "toolbar", - "summary" : "Builder header toolbar", - "selector" : ".slds-builder-toolbar", - "restrict" : ".slds-builder-header_container div", - "support" : "dev-ready", - "variant" : "true" + "summary" : "Initializes card body", + "selector" : ".slds-card__body", + "restrict" : ".slds-card div" }, - "id" : "toolbar", + "id" : ".slds-card__body", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Region of Builder header toolbar that contains the document actions", - "selector" : ".slds-builder-toolbar__actions", - "restrict" : ".slds-builder-toolbar div" + "summary" : "Apply the same spacing found on the card header to the card body", + "selector" : ".slds-card__body_inner", + "restrict" : ".slds-card__body" }, - "id" : ".slds-builder-toolbar__actions", + "id" : ".slds-card__body_inner", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } - }, { + } ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Initializes card footer", + "selector" : ".slds-card__footer", + "restrict" : ".slds-card footer" + }, + "id" : ".slds-card__footer", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Region containing button icon groups of Builder header toolbar", - "selector" : ".slds-builder-toolbar__item-group", - "restrict" : ".slds-builder-toolbar div" + "summary" : "Actionable element within card footer", + "selector" : ".slds-card__footer-action", + "restrict" : ".slds-card__footer a" }, - "id" : ".slds-builder-toolbar__item-group", + "id" : ".slds-card__footer-action", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -2156,377 +2106,311 @@ "tokens" : { } } ], "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Removes the card look from nested cards and pulls them to the boundary of the card wrapper, making the nested cards look like they are inside of one card", + "name" : "wrapper", + "selector" : ".slds-card-wrapper", + "restrict" : "div", + "variant" : "true", + "support" : "dev-ready" + }, + "id" : "wrapper", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } } ], "tokens" : { + "borderRadiusMedium" : { + "auraTokenName" : "borderRadiusMedium", + "cssProperties" : [ "border-radius" ], + "cssSelectors" : [ ".slds-card", ".slds-card .slds-card_boundary, .slds-modal .slds-card_boundary, .slds-tabs_default .slds-card_boundary, .slds-tabs--default .slds-card_boundary", ".slds-card-wrapper", ".slds-tabs_card .slds-card_boundary, .slds-tabs_card.slds-tabs_card .slds-card_boundary, .slds-card-wrapper .slds-card_boundary", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], + "sassTokenName" : "$border-radius-medium", + "value" : "0.25rem", + "yamlTokenName" : "BORDER_RADIUS_MEDIUM", + "scope" : null + }, "borderWidthThin" : { "auraTokenName" : "borderWidthThin", - "cssProperties" : [ "border-bottom", "border-left" ], - "cssSelectors" : [ ".slds-builder-header__item + .slds-builder-header__item", ".slds-builder-header__nav-item + .slds-builder-header__nav-item, .slds-builder-header__nav-item + .slds-builder-header__utilities-item, .slds-builder-header__utilities-item + .slds-builder-header__nav-item, .slds-builder-header__utilities-item + .slds-builder-header__utilities-item", ".slds-builder-toolbar" ], + "cssProperties" : [ "border", "border-bottom", "border-top" ], + "cssSelectors" : [ ".slds-card", ".slds-card .slds-card_boundary, .slds-modal .slds-card_boundary, .slds-tabs_default .slds-card_boundary, .slds-tabs--default .slds-card_boundary", ".slds-card-wrapper", ".slds-card__footer", ".slds-region__pinned-left .slds-card, .slds-region__pinned-left .slds-card-wrapper, .slds-region__pinned-left .slds-card_boundary, .slds-region__pinned-left .slds-tabs_card, .slds-region__pinned-right .slds-card, .slds-region__pinned-right .slds-card-wrapper, .slds-region__pinned-right .slds-card_boundary, .slds-region__pinned-right .slds-tabs_card", ".slds-tabs_card .slds-card_boundary, .slds-tabs_card.slds-tabs_card .slds-card_boundary, .slds-card-wrapper .slds-card_boundary", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], "sassTokenName" : "$border-width-thin", "value" : "1px", "yamlTokenName" : "BORDER_WIDTH_THIN", "scope" : null }, - "colorBackgroundAlt" : { - "auraTokenName" : "colorBackgroundAlt", + "cardColorBackground" : { + "auraTokenName" : "cardColorBackground", "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-builder-toolbar" ], - "sassTokenName" : "$color-background-alt", + "cssSelectors" : [ ".slds-card", ".slds-card .slds-card, .slds-card .slds-card-wrapper, .slds-card-wrapper .slds-card, .slds-card-wrapper .slds-card-wrapper, .slds-modal .slds-card, .slds-modal .slds-card-wrapper, .slds-tabs_default .slds-card, .slds-tabs_default .slds-card-wrapper, .slds-tabs--default .slds-card, .slds-tabs--default .slds-card-wrapper, .slds-tabs_card .slds-card, .slds-tabs_card .slds-card-wrapper, .slds-tabs_card.slds-tabs_card .slds-card, .slds-tabs_card.slds-tabs_card .slds-card-wrapper", ".slds-card-wrapper", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], + "sassTokenName" : "$card-color-background", "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_BACKGROUND_ALT", - "scope" : null - }, - "colorBackgroundAltInverse" : { - "auraTokenName" : "colorBackgroundAltInverse", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-builder-header" ], - "sassTokenName" : "$color-background-alt-inverse", - "value" : "#16325C", - "yamlTokenName" : "COLOR_BACKGROUND_ALT_INVERSE", + "yamlTokenName" : "CARD_COLOR_BACKGROUND", "scope" : null }, - "colorBorder" : { - "auraTokenName" : "colorBorder", - "cssProperties" : [ "border-bottom" ], - "cssSelectors" : [ ".slds-builder-toolbar" ], - "sassTokenName" : "$color-border", + "cardColorBorder" : { + "auraTokenName" : "cardColorBorder", + "cssProperties" : [ "border" ], + "cssSelectors" : [ ".slds-card", ".slds-card .slds-card_boundary, .slds-modal .slds-card_boundary, .slds-tabs_default .slds-card_boundary, .slds-tabs--default .slds-card_boundary", ".slds-card-wrapper", ".slds-tabs_card .slds-card_boundary, .slds-tabs_card.slds-tabs_card .slds-card_boundary, .slds-card-wrapper .slds-card_boundary", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], + "sassTokenName" : "$card-color-border", "value" : "#dddbda", - "yamlTokenName" : "COLOR_BORDER", + "yamlTokenName" : "CARD_COLOR_BORDER", "scope" : null }, - "colorGray7" : { - "auraTokenName" : "colorGray7", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-builder-header__item-action:hover, .slds-builder-header__item-action:focus" ], - "sassTokenName" : "$color-gray-7", - "value" : "#b0adab", - "yamlTokenName" : "COLOR_GRAY_7", + "cardFontWeight" : { + "auraTokenName" : "cardFontWeight", + "cssProperties" : [ "font-weight" ], + "cssSelectors" : [ ".slds-card__header-link", ".slds-card__header-title" ], + "sassTokenName" : "$card-font-weight", + "value" : "700", + "yamlTokenName" : "CARD_FONT_WEIGHT", "scope" : null }, - "colorTextInverse" : { - "auraTokenName" : "colorTextInverse", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-builder-header" ], - "sassTokenName" : "$color-text-inverse", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_TEXT_INVERSE", + "cardFooterColorBorder" : { + "auraTokenName" : "cardFooterColorBorder", + "cssProperties" : [ "border-top" ], + "cssSelectors" : [ ".slds-card__footer" ], + "sassTokenName" : "$card-footer-color-border", + "value" : "#dddbda", + "yamlTokenName" : "CARD_FOOTER_COLOR_BORDER", "scope" : null }, - "heightHeader" : { - "auraTokenName" : "heightHeader", - "cssProperties" : [ "height" ], - "cssSelectors" : [ ".slds-builder-header" ], - "sassTokenName" : "$height-header", - "value" : "3.125rem", - "yamlTokenName" : "HEIGHT_HEADER", + "cardFooterTextAlign" : { + "auraTokenName" : "cardFooterTextAlign", + "cssProperties" : [ "text-align" ], + "cssSelectors" : [ ".slds-card__footer" ], + "sassTokenName" : "$card-footer-text-align", + "value" : "center", + "yamlTokenName" : "CARD_FOOTER_TEXT_ALIGN", "scope" : null }, - "spacingMedium" : { - "auraTokenName" : "spacingMedium", + "cardShadow" : { + "auraTokenName" : "cardShadow", + "cssProperties" : [ "box-shadow" ], + "cssSelectors" : [ ".slds-card", ".slds-card-wrapper", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], + "sassTokenName" : "$card-shadow", + "value" : "0 2px 2px 0 rgba(0, 0, 0, 0.10)", + "yamlTokenName" : "CARD_SHADOW", + "scope" : null + }, + "colorBorder" : { + "auraTokenName" : "colorBorder", + "cssProperties" : [ "border-bottom" ], + "cssSelectors" : [ ".slds-region__pinned-left .slds-card, .slds-region__pinned-left .slds-card-wrapper, .slds-region__pinned-left .slds-card_boundary, .slds-region__pinned-left .slds-tabs_card, .slds-region__pinned-right .slds-card, .slds-region__pinned-right .slds-card-wrapper, .slds-region__pinned-right .slds-card_boundary, .slds-region__pinned-right .slds-tabs_card" ], + "sassTokenName" : "$color-border", + "value" : "#dddbda", + "yamlTokenName" : "COLOR_BORDER", + "scope" : null + }, + "fontSize3" : { + "auraTokenName" : "fontSize3", + "cssProperties" : [ "font-size" ], + "cssSelectors" : [ ".slds-card__footer" ], + "sassTokenName" : "$font-size-3", + "value" : "0.8125rem", + "yamlTokenName" : "FONT_SIZE_3", + "scope" : null + }, + "lineHeightHeading" : { + "auraTokenName" : "lineHeightHeading", + "cssProperties" : [ "line-height" ], + "cssSelectors" : [ ".slds-card__header-title" ], + "sassTokenName" : "$line-height-heading", + "value" : "1.25", + "yamlTokenName" : "LINE_HEIGHT_HEADING", + "scope" : null + }, + "varFontSize5" : { + "auraTokenName" : "varFontSize5", + "cssProperties" : [ "font-size" ], + "cssSelectors" : [ ".slds-card__header-title" ], + "sassTokenName" : "$var-font-size-5", + "value" : "1rem", + "yamlTokenName" : "VAR_FONT_SIZE_5", + "scope" : null + }, + "varFontSize6" : { + "auraTokenName" : "varFontSize6", + "cssProperties" : [ "font-size" ], + "cssSelectors" : [ ".slds-card__header-title" ], + "sassTokenName" : "$var-font-size-6", + "value" : "1.125rem", + "yamlTokenName" : "VAR_FONT_SIZE_6", + "scope" : null + }, + "varSpacingHorizontalMedium" : { + "auraTokenName" : "varSpacingHorizontalMedium", "cssProperties" : [ "padding" ], - "cssSelectors" : [ ".slds-builder-header__item-action, .slds-builder-header__item-label", ".slds-builder-toolbar" ], - "sassTokenName" : "$spacing-medium", + "cssSelectors" : [ ".slds-card__body_inner, .slds-card__body--inner", ".slds-card__footer", ".slds-card__header", ".slds-tabs_card .slds-card_boundary .slds-card__body_inner, .slds-tabs_card .slds-card_boundary .slds-card__body--inner, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__body_inner, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__body--inner, .slds-card-wrapper .slds-card_boundary .slds-card__body_inner, .slds-card-wrapper .slds-card_boundary .slds-card__body--inner", ".slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-card-wrapper .slds-card_boundary .slds-card__footer", ".slds-tabs_card .slds-card_boundary .slds-card__header, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__header, .slds-card-wrapper .slds-card_boundary .slds-card__header", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], + "sassTokenName" : "$var-spacing-horizontal-medium", "value" : "1rem", - "yamlTokenName" : "SPACING_MEDIUM", + "yamlTokenName" : "VAR_SPACING_HORIZONTAL_MEDIUM", "scope" : null }, - "spacingXSmall" : { - "auraTokenName" : "spacingXSmall", + "varSpacingMedium" : { + "auraTokenName" : "varSpacingMedium", "cssProperties" : [ "padding" ], - "cssSelectors" : [ ".slds-builder-toolbar" ], - "sassTokenName" : "$spacing-x-small", - "value" : "0.5rem", - "yamlTokenName" : "SPACING_X_SMALL", + "cssSelectors" : [ ".slds-card-wrapper" ], + "sassTokenName" : "$var-spacing-medium", + "value" : "1rem", + "yamlTokenName" : "VAR_SPACING_MEDIUM", "scope" : null }, - "spacingXxSmall" : { - "auraTokenName" : "spacingXxSmall", - "cssProperties" : [ "margin-left" ], - "cssSelectors" : [ ".slds-builder-toolbar__item-group + .slds-builder-toolbar__item-group" ], - "sassTokenName" : "$spacing-xx-small", - "value" : "0.25rem", - "yamlTokenName" : "SPACING_XX_SMALL", + "varSpacingVerticalMedium" : { + "auraTokenName" : "varSpacingVerticalMedium", + "cssProperties" : [ "margin-top" ], + "cssSelectors" : [ ".slds-card + .slds-card" ], + "sassTokenName" : "$var-spacing-vertical-medium", + "value" : "1rem", + "yamlTokenName" : "VAR_SPACING_VERTICAL_MEDIUM", "scope" : null }, - "zIndexSticky" : { - "auraTokenName" : "zIndexSticky", - "cssProperties" : [ "z-index" ], - "cssSelectors" : [ ".slds-builder-header_container" ], - "sassTokenName" : "$z-index-sticky", - "value" : "100", - "yamlTokenName" : "Z_INDEX_STICKY", + "varSpacingVerticalSmall" : { + "auraTokenName" : "varSpacingVerticalSmall", + "cssProperties" : [ "margin", "margin-bottom", "margin-top", "padding" ], + "cssSelectors" : [ ".slds-card__body", ".slds-card__footer", ".slds-card__header", ".slds-card__tile", ".slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-card-wrapper .slds-card_boundary .slds-card__footer", ".slds-tabs_card .slds-card_boundary .slds-card__header, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__header, .slds-card-wrapper .slds-card_boundary .slds-card__header", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], + "sassTokenName" : "$var-spacing-vertical-small", + "value" : "0.75rem", + "yamlTokenName" : "VAR_SPACING_VERTICAL_SMALL", "scope" : null } } }, { - "description" : "Buttons in a group are surrounded by a parent with the `.slds-button-group` class, unless they are in a list (in which case they use `.slds-button-group-list`. If the last button is an icon, like the down triangle, use the `.slds-button_icon-border-filled` class when accompanying a `.slds-button_neutral` group.\n\nIf the last button in a group needs to be wrapped in another element (for example, a drop-down trigger), add the `.slds-button_last` class to the wrapper element to create proper spacing and borders.\n\n#### Accessibility\n\nUnless you are using the list version, include the Aria role `role=\"group\"` so that assistive technologies are alerted to the grouping.", + "description" : "", "annotations" : { - "summary" : "Button groups are used to bunch together buttons with similar actions", - "layout" : "responsive", - "name" : "button-groups", - "support" : "dev-ready", "base" : "true", - "role" : "button", - "lwc" : "true", - "type" : "action", - "category" : "base", - "selector" : ".slds-button-group, .slds-button-group-list, .slds-button-group-row" + "name" : "modals", + "role" : "modal-dialog", + "selector" : ".slds-modal", + "support" : "dev-ready", + "category" : "structure", + "type" : "layout", + "layout" : "adaptive" }, - "id" : "button-groups", - "docPath" : "./ui/components/button-groups/docs.mdx", - "selectors" : [ ".slds-button-group", ".slds-button-group, .slds-button-group-list, .slds-button-group-row", ".slds-button-group-item", ".slds-button-group-list", ".slds-button-group-row", ".slds-button_last" ], + "id" : "modals", + "docPath" : "./ui/components/modals/docs.mdx", + "selectors" : [ ".slds-backdrop", ".slds-backdrop_open", ".slds-fade-in-open", ".slds-modal", ".slds-modal__close", ".slds-modal__container", ".slds-modal__content", ".slds-modal__footer", ".slds-modal__footer_directional", ".slds-modal__header", ".slds-modal__header_empty", ".slds-modal_large", ".slds-modal_medium", ".slds-modal__menu", ".slds-modal_small", ".slds-modal__title", ".slds-slide-down-cancel", ".slds-slide-up-open", ".slds-slide-up-saving" ], "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Creates button group container", + "summary" : null, "name" : "base", - "selector" : ".slds-button-group", - "restrict" : "div", - "support" : "dev-ready", - "variant" : "true" + "selector" : ".slds-modal", + "restrict" : "section", + "variant" : "true", + "support" : "dev-ready" }, "id" : "base", "docPath" : null, "selectors" : null, "restrictees" : [ { - "description" : "", + "description" : "Centers and sizes the modal horizontally and confines modal within viewport height", "annotations" : { - "summary" : "If the last button in the group is required to be wrapped in a div, apply this class to the div", - "selector" : ".slds-button_last", - "restrict" : ".slds-button-group div, .slds-button-group-list div" + "summary" : null, + "selector" : ".slds-modal__container", + "restrict" : ".slds-modal div" }, - "id" : ".slds-button_last", + "id" : ".slds-modal__container", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Creates button group container for list items", - "name" : "list", - "selector" : ".slds-button-group-list", - "restrict" : "ul", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "list", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", + }, { + "description" : "Creates the Modal Header container.", "annotations" : { - "summary" : "If the last button in the group is required to be wrapped in a div, apply this class to the div", - "selector" : ".slds-button_last", - "restrict" : ".slds-button-group div, .slds-button-group-list div" + "summary" : null, + "selector" : ".slds-modal__header", + "restrict" : ".slds-modal header" }, - "id" : ".slds-button_last", + "id" : ".slds-modal__header", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "Use when modal header has no content", + "annotations" : { + "summary" : null, + "selector" : ".slds-modal__header_empty", + "restrict" : ".slds-modal__header" + }, + "id" : ".slds-modal__header_empty", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "Modal title (optional)", + "annotations" : { + "summary" : null, + "selector" : ".slds-modal__title", + "restrict" : ".slds-modal__header h2" + }, + "id" : ".slds-modal__title", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], + "tokens" : { } + }, { + "description" : "Creates the scrollable content area for the modal.", + "annotations" : { + "summary" : null, + "selector" : ".slds-modal__content", + "restrict" : ".slds-modal div" + }, + "id" : ".slds-modal__content", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Creates button group container that provides spacing between each button", - "name" : "row", - "selector" : ".slds-button-group-row", - "restrict" : "div, ul", - "support" : "dev-ready", - "variant" : "true", - "lwc" : "true" - }, - "id" : "row", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", + }, { + "description" : "Creates the shaded menu area for the modal.", "annotations" : { - "summary" : "Each item inside of a button group row that needs spacing applied to it", - "selector" : ".slds-button-group-item", - "restrict" : ".slds-button-group-row li, .slds-button-group-row div" + "summary" : null, + "selector" : ".slds-modal__menu", + "restrict" : ".slds-modal div" }, - "id" : ".slds-button-group-item", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { - "borderWidthThin" : { - "auraTokenName" : "borderWidthThin", - "cssProperties" : [ "border-width", "margin-left" ], - "cssSelectors" : [ ".slds-button-group .slds-button + .slds-button, .slds-button-group .slds-button + .slds-button_last .slds-button, .slds-button-group .slds-button + .slds-button--last .slds-button, .slds-button-group-list li + li .slds-button", ".slds-button-group .slds-button, .slds-button-group-list .slds-button", ".slds-button.slds-button_last.slds-button_last", ".slds-button.slds-button_middle.slds-button_middle" ], - "sassTokenName" : "$border-width-thin", - "value" : "1px", - "yamlTokenName" : "BORDER_WIDTH_THIN", - "scope" : null - }, - "buttonBorderRadius" : { - "auraTokenName" : "buttonBorderRadius", - "cssProperties" : [ "border-radius" ], - "cssSelectors" : [ ".slds-button-group .slds-button:last-child, .slds-button-group-list li:last-child .slds-button, .slds-button-group .slds-button_last .slds-button, .slds-button-group .slds-button--last .slds-button, .slds-button-group .slds-button.slds-button_last, .slds-button-group .slds-button.slds-button--last, .slds-button-group .slds-button_last .slds-button:only-child, .slds-button-group .slds-button--last .slds-button:only-child, .slds-button-group .slds-button.slds-button_last, .slds-button-group .slds-button.slds-button--last", ".slds-button-group .slds-button:only-child, .slds-button-group-list li:only-child .slds-button", ".slds-button-group-list li:first-child .slds-button, .slds-button-group .slds-button:first-child", ".slds-button.slds-button_first.slds-button_first", ".slds-button.slds-button_last.slds-button_last" ], - "sassTokenName" : "$button-border-radius", - "value" : ".25rem", - "yamlTokenName" : "BUTTON_BORDER_RADIUS", - "scope" : null - }, - "buttonIconColorBorderPrimary" : { - "auraTokenName" : "buttonIconColorBorderPrimary", - "cssProperties" : [ "box-shadow" ], - "cssSelectors" : [ ".slds-button-group .slds-button_brand + .slds-button_last .slds-button_icon-brand, .slds-button-group .slds-button_brand + .slds-button--last .slds-button_icon-brand, .slds-button-group-list li:last-child .slds-button_icon-brand" ], - "sassTokenName" : "$button-icon-color-border-primary", - "value" : "#FFFFFF", - "yamlTokenName" : "BUTTON_ICON_COLOR_BORDER_PRIMARY", - "scope" : null - }, - "spacingXxSmall" : { - "auraTokenName" : "spacingXxSmall", - "cssProperties" : [ "margin-left" ], - "cssSelectors" : [ ".slds-button-group + .slds-button-group, .slds-button-group + .slds-button-group-list, .slds-button-group + .slds-button, .slds-button-group-list + .slds-button-group-list, .slds-button-group-list + .slds-button-group, .slds-button-group-list + .slds-button", ".slds-button-group-row .slds-button-group-item + .slds-button-group-item" ], - "sassTokenName" : "$spacing-xx-small", - "value" : "0.25rem", - "yamlTokenName" : "SPACING_XX_SMALL", - "scope" : null - }, - "zIndexDefault" : { - "auraTokenName" : "zIndexDefault", - "cssProperties" : [ "z-index" ], - "cssSelectors" : [ ".slds-button-group .slds-button:focus, .slds-button-group-list .slds-button:focus" ], - "sassTokenName" : "$z-index-default", - "value" : "1", - "yamlTokenName" : "Z_INDEX_DEFAULT", - "scope" : null - } - } -}, { - "description" : "#### Accessibility\n\nIf an icon button doesn’t include a label, use a `title` attribute to show on hover for sighted users, and a span with `.slds-assistive-text` to describe the icon for screen readers.", - "annotations" : { - "summary" : "Buttons icons provide the user with visual iconography that is typically used to invoke an event or action.", - "layout" : "responsive", - "name" : "button-icons", - "support" : "dev-ready", - "base" : "true", - "role" : "button", - "lwc" : "true", - "type" : "action", - "category" : "base", - "selector" : ".slds-button_icon, .slds-button_icon-brand, .slds-button_icon-container, .slds-button_icon-border, .slds-button_icon-border-filled, .slds-button_icon-inverse, .slds-button_icon-border-inverse" - }, - "id" : "button-icons", - "docPath" : "./ui/components/button-icons/docs.mdx", - "selectors" : [ ".slds-button__icon_hint", ".slds-button__icon_inverse-hint", ".slds-button_icon", ".slds-button_icon, .slds-button_icon-brand, .slds-button_icon-container, .slds-button_icon-border, .slds-button_icon-border-filled, .slds-button_icon-inverse, .slds-button_icon-border-inverse", ".slds-button_icon-border", ".slds-button_icon-border-filled", ".slds-button_icon-border-inverse", ".slds-button_icon-brand", ".slds-button_icon-container", ".slds-button_icon-container-more", ".slds-button_icon-current-color", ".slds-button_icon-error", ".slds-button_icon-inverse", ".slds-button_icon-more", ".slds-button_icon-small", ".slds-button_icon-x-small", ".slds-button_icon-xx-small", ".slds-is-selected" ], - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Creates a button that looks like a plain icon", - "name" : "base", - "selector" : ".slds-button_icon", - "restrict" : "button", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "base", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Default width + height for button icon with containers", - "selector" : ".slds-button_icon-container", - "restrict" : ".slds-button_icon" - }, - "id" : ".slds-button_icon-container", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Transparent themed button icon - Button icon has a border with a transparent background", - "selector" : ".slds-button_icon-border", - "restrict" : ".slds-button_icon" - }, - "id" : ".slds-button_icon-border", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Button icon with border and transparent background, to be used on an inversed background", - "selector" : ".slds-button_icon-border-inverse", - "restrict" : ".slds-button_icon" - }, - "id" : ".slds-button_icon-border-inverse", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Branded button icon - Button icon has a filled background with the brand color", - "selector" : ".slds-button_icon-brand", - "restrict" : ".slds-button_icon" - }, - "id" : ".slds-button_icon-brand", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Neutral themed button icon - Button icon has a border with a filled background", - "selector" : ".slds-button_icon-border-filled", - "restrict" : ".slds-button_icon" - }, - "id" : ".slds-button_icon-border-filled", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Bare button icon with no border or background, to be used on an inversed background", - "selector" : ".slds-button_icon-inverse", - "restrict" : ".slds-button_icon" - }, - "id" : ".slds-button_icon-inverse", + "id" : ".slds-modal__menu", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "Creates the Modal Footer container.", "annotations" : { - "summary" : "Error state - Typically used in conjunction with an error toolip", - "selector" : ".slds-button_icon-error", - "restrict" : ".slds-button_icon" + "summary" : null, + "selector" : ".slds-modal__footer", + "restrict" : ".slds-modal footer" }, - "id" : ".slds-button_icon-error", + "id" : ".slds-modal__footer", "docPath" : null, "selectors" : null, - "restrictees" : [ ], + "restrictees" : [ { + "description" : "Makes buttons inside the footer spread to both left and right.", + "annotations" : { + "summary" : null, + "selector" : ".slds-modal__footer_directional", + "restrict" : ".slds-modal__footer", + "modifier" : "true", + "group" : "direction" + }, + "id" : ".slds-modal__footer_directional", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], "tokens" : { } }, { - "description" : "", + "description" : "Positions the close button to the top right outside of the modal.", "annotations" : { - "summary" : "Apply the current color to the icon contained within", - "selector" : ".slds-button_icon-current-color", - "restrict" : ".slds-button_icon" + "summary" : null, + "selector" : ".slds-modal__close", + "restrict" : ".slds-modal button" }, - "id" : ".slds-button_icon-current-color", + "id" : ".slds-modal__close", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -2534,10 +2418,11 @@ }, { "description" : "", "annotations" : { - "summary" : "Changes a button icon container to be 24x24px", + "summary" : "Widens the modal to take more horizontal space than default", "name" : "small", - "selector" : ".slds-button_icon-small", - "restrict" : ".slds-button_icon", + "selector" : ".slds-modal_small", + "restrict" : ".slds-modal", + "modifier" : "true", "group" : "size" }, "id" : "small", @@ -2548,13 +2433,14 @@ }, { "description" : "", "annotations" : { - "summary" : "Changes a button icon container to be 20x20px", - "name" : "x-small", - "selector" : ".slds-button_icon-x-small", - "restrict" : ".slds-button_icon", + "summary" : "Widens the modal to take more horizontal space than small", + "name" : "medium", + "selector" : ".slds-modal_medium", + "restrict" : ".slds-modal", + "modifier" : "true", "group" : "size" }, - "id" : "x-small", + "id" : "medium", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -2562,25 +2448,28 @@ }, { "description" : "", "annotations" : { - "summary" : "Changes a button icon container to be 16x16px", - "name" : "xx-small", - "selector" : ".slds-button_icon-xx-small", - "restrict" : ".slds-button_icon", + "summary" : "Widens the modal to take more horizontal space than large", + "name" : "large", + "selector" : ".slds-modal_large", + "restrict" : ".slds-modal", + "modifier" : "true", "group" : "size" }, - "id" : "xx-small", + "id" : "large", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "Allows the modal to be visible.", "annotations" : { - "summary" : "Creates a button menu icon container that has borders and a filled background", - "selector" : ".slds-button_icon-more", - "restrict" : ".slds-button_icon" + "summary" : null, + "selector" : ".slds-fade-in-open", + "restrict" : ".slds-modal", + "modifier" : "true", + "group" : "animation" }, - "id" : ".slds-button_icon-more", + "id" : ".slds-fade-in-open", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -2588,11 +2477,13 @@ }, { "description" : "", "annotations" : { - "summary" : "Creates a button menu icon container that has no borders", - "selector" : ".slds-button_icon-container-more", - "restrict" : ".slds-button_icon" + "summary" : null, + "selector" : ".slds-slide-up-open", + "restrict" : ".slds-modal", + "modifier" : "true", + "group" : "animation" }, - "id" : ".slds-button_icon-container-more", + "id" : ".slds-slide-up-open", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -2600,11 +2491,13 @@ }, { "description" : "", "annotations" : { - "summary" : "A parent class must be put on anything that contains a .slds-button__icon_hint so that the child reacts when the parent is hovered.", - "selector" : ".slds-button__icon_hint", - "restrict" : ".slds-button_icon .slds-button__icon" + "summary" : null, + "selector" : ".slds-slide-up-saving", + "restrict" : ".slds-modal", + "modifier" : "true", + "group" : "animation" }, - "id" : ".slds-button__icon_hint", + "id" : ".slds-slide-up-saving", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -2612,536 +2505,418 @@ }, { "description" : "", "annotations" : { - "summary" : "A parent class must be put on anything that contains a .slds-button__icon_inverse-hint so that the child reacts when the parent is hovered. This is for a dark background.", - "selector" : ".slds-button__icon_inverse-hint", - "restrict" : ".slds-button_icon .slds-button__icon" + "summary" : null, + "selector" : ".slds-slide-down-cancel", + "restrict" : ".slds-modal", + "modifier" : "true", + "group" : "animation" }, - "id" : ".slds-button__icon_inverse-hint", + "id" : ".slds-slide-down-cancel", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "The stateful button requires the `.slds-button--icon-border` class in addition to the `.slds-button` class.\n\nThe stateful inverse button works just like the stateful button. It requires the `.slds-button--icon-border-inverse` class in addition to the `.slds-button` class.\n\nStateful icons can be toggled on and off and retain their state. JavaScript is used to add the `.slds-is-selected` class to the button when activated.\n\n#### Accessibility\n\nFor accessibility, implement the [ARIA Toggle Button](http://w3c.github.io/aria-practices/#button) concept.\n- Similar to a mute button, the button represents a pressed or unpressed state.\n- Button text doesn't change per state\n- `aria-pressed` is set to `true` or `false`, depending its state", + "description" : "Creates the shaded backdrop used behind the modal.", "annotations" : { - "summary" : "Stateful Button Icon", - "name" : "stateful", - "selector" : ".slds-is-selected", - "restrict" : ".slds-button_icon", - "support" : "dev-ready", - "variant" : "true", - "lwc" : "true" + "summary" : null, + "selector" : ".slds-backdrop", + "restrict" : ".slds-modal ~ div" }, - "id" : "stateful", + "id" : ".slds-backdrop", "docPath" : null, "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Creates a button icon inside of a filled container with a border", - "name" : "bordered-filled-container", - "selector" : ".slds-button_icon-border-filled", - "restrict" : "button", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "bordered-filled-container", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Creates a button icon inside of a transparent container with a border on an inversed background", - "name" : "bordered-inverse", - "selector" : ".slds-button_icon-border-inverse", - "restrict" : "button", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "bordered-inverse", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Creates a button icon inside of a transparent container with a border", - "name" : "bordered-transparent-container", - "selector" : ".slds-button_icon-border", - "restrict" : "button", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "bordered-transparent-container", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Creates a brand button icon", - "name" : "brand", - "selector" : ".slds-button_icon-brand", - "restrict" : "button", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "brand", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Creates a button icon inside of a transparent container with a border on an inversed background", - "name" : "inverse", - "selector" : ".slds-button_icon-inverse", - "restrict" : "button", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "inverse", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Creates a button icon inside of a transparent container", - "name" : "transparent-container", - "selector" : ".slds-button_icon-container", - "restrict" : "button", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "transparent-container", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], + "restrictees" : [ { + "description" : "Allows the backdrop to be visible.", + "annotations" : { + "summary" : null, + "selector" : ".slds-backdrop_open", + "restrict" : ".slds-backdrop", + "modifier" : "true" + }, + "id" : ".slds-backdrop_open", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], + "tokens" : { } + } ], "tokens" : { } } ], "tokens" : { - "brandAccessible" : { - "auraTokenName" : "brandAccessible", - "cssProperties" : [ "background-color", "border-color", "fill" ], - "cssSelectors" : [ ".slds-button_icon-container.slds-is-selected, .slds-button--icon-container.slds-is-selected, .slds-button_icon-border.slds-is-selected, .slds-button--icon-border.slds-is-selected, .slds-button_icon-border-filled.slds-is-selected, .slds-button_icon-border-inverse.slds-is-selected", ".slds-button_icon-more:hover .slds-button__icon, .slds-button_icon-more:focus .slds-button__icon, .slds-button--icon-more:hover .slds-button__icon, .slds-button--icon-more:focus .slds-button__icon" ], - "sassTokenName" : "$brand-accessible", - "value" : "#0070d2", - "yamlTokenName" : "BRAND_ACCESSIBLE", + "borderRadiusMedium" : { + "auraTokenName" : "borderRadiusMedium", + "cssProperties" : [ "border-bottom-left-radius", "border-bottom-right-radius", "border-radius", "border-top-left-radius", "border-top-right-radius" ], + "cssSelectors" : [ ".slds-modal__container", ".slds-modal__content:last-child, .slds-modal__content_has-hidden-footer", ".slds-modal__footer", ".slds-modal__header", ".slds-modal__header_empty + .slds-modal__content, .slds-modal__header--empty + .slds-modal__content", ".slds-modal__menu" ], + "sassTokenName" : "$border-radius-medium", + "value" : "0.25rem", + "yamlTokenName" : "BORDER_RADIUS_MEDIUM", "scope" : null }, - "brandAccessibleActive" : { - "auraTokenName" : "brandAccessibleActive", - "cssProperties" : [ "background-color", "border-color", "fill" ], - "cssSelectors" : [ ".slds-button_icon-container.slds-is-selected:active, .slds-button--icon-container.slds-is-selected:active, .slds-button_icon-border.slds-is-selected:active, .slds-button--icon-border.slds-is-selected:active, .slds-button_icon-border-filled.slds-is-selected:active, .slds-button_icon-border-inverse.slds-is-selected:active", ".slds-button_icon-container.slds-is-selected:hover, .slds-button_icon-container.slds-is-selected:focus, .slds-button--icon-container.slds-is-selected:hover, .slds-button--icon-container.slds-is-selected:focus, .slds-button_icon-border.slds-is-selected:hover, .slds-button_icon-border.slds-is-selected:focus, .slds-button--icon-border.slds-is-selected:hover, .slds-button--icon-border.slds-is-selected:focus, .slds-button_icon-border-filled.slds-is-selected:hover, .slds-button_icon-border-filled.slds-is-selected:focus, .slds-button_icon-border-inverse.slds-is-selected:hover, .slds-button_icon-border-inverse.slds-is-selected:focus", ".slds-button_icon-more:active .slds-button__icon, .slds-button--icon-more:active .slds-button__icon" ], - "sassTokenName" : "$brand-accessible-active", - "value" : "#005fb2", - "yamlTokenName" : "BRAND_ACCESSIBLE_ACTIVE", + "borderWidthThick" : { + "auraTokenName" : "borderWidthThick", + "cssProperties" : [ "border-bottom-width", "border-top-width" ], + "cssSelectors" : [ ".slds-modal__footer", ".slds-modal__header" ], + "sassTokenName" : "$border-width-thick", + "value" : "2px", + "yamlTokenName" : "BORDER_WIDTH_THICK", "scope" : null }, - "brandDisabled" : { - "auraTokenName" : "brandDisabled", - "cssProperties" : [ "background", "border-color" ], - "cssSelectors" : [ ".slds-button_icon-brand[disabled], .slds-button_icon-brand:disabled", ".slds-button_icon-container.slds-is-selected[disabled], .slds-button_icon-container.slds-is-selected:disabled, .slds-button--icon-container.slds-is-selected[disabled], .slds-button--icon-container.slds-is-selected:disabled, .slds-button_icon-border.slds-is-selected[disabled], .slds-button_icon-border.slds-is-selected:disabled, .slds-button--icon-border.slds-is-selected[disabled], .slds-button--icon-border.slds-is-selected:disabled, .slds-button_icon-border-filled.slds-is-selected[disabled], .slds-button_icon-border-filled.slds-is-selected:disabled, .slds-button_icon-border-inverse.slds-is-selected[disabled], .slds-button_icon-border-inverse.slds-is-selected:disabled" ], - "sassTokenName" : "$brand-disabled", - "value" : "#c9c7c5", - "yamlTokenName" : "BRAND_DISABLED", + "colorBackground" : { + "auraTokenName" : "colorBackground", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-modal__footer", ".slds-modal__menu" ], + "sassTokenName" : "$color-background", + "value" : "#f3f2f2", + "yamlTokenName" : "COLOR_BACKGROUND", "scope" : null }, - "buttonColorBackgroundPrimary" : { - "auraTokenName" : "buttonColorBackgroundPrimary", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-button_icon-border-filled, .slds-button--icon-border-filled", ".slds-button_icon-more, .slds-button--icon-more" ], - "sassTokenName" : "$button-color-background-primary", + "colorBackgroundAlt" : { + "auraTokenName" : "colorBackgroundAlt", + "cssProperties" : [ "background", "background-color" ], + "cssSelectors" : [ ".slds-modal__content", ".slds-modal__header" ], + "sassTokenName" : "$color-background-alt", "value" : "#FFFFFF", - "yamlTokenName" : "BUTTON_COLOR_BACKGROUND_PRIMARY", + "yamlTokenName" : "COLOR_BACKGROUND_ALT", "scope" : null }, - "buttonColorBorderPrimary" : { - "auraTokenName" : "buttonColorBorderPrimary", - "cssProperties" : [ "border-color" ], - "cssSelectors" : [ ".slds-button_icon-border-filled, .slds-button--icon-border-filled, .slds-button_icon-border, .slds-button--icon-border", ".slds-button_icon-border-filled[disabled], .slds-button_icon-border-filled:disabled, .slds-button--icon-border-filled[disabled], .slds-button--icon-border-filled:disabled", ".slds-button_icon-border-inverse, .slds-button--icon-border-inverse", ".slds-button_icon-more, .slds-button--icon-more" ], - "sassTokenName" : "$button-color-border-primary", - "value" : "#dddbda", - "yamlTokenName" : "BUTTON_COLOR_BORDER_PRIMARY", + "colorBackgroundTempModalTint" : { + "auraTokenName" : "colorBackgroundTempModalTint", + "cssProperties" : [ "background" ], + "cssSelectors" : [ ".slds-backdrop" ], + "sassTokenName" : "$color-background-temp-modal-tint", + "value" : "rgba(8, 7, 7, 0.6)", + "yamlTokenName" : "COLOR_BACKGROUND_TEMP_MODAL_TINT", "scope" : null }, - "colorBackgroundButtonDefaultDisabled" : { - "auraTokenName" : "colorBackgroundButtonDefaultDisabled", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-button_icon-border-filled[disabled], .slds-button_icon-border-filled:disabled, .slds-button--icon-border-filled[disabled], .slds-button--icon-border-filled:disabled" ], - "sassTokenName" : "$color-background-button-default-disabled", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED", + "colorBorder" : { + "auraTokenName" : "colorBorder", + "cssProperties" : [ "border-bottom-color", "border-top-color" ], + "cssSelectors" : [ ".slds-modal__footer", ".slds-modal__header" ], + "sassTokenName" : "$color-border", + "value" : "#dddbda", + "yamlTokenName" : "COLOR_BORDER", "scope" : null }, - "colorBackgroundButtonInverse" : { - "auraTokenName" : "colorBackgroundButtonInverse", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-button_icon-border-inverse, .slds-button--icon-border-inverse" ], - "sassTokenName" : "$color-background-button-inverse", - "value" : "transparent", - "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_INVERSE", + "durationPromptly" : { + "auraTokenName" : "durationPromptly", + "cssProperties" : [ "transition" ], + "cssSelectors" : [ ".slds-slide-up-open", ".slds-slide-up-open .slds-modal__container-reset" ], + "sassTokenName" : "$duration-promptly", + "value" : "0.2s", + "yamlTokenName" : "DURATION_PROMPTLY", "scope" : null }, - "colorBackgroundButtonInverseDisabled" : { - "auraTokenName" : "colorBackgroundButtonInverseDisabled", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-button_icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled, .slds-button--icon-border-inverse[disabled], .slds-button--icon-border-inverse:disabled" ], - "sassTokenName" : "$color-background-button-inverse-disabled", - "value" : "transparent", - "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED", + "durationQuickly" : { + "auraTokenName" : "durationQuickly", + "cssProperties" : [ "transition" ], + "cssSelectors" : [ ".slds-fade-in-open", ".slds-modal", ".slds-modal__container", ".slds-slide-up-open" ], + "sassTokenName" : "$duration-quickly", + "value" : "0.1s", + "yamlTokenName" : "DURATION_QUICKLY", "scope" : null }, - "colorBorderButtonInverseDisabled" : { - "auraTokenName" : "colorBorderButtonInverseDisabled", - "cssProperties" : [ "border-color" ], - "cssSelectors" : [ ".slds-button_icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled, .slds-button--icon-border-inverse[disabled], .slds-button--icon-border-inverse:disabled" ], - "sassTokenName" : "$color-border-button-inverse-disabled", - "value" : "rgba(255, 255, 255, 0.15)", - "yamlTokenName" : "COLOR_BORDER_BUTTON_INVERSE_DISABLED", + "durationSlowly" : { + "auraTokenName" : "durationSlowly", + "cssProperties" : [ "transition" ], + "cssSelectors" : [ ".slds-backdrop_open, .slds-backdrop--open" ], + "sassTokenName" : "$duration-slowly", + "value" : "0.4s", + "yamlTokenName" : "DURATION_SLOWLY", "scope" : null }, - "colorBorderIconInverseHint" : { - "auraTokenName" : "colorBorderIconInverseHint", - "cssProperties" : [ "border-color" ], - "cssSelectors" : [ ".slds-hint-parent .slds-button_icon-border-inverse, .slds-hint-parent .slds-button--icon-border-inverse" ], - "sassTokenName" : "$color-border-icon-inverse-hint", - "value" : "rgba(255, 255, 255, 0.50)", - "yamlTokenName" : "COLOR_BORDER_ICON_INVERSE_HINT", + "fontSize7" : { + "auraTokenName" : "fontSize7", + "cssProperties" : [ "font-size" ], + "cssSelectors" : [ ".slds-modal .slds-modal__title" ], + "sassTokenName" : "$font-size-7", + "value" : "1.25rem", + "yamlTokenName" : "FONT_SIZE_7", "scope" : null }, - "colorBorderIconInverseHintHover" : { - "auraTokenName" : "colorBorderIconInverseHintHover", - "cssProperties" : [ "border-color" ], - "cssSelectors" : [ ".slds-hint-parent .slds-button_icon-border-inverse:focus, .slds-hint-parent .slds-button--icon-border-inverse:focus", ".slds-hint-parent:hover .slds-button_icon-border-inverse, .slds-hint-parent:hover .slds-button--icon-border-inverse, .slds-hint-parent:focus .slds-button_icon-border-inverse, .slds-hint-parent:focus .slds-button--icon-border-inverse" ], - "sassTokenName" : "$color-border-icon-inverse-hint-hover", - "value" : "rgba(255, 255, 255, 0.75)", - "yamlTokenName" : "COLOR_BORDER_ICON_INVERSE_HINT_HOVER", + "fontWeightBold" : { + "auraTokenName" : "fontWeightBold", + "cssProperties" : [ "font-weight" ], + "cssSelectors" : [ ".slds-modal .slds-modal__title" ], + "sassTokenName" : "$font-weight-bold", + "value" : "700", + "yamlTokenName" : "FONT_WEIGHT_BOLD", "scope" : null }, - "colorTextBrandPrimary" : { - "auraTokenName" : "colorTextBrandPrimary", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_icon-container.slds-is-selected, .slds-button--icon-container.slds-is-selected, .slds-button_icon-border.slds-is-selected, .slds-button--icon-border.slds-is-selected, .slds-button_icon-border-filled.slds-is-selected, .slds-button_icon-border-inverse.slds-is-selected", ".slds-button_icon-container.slds-is-selected:hover, .slds-button_icon-container.slds-is-selected:focus, .slds-button--icon-container.slds-is-selected:hover, .slds-button--icon-container.slds-is-selected:focus, .slds-button_icon-border.slds-is-selected:hover, .slds-button_icon-border.slds-is-selected:focus, .slds-button--icon-border.slds-is-selected:hover, .slds-button--icon-border.slds-is-selected:focus, .slds-button_icon-border-filled.slds-is-selected:hover, .slds-button_icon-border-filled.slds-is-selected:focus, .slds-button_icon-border-inverse.slds-is-selected:hover, .slds-button_icon-border-inverse.slds-is-selected:focus", ".slds-button_icon-container.slds-is-selected:link, .slds-button_icon-container.slds-is-selected:visited, .slds-button_icon-container.slds-is-selected:active, .slds-button--icon-container.slds-is-selected:link, .slds-button--icon-container.slds-is-selected:visited, .slds-button--icon-container.slds-is-selected:active, .slds-button_icon-border.slds-is-selected:link, .slds-button_icon-border.slds-is-selected:visited, .slds-button_icon-border.slds-is-selected:active, .slds-button--icon-border.slds-is-selected:link, .slds-button--icon-border.slds-is-selected:visited, .slds-button--icon-border.slds-is-selected:active, .slds-button_icon-border-filled.slds-is-selected:link, .slds-button_icon-border-filled.slds-is-selected:visited, .slds-button_icon-border-filled.slds-is-selected:active, .slds-button_icon-border-inverse.slds-is-selected:link, .slds-button_icon-border-inverse.slds-is-selected:visited, .slds-button_icon-border-inverse.slds-is-selected:active" ], - "sassTokenName" : "$color-text-brand-primary", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_TEXT_BRAND_PRIMARY", + "fontWeightLight" : { + "auraTokenName" : "fontWeightLight", + "cssProperties" : [ "font-weight" ], + "cssSelectors" : [ ".slds-modal .slds-modal__title" ], + "sassTokenName" : "$font-weight-light", + "value" : "300", + "yamlTokenName" : "FONT_WEIGHT_LIGHT", "scope" : null }, - "colorTextButtonBrand" : { - "auraTokenName" : "colorTextButtonBrand", - "cssProperties" : [ "fill" ], - "cssSelectors" : [ ".slds-button_icon-container.slds-is-selected .slds-button__icon, .slds-button--icon-container.slds-is-selected .slds-button__icon, .slds-button_icon-border.slds-is-selected .slds-button__icon, .slds-button--icon-border.slds-is-selected .slds-button__icon, .slds-button_icon-border-filled.slds-is-selected .slds-button__icon, .slds-button_icon-border-inverse.slds-is-selected .slds-button__icon", ".slds-button_icon-container.slds-is-selected:hover .slds-button__icon, .slds-button_icon-container.slds-is-selected:focus .slds-button__icon, .slds-button--icon-container.slds-is-selected:hover .slds-button__icon, .slds-button--icon-container.slds-is-selected:focus .slds-button__icon, .slds-button_icon-border.slds-is-selected:hover .slds-button__icon, .slds-button_icon-border.slds-is-selected:focus .slds-button__icon, .slds-button--icon-border.slds-is-selected:hover .slds-button__icon, .slds-button--icon-border.slds-is-selected:focus .slds-button__icon, .slds-button_icon-border-filled.slds-is-selected:hover .slds-button__icon, .slds-button_icon-border-filled.slds-is-selected:focus .slds-button__icon, .slds-button_icon-border-inverse.slds-is-selected:hover .slds-button__icon, .slds-button_icon-border-inverse.slds-is-selected:focus .slds-button__icon" ], - "sassTokenName" : "$color-text-button-brand", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_TEXT_BUTTON_BRAND", - "scope" : null - }, - "colorTextButtonBrandDisabled" : { - "auraTokenName" : "colorTextButtonBrandDisabled", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_icon-brand[disabled], .slds-button_icon-brand:disabled", ".slds-button_icon-container.slds-is-selected[disabled], .slds-button_icon-container.slds-is-selected:disabled, .slds-button--icon-container.slds-is-selected[disabled], .slds-button--icon-container.slds-is-selected:disabled, .slds-button_icon-border.slds-is-selected[disabled], .slds-button_icon-border.slds-is-selected:disabled, .slds-button--icon-border.slds-is-selected[disabled], .slds-button--icon-border.slds-is-selected:disabled, .slds-button_icon-border-filled.slds-is-selected[disabled], .slds-button_icon-border-filled.slds-is-selected:disabled, .slds-button_icon-border-inverse.slds-is-selected[disabled], .slds-button_icon-border-inverse.slds-is-selected:disabled" ], - "sassTokenName" : "$color-text-button-brand-disabled", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_TEXT_BUTTON_BRAND_DISABLED", - "scope" : null - }, - "colorTextError" : { - "auraTokenName" : "colorTextError", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_icon-error, .slds-button_icon-error:hover, .slds-button_icon-error:active, .slds-button_icon-error:focus, .slds-button--icon-error, .slds-button--icon-error:hover, .slds-button--icon-error:active, .slds-button--icon-error:focus" ], - "sassTokenName" : "$color-text-error", - "value" : "#C23934", - "yamlTokenName" : "COLOR_TEXT_ERROR", - "scope" : null - }, - "colorTextIconDefault" : { - "auraTokenName" : "colorTextIconDefault", - "cssProperties" : [ "color", "fill" ], - "cssSelectors" : [ ".slds-button_icon, .slds-button--icon, .slds-button_icon-inverse, .slds-button--icon-inverse, .slds-button_icon-container, .slds-button--icon-container, .slds-button_icon-border, .slds-button--icon-border, .slds-button_icon-border-filled, .slds-button--icon-border-filled, .slds-button_icon-border-inverse, .slds-button--icon-border-inverse, .slds-button_icon-more, .slds-button--icon-more, .slds-button_icon-error, .slds-button--icon-error", ".slds-button_icon-bare, .slds-button--icon-bare", ".slds-button_icon-more, .slds-button--icon-more", ".slds-hint-parent:hover .slds-button__icon_hint, .slds-hint-parent:hover .slds-button__icon--hint, .slds-hint-parent:focus .slds-button__icon_hint, .slds-hint-parent:focus .slds-button__icon--hint" ], - "sassTokenName" : "$color-text-icon-default", - "value" : "#706e6b", - "yamlTokenName" : "COLOR_TEXT_ICON_DEFAULT", + "heightTappable" : { + "auraTokenName" : "heightTappable", + "cssProperties" : [ "top" ], + "cssSelectors" : [ ".slds-modal__close" ], + "sassTokenName" : "$height-tappable", + "value" : "2.75rem", + "yamlTokenName" : "HEIGHT_TAPPABLE", "scope" : null }, - "colorTextIconDefaultDisabled" : { - "auraTokenName" : "colorTextIconDefaultDisabled", - "cssProperties" : [ "fill" ], - "cssSelectors" : [ ".slds-button_icon-more[disabled] .slds-button__icon, .slds-button_icon-more:disabled .slds-button__icon, .slds-button--icon-more[disabled] .slds-button__icon, .slds-button--icon-more:disabled .slds-button__icon" ], - "sassTokenName" : "$color-text-icon-default-disabled", - "value" : "#dddbda", - "yamlTokenName" : "COLOR_TEXT_ICON_DEFAULT_DISABLED", + "lineHeightHeading" : { + "auraTokenName" : "lineHeightHeading", + "cssProperties" : [ "line-height" ], + "cssSelectors" : [ ".slds-modal .slds-modal__title" ], + "sassTokenName" : "$line-height-heading", + "value" : "1.25", + "yamlTokenName" : "LINE_HEIGHT_HEADING", "scope" : null }, - "colorTextIconDefaultHint" : { - "auraTokenName" : "colorTextIconDefaultHint", - "cssProperties" : [ "fill" ], - "cssSelectors" : [ ".slds-button__icon_hint, .slds-button__icon--hint" ], - "sassTokenName" : "$color-text-icon-default-hint", - "value" : "#b0adab", - "yamlTokenName" : "COLOR_TEXT_ICON_DEFAULT_HINT", + "shadowDropDown" : { + "auraTokenName" : "shadowDropDown", + "cssProperties" : [ "box-shadow" ], + "cssSelectors" : [ ".slds-modal__content:last-child, .slds-modal__content_has-hidden-footer", ".slds-modal__footer" ], + "sassTokenName" : "$shadow-drop-down", + "value" : "0 2px 3px 0 rgba(0, 0, 0, 0.16)", + "yamlTokenName" : "SHADOW_DROP_DOWN", "scope" : null }, - "colorTextIconInverseHint" : { - "auraTokenName" : "colorTextIconInverseHint", - "cssProperties" : [ "fill" ], - "cssSelectors" : [ ".slds-button__icon_inverse-hint, .slds-button__icon--inverse-hint" ], - "sassTokenName" : "$color-text-icon-inverse-hint", - "value" : "rgba(255, 255, 255, 0.50)", - "yamlTokenName" : "COLOR_TEXT_ICON_INVERSE_HINT", + "spacingMedium" : { + "auraTokenName" : "spacingMedium", + "cssProperties" : [ "padding", "padding-bottom", "padding-left", "padding-right", "padding-top", "transform" ], + "cssSelectors" : [ ".slds-modal__footer", ".slds-modal__header", ".slds-modal__menu", ".slds-slide-down-cancel", ".slds-slide-up-open .slds-modal__container-reset", ".slds-slide-up-saving" ], + "sassTokenName" : "$spacing-medium", + "value" : "1rem", + "yamlTokenName" : "SPACING_MEDIUM", "scope" : null }, - "colorTextIconInverseHintHover" : { - "auraTokenName" : "colorTextIconInverseHintHover", - "cssProperties" : [ "fill" ], - "cssSelectors" : [ ".slds-hint-parent:hover .slds-button__icon_inverse-hint, .slds-hint-parent:hover .slds-button__icon--inverse-hint, .slds-hint-parent:focus .slds-button__icon_inverse-hint, .slds-hint-parent:focus .slds-button__icon--inverse-hint" ], - "sassTokenName" : "$color-text-icon-inverse-hint-hover", - "value" : "rgba(255, 255, 255, 0.75)", - "yamlTokenName" : "COLOR_TEXT_ICON_INVERSE_HINT_HOVER", + "spacingSmall" : { + "auraTokenName" : "spacingSmall", + "cssProperties" : [ "padding-bottom", "padding-top" ], + "cssSelectors" : [ ".slds-modal__footer" ], + "sassTokenName" : "$spacing-small", + "value" : "0.75rem", + "yamlTokenName" : "SPACING_SMALL", "scope" : null }, - "colorTextLinkInverse" : { - "auraTokenName" : "colorTextLinkInverse", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_icon-inverse, .slds-button--icon-inverse, .slds-button_icon-border-inverse, .slds-button--icon-border-inverse" ], - "sassTokenName" : "$color-text-link-inverse", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_TEXT_LINK_INVERSE", + "spacingXLarge" : { + "auraTokenName" : "spacingXLarge", + "cssProperties" : [ "margin" ], + "cssSelectors" : [ ".slds-modal__container" ], + "sassTokenName" : "$spacing-x-large", + "value" : "2rem", + "yamlTokenName" : "SPACING_X_LARGE", "scope" : null }, - "colorTextLinkInverseActive" : { - "auraTokenName" : "colorTextLinkInverseActive", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_icon-inverse:active, .slds-button--icon-inverse:active, .slds-button_icon-border-inverse:active, .slds-button--icon-border-inverse:active" ], - "sassTokenName" : "$color-text-link-inverse-active", - "value" : "rgba(255, 255, 255, 0.50)", - "yamlTokenName" : "COLOR_TEXT_LINK_INVERSE_ACTIVE", + "spacingXSmall" : { + "auraTokenName" : "spacingXSmall", + "cssProperties" : [ "margin-left" ], + "cssSelectors" : [ ".slds-modal__footer .slds-button + .slds-button" ], + "sassTokenName" : "$spacing-x-small", + "value" : "0.5rem", + "yamlTokenName" : "SPACING_X_SMALL", "scope" : null }, - "colorTextLinkInverseDisabled" : { - "auraTokenName" : "colorTextLinkInverseDisabled", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_icon-inverse[disabled], .slds-button_icon-inverse:disabled, .slds-button--icon-inverse[disabled], .slds-button--icon-inverse:disabled, .slds-button_icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled, .slds-button--icon-border-inverse[disabled], .slds-button--icon-border-inverse:disabled" ], - "sassTokenName" : "$color-text-link-inverse-disabled", - "value" : "rgba(255, 255, 255, 0.15)", - "yamlTokenName" : "COLOR_TEXT_LINK_INVERSE_DISABLED", + "spacingXxxSmall" : { + "auraTokenName" : "spacingXxxSmall", + "cssProperties" : [ "margin" ], + "cssSelectors" : [ ".slds-button", ".slds-modal__menu" ], + "sassTokenName" : "$spacing-xxx-small", + "value" : "0.125rem", + "yamlTokenName" : "SPACING_XXX_SMALL", "scope" : null }, - "colorTextLinkInverseHover" : { - "auraTokenName" : "colorTextLinkInverseHover", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_icon-inverse:hover, .slds-button_icon-inverse:focus, .slds-button--icon-inverse:hover, .slds-button--icon-inverse:focus, .slds-button_icon-border-inverse:hover, .slds-button_icon-border-inverse:focus, .slds-button--icon-border-inverse:hover, .slds-button--icon-border-inverse:focus" ], - "sassTokenName" : "$color-text-link-inverse-hover", - "value" : "rgba(255, 255, 255, 0.75)", - "yamlTokenName" : "COLOR_TEXT_LINK_INVERSE_HOVER", + "squareIconLargeBoundary" : { + "auraTokenName" : "squareIconLargeBoundary", + "cssProperties" : [ "padding" ], + "cssSelectors" : [ ".slds-modal__container" ], + "sassTokenName" : "$square-icon-large-boundary", + "value" : "3rem", + "yamlTokenName" : "SQUARE_ICON_LARGE_BOUNDARY", "scope" : null }, - "lineHeightButton" : { - "auraTokenName" : "lineHeightButton", - "cssProperties" : [ "line-height" ], - "cssSelectors" : [ ".slds-button_icon-container-more, .slds-button--icon-container-more", ".slds-button_icon-more, .slds-button--icon-more" ], - "sassTokenName" : "$line-height-button", - "value" : "1.875rem", - "yamlTokenName" : "LINE_HEIGHT_BUTTON", + "squareIconMediumBoundary" : { + "auraTokenName" : "squareIconMediumBoundary", + "cssProperties" : [ "right", "top" ], + "cssSelectors" : [ ".slds-modal__close" ], + "sassTokenName" : "$square-icon-medium-boundary", + "value" : "2rem", + "yamlTokenName" : "SQUARE_ICON_MEDIUM_BOUNDARY", "scope" : null }, - "lineHeightReset" : { - "auraTokenName" : "lineHeightReset", - "cssProperties" : [ "line-height" ], - "cssSelectors" : [ ".slds-button_icon, .slds-button--icon, .slds-button_icon-inverse, .slds-button--icon-inverse, .slds-button_icon-container, .slds-button--icon-container, .slds-button_icon-border, .slds-button--icon-border, .slds-button_icon-border-filled, .slds-button--icon-border-filled, .slds-button_icon-border-inverse, .slds-button--icon-border-inverse, .slds-button_icon-more, .slds-button--icon-more, .slds-button_icon-error, .slds-button--icon-error", ".slds-button_icon-bare, .slds-button--icon-bare", ".slds-button_icon-x-small, .slds-button--icon-x-small", ".slds-button_icon-xx-small, .slds-button--icon-xx-small" ], - "sassTokenName" : "$line-height-reset", - "value" : "1", - "yamlTokenName" : "LINE_HEIGHT_RESET", + "squareIconMediumContent" : { + "auraTokenName" : "squareIconMediumContent", + "cssProperties" : [ "right" ], + "cssSelectors" : [ ".slds-modal__close" ], + "sassTokenName" : "$square-icon-medium-content", + "value" : "1rem", + "yamlTokenName" : "SQUARE_ICON_MEDIUM_CONTENT", "scope" : null }, - "spacingXSmall" : { - "auraTokenName" : "spacingXSmall", - "cssProperties" : [ "padding" ], - "cssSelectors" : [ ".slds-button_icon-container-more, .slds-button--icon-container-more", ".slds-button_icon-more, .slds-button--icon-more" ], - "sassTokenName" : "$spacing-x-small", - "value" : "0.5rem", - "yamlTokenName" : "SPACING_X_SMALL", + "zIndexModal" : { + "auraTokenName" : "zIndexModal", + "cssProperties" : [ "z-index" ], + "cssSelectors" : [ ".slds-backdrop", ".slds-modal" ], + "sassTokenName" : "$z-index-modal", + "value" : "9000", + "yamlTokenName" : "Z_INDEX_MODAL", "scope" : null } } }, { - "description" : "Create a button with a `button` or `a` element to retain the native click\nfunction.\n\nUse a disabled attribute when a button can’t be clicked.", + "description" : "To initialize a data table, apply the `slds-table` class to the\n`table` element. This class creates a `table`\nwith formatted cells and allows you to use data table utilities.\n\n#### Accessibility\nTo create an accessible table, the top row of column headers (`th`)\nare placed in a `thead`. Each one receives the `scope=\"col\"`\nattribute. The first non-actionable (meaning that doesn't contain a checkbox\nor menu) column in each row should be marked as a `th` with a\n`scope=\"row\"` attribute.", "annotations" : { - "summary" : "Buttons are used to invoke an event", - "layout" : "responsive", - "name" : "buttons", - "support" : "dev-ready", "base" : "true", - "role" : "button", - "lwc" : "true", - "type" : "action", - "category" : "base", - "selector" : ".slds-button, .slds-button_stateful, .slds-button_dual-stateful, .slds-button_reset" + "name" : "data-tables", + "role" : "grid", + "selector" : ".slds-table", + "summary" : "Data tables are an enhanced version of an HTML table and are used to display tabular data.", + "support" : "dev-ready", + "category" : "structure", + "type" : "data-display, data-entry, navigation", + "layout" : "adaptive" }, - "id" : "buttons", - "docPath" : "./ui/components/buttons/docs.mdx", - "selectors" : [ ".slds-button", ".slds-button, .slds-button_stateful, .slds-button_dual-stateful, .slds-button_reset", ".slds-button__icon", ".slds-button__icon_large", ".slds-button__icon_left", ".slds-button__icon_right", ".slds-button__icon_small", ".slds-button__icon_x-small", ".slds-button_brand", ".slds-button_destructive", ".slds-button_dual-stateful", ".slds-button_first", ".slds-button_full-width", ".slds-button_inverse", ".slds-button_last", ".slds-button_middle", ".slds-button_neutral", ".slds-button_outline-brand", ".slds-button_stateful", ".slds-button_stretch", ".slds-button_success", ".slds-button_text-destructive", ".slds-icon_x-small", ".slds-input__button_decrement", ".slds-input__button_increment", ".slds-is-pressed", ".slds-is-selected", ".slds-is-selected-clicked", ".slds-not-selected", ".slds-text-not-pressed", ".slds-text-not-selected", ".slds-text-pressed", ".slds-text-selected", ".slds-text-selected-focus" ], + "id" : "data-tables", + "docPath" : "./ui/components/data-tables/docs.mdx", + "selectors" : [ ".slds-cell-buffer_left", ".slds-cell-buffer_right", ".slds-cell-edit", ".slds-cell-edit__button", ".slds-cell-error", ".slds-cell-wrap", ".slds-has-button-menu", ".slds-has-error", ".slds-has-focus", ".slds-is-edited", ".slds-is-resizable", ".slds-is-selected", ".slds-is-sortable", ".slds-is-sortable__icon", ".slds-is-sorted", ".slds-is-sorted_asc", ".slds-max-medium-table_stacked", ".slds-max-medium-table_stacked-horizontal", ".slds-no-cell-focus", ".slds-no-row-hover", ".slds-resizable", ".slds-resizable__divider", ".slds-resizable__handle", ".slds-table", ".slds-table_bordered", ".slds-table_cell-buffer", ".slds-table_col-bordered", ".slds-table_edit", ".slds-table_fixed-layout", ".slds-table_header-hidden", ".slds-table_resizable-cols", ".slds-table_striped", ".slds-th__action", ".slds-th__action-button", ".slds-th__action_form" ], "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "This neutralizes all the base styles making it look like a text link", + "summary" : "Initializes data table", "name" : "base", - "selector" : ".slds-button", - "restrict" : "button, a, span", - "support" : "dev-ready", - "variant" : "true" + "selector" : ".slds-table", + "restrict" : "table", + "variant" : "true", + "support" : "dev-ready" }, "id" : "base", "docPath" : null, "selectors" : null, "restrictees" : [ { - "description" : "", + "description" : "Default Table Row Hover", "annotations" : { - "summary" : "Explicitly style the first button in a button group", - "selector" : ".slds-button_first", - "restrict" : ".slds-button" + "summary" : null, + "selector" : ".slds-no-row-hover", + "restrict" : ".slds-table", + "modifier" : "true" }, - "id" : ".slds-button_first", + "id" : ".slds-no-row-hover", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "Selected Table Row + Hover", "annotations" : { - "summary" : "Explicitly style buttons in the middle (i.e., not first or last) in a button group", - "selector" : ".slds-button_middle", - "restrict" : ".slds-button" + "summary" : null, + "selector" : ".slds-is-selected", + "restrict" : ".slds-table tr", + "modifier" : "true" }, - "id" : ".slds-button_middle", + "id" : ".slds-is-selected", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "By default, nowrap is applied", "annotations" : { - "summary" : "Explicitly style the last button in a button group", - "selector" : ".slds-button_last", - "restrict" : ".slds-button" + "summary" : null, + "selector" : ".slds-cell-wrap", + "restrict" : ".slds-table th, .slds-table td", + "modifier" : "true" }, - "id" : ".slds-button_last", + "id" : ".slds-cell-wrap", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "Use to add a left padding buffer to cells", "annotations" : { - "name" : "neutral", - "summary" : "Creates the gray border with white background default style", - "selector" : ".slds-button_neutral", - "restrict" : ".slds-button", - "modifier" : "true", - "group" : "theme" + "summary" : null, + "selector" : ".slds-cell-buffer_left", + "restrict" : ".slds-table th, .slds-table td", + "modifier" : "true" }, - "id" : "neutral", + "id" : ".slds-cell-buffer_left", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "Use to add a right padding buffer to cells", "annotations" : { - "name" : "brand", - "summary" : "Creates the brand blue Salesforce style", - "selector" : ".slds-button_brand", - "restrict" : ".slds-button", - "modifier" : "true", - "group" : "theme" + "summary" : null, + "selector" : ".slds-cell-buffer_right", + "restrict" : ".slds-table th, .slds-table td", + "modifier" : "true" }, - "id" : "brand", + "id" : ".slds-cell-buffer_right", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "Focus state on a cell", "annotations" : { - "name" : "outline-brand", - "summary" : "Creates the outlined button with the brand color", - "selector" : ".slds-button_outline-brand", - "restrict" : ".slds-button", - "modifier" : "true", - "group" : "theme" + "summary" : null, + "selector" : ".slds-has-focus", + "restrict" : ".slds-table th, .slds-table td", + "modifier" : "true" }, - "id" : "outline-brand", + "id" : ".slds-has-focus", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "Add left and right padding to the first and last cells of a table", "annotations" : { - "name" : "inverse", - "summary" : "Creates the inverse style for dark backgrounds", - "selector" : ".slds-button_inverse", - "restrict" : ".slds-button", - "modifier" : "true", - "group" : "theme" + "summary" : null, + "selector" : ".slds-table_cell-buffer", + "restrict" : ".slds-table", + "modifier" : "true" }, - "id" : "inverse", + "id" : ".slds-table_cell-buffer", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "Add vertical borders to a table", "annotations" : { - "name" : "destructive", - "summary" : "Creates a red button style", - "selector" : ".slds-button_destructive", - "restrict" : ".slds-button", - "group" : "theme", + "summary" : null, + "selector" : ".slds-table_bordered", + "restrict" : ".slds-table", "modifier" : "true" }, - "id" : "destructive", + "id" : ".slds-table_bordered", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "Add column borders", "annotations" : { - "name" : "text-destructive", - "summary" : "Creates a neutral button with red text", - "selector" : ".slds-button_text-destructive", - "restrict" : ".slds-button", - "modifier" : "true", - "group" : "theme" + "summary" : null, + "selector" : ".slds-table_col-bordered", + "restrict" : ".slds-table", + "modifier" : "true" }, - "id" : "text-destructive", + "id" : ".slds-table_col-bordered", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "Add alternating strips to rows", "annotations" : { - "name" : "success", - "summary" : "Creates a green button style", - "selector" : ".slds-button_success", - "restrict" : ".slds-button", - "group" : "theme", + "summary" : null, + "selector" : ".slds-table_striped", + "restrict" : ".slds-table", "modifier" : "true" }, - "id" : "success", + "id" : ".slds-table_striped", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -3149,94 +2924,170 @@ }, { "description" : "", "annotations" : { - "name" : "with-icon", - "summary" : "Sizing for icon that sits inside button__icon", - "selector" : ".slds-button__icon", - "restrict" : ".slds-button svg", - "support" : "dev-ready", - "variant" : "true" + "summary" : "Set table to use fixed layout for width and truncation purposes", + "name" : "advanced", + "selector" : ".slds-table_fixed-layout", + "restrict" : ".slds-table", + "variant" : "true", + "support" : "dev-ready" }, - "id" : "with-icon", + "id" : "advanced", "docPath" : null, "selectors" : null, "restrictees" : [ { - "description" : "", + "description" : "If the column is sortable, then let's handle the actionable\nregion of the `` cell", "annotations" : { - "name" : "large", - "summary" : "Large size button icon svg", - "selector" : ".slds-button__icon_large", - "restrict" : ".slds-button__icon", - "modifier" : "true", - "group" : "size" + "summary" : null, + "selector" : ".slds-is-sortable", + "restrict" : ".slds-table_fixed-layout th" }, - "id" : "large", + "id" : ".slds-is-sortable", "docPath" : null, "selectors" : null, - "restrictees" : [ ], + "restrictees" : [ { + "description" : "Icon inside sortable th", + "annotations" : { + "summary" : null, + "selector" : ".slds-is-sortable__icon", + "restrict" : ".slds-is-sortable .slds-icon" + }, + "id" : ".slds-is-sortable__icon", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], "tokens" : { } }, { - "description" : "", + "description" : "If the column header has a menu button, then let's add right padding to the\nheader to preserve truncation", "annotations" : { - "name" : "small", - "summary" : "Small size button icon svg", - "selector" : ".slds-button__icon_small", - "restrict" : ".slds-button__icon", - "modifier" : "true", - "group" : "size" + "summary" : null, + "selector" : ".slds-has-button-menu", + "restrict" : ".slds-table_fixed-layout th" }, - "id" : "small", + "id" : ".slds-has-button-menu", "docPath" : null, "selectors" : null, - "restrictees" : [ ], + "restrictees" : [ { + "description" : "Allows for alignment of button, such as a menu", + "annotations" : { + "summary" : null, + "selector" : ".slds-th__action-button", + "restrict" : ".slds-has-button-menu .slds-button_icon" + }, + "id" : ".slds-th__action-button", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], "tokens" : { } }, { - "description" : "", + "description" : "Active state of sorted column", "annotations" : { - "name" : "x-small", - "summary" : "X-Small size button icon svg", - "selector" : ".slds-button__icon_x-small", - "restrict" : ".slds-button__icon", - "modifier" : "true", - "group" : "size" + "summary" : null, + "selector" : ".slds-is-sorted", + "restrict" : ".slds-table_fixed-layout th" }, - "id" : "x-small", + "id" : ".slds-is-sorted", "docPath" : null, "selectors" : null, - "restrictees" : [ ], + "restrictees" : [ { + "description" : "Change direction of arrow", + "annotations" : { + "summary" : null, + "name" : "sorted-ascending", + "selector" : ".slds-is-sorted_asc", + "restrict" : ".slds-is-sorted", + "modifier" : "true" + }, + "id" : "sorted-ascending", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], "tokens" : { } }, { - "description" : "", + "description" : "Resizable data table columns", "annotations" : { - "summary" : "Position of icon when sitting to the left side of the text when inside a button", - "selector" : ".slds-button__icon_left", - "restrict" : ".slds-button__icon, .slds-button__icon_stateful" + "summary" : null, + "selector" : ".slds-table_resizable-cols", + "restrict" : ".slds-table_fixed-layout" }, - "id" : ".slds-button__icon_left", + "id" : ".slds-table_resizable-cols", "docPath" : null, "selectors" : null, - "restrictees" : [ ], + "restrictees" : [ { + "description" : "Provide an indicator that resizing is available", + "annotations" : { + "summary" : null, + "selector" : ".slds-is-resizable", + "restrict" : ".slds-table_resizable-cols th" + }, + "id" : ".slds-is-resizable", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "Resizable handle", + "annotations" : { + "summary" : null, + "selector" : ".slds-resizable", + "restrict" : ".slds-is-resizable div" + }, + "id" : ".slds-resizable", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "Grab handle to resize column", + "annotations" : { + "summary" : null, + "selector" : ".slds-resizable__handle", + "restrict" : ".slds-resizable span" + }, + "id" : ".slds-resizable__handle", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "Grab handle divider indicator when resizing column", + "annotations" : { + "summary" : null, + "selector" : ".slds-resizable__divider", + "restrict" : ".slds-resizable__handle span" + }, + "id" : ".slds-resizable__divider", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], + "tokens" : { } + } ], + "tokens" : { } + } ], + "tokens" : { } + } ], "tokens" : { } - }, { - "description" : "", + } ], + "tokens" : { } + }, { + "description" : "Actionable area inside th", + "annotations" : { + "summary" : null, + "selector" : ".slds-th__action", + "restrict" : ".slds-table th div, .slds-table th a" + }, + "id" : ".slds-th__action", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "Allows for alignment of form element, such as a checkbox", "annotations" : { - "summary" : "Position of icon when sitting to the right side of the text when inside a button", - "selector" : ".slds-button__icon_right", - "restrict" : ".slds-button__icon, .slds-button__icon_stateful" + "summary" : null, + "selector" : ".slds-th__action_form", + "restrict" : ".slds-th__action" }, - "id" : ".slds-button__icon_right", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "selector" : ".slds-icon_x-small", - "restrict" : ".slds-icon, .slds-button__icon", - "modifier" : "true", - "group" : "size" - }, - "id" : ".slds-icon_x-small", + "id" : ".slds-th__action_form", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -3246,39 +3097,119 @@ }, { "description" : "", "annotations" : { - "summary" : "Creates a button style for full width that resets styling", - "selector" : ".slds-button_full-width", - "restrict" : ".slds-button", - "modifier" : "true", - "group" : "size" + "summary" : "Used to remove the top border when a table's header is visually hidden", + "name" : "hidden-header", + "selector" : ".slds-table_header-hidden", + "restrict" : ".slds-table", + "variant" : "true", + "support" : "dev-ready" }, - "id" : ".slds-button_full-width", + "id" : "hidden-header", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } }, { - "description" : "", + "description" : "Inline edit plugin for advanced tables\n\n#### Accessibility\nThe Advanced Data Table and Inline Edit Data Table are based on the semantics,\nroles and interaction model of the [ARIA Grid](http://w3c.github.io/aria/practices/aria-practices.html#grid).\nIn SLDS we overlay the ARIA Grid on top of native HTML table semantics.\n\nThe role of Grid comes with 2 distinct modes, Navigation mode and Actionable\nmode. Both come with very specific keyboard interaction modals. Navigation\nmode is the default mode of the Grid.\n\n**Navigation Mode**\n- Tabbing into the grid focuses the first data cell in the table.\n- The second tab key press takes the user focus out of the grid onto the next focusable element on the page.\n- Once the user has tabbed out of the grid, tabbing back into the grid will return focus to the last cell the user was focused on.\n- Navigation in the grid is accomplished via the arrow keys.\n- No actionable items in cell contents are focusable.\n- Pressing the Enter key on a chosen grid cell, places the entire Grid into Actionable mode.\n\n**Actionable Mode**\n- Once in Actionable mode, all focusable items in the entire grid can be tabbed to.\n- Arrow navigation still takes the user cell to cell in any direction, but focuses on the first actionable item in the cell, if there is one.\n- Pressing the Escape key exits Actionable mode, placing the user back into Navigation mode, keeping the users cursor on the same cell they were focused in.\n- When interacting with a component in a cell, such as a Menu, that also uses the Escape key as an exit action, pressing Escape will take the user back to the triggering element in the current cell. A subsequent press of Escape will return the user to Navigation mode.\n\nFor the purposes of these docs, the Default state of Inline Edit is\nrepresentative of Navigation mode, all other states are assumed to be in Actionable Mode.", "annotations" : { - "summary" : "Creates a button style for 100% width with centered text that maintains current styling", - "selector" : ".slds-button_stretch", - "restrict" : ".slds-button", - "modifier" : "true", - "group" : "size" + "summary" : "Initiates inline-edit mode for data-tables", + "name" : "inline-edit", + "selector" : ".slds-table_edit", + "restrict" : ".slds-table", + "variant" : "true", + "support" : "dev-ready" }, - "id" : ".slds-button_stretch", + "id" : "inline-edit", "docPath" : null, "selectors" : null, - "restrictees" : [ ], + "restrictees" : [ { + "description" : "Cell that has error icon appear within", + "annotations" : { + "summary" : null, + "selector" : ".slds-cell-error", + "restrict" : ".slds-table_edit td" + }, + "id" : ".slds-cell-error", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "Informs a table cell that it has editing capabilities", + "annotations" : { + "summary" : null, + "selector" : ".slds-cell-edit", + "restrict" : ".slds-table_edit th, .slds-table_edit td" + }, + "id" : ".slds-cell-edit", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "Informs a cell that it has been edited but not saved", + "annotations" : { + "summary" : null, + "selector" : ".slds-is-edited", + "restrict" : ".slds-cell-edit", + "modifier" : "true" + }, + "id" : ".slds-is-edited", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "Informs a cell that it has an error inside of it", + "annotations" : { + "summary" : null, + "selector" : ".slds-has-error", + "restrict" : ".slds-cell-edit", + "modifier" : "true" + }, + "id" : ".slds-has-error", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : null, + "selector" : ".slds-cell-edit__button", + "restrict" : ".slds-cell-edit button" + }, + "id" : ".slds-cell-edit__button", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], + "tokens" : { } + }, { + "description" : "Handles children of the table where we don't want any focusable cells", + "annotations" : { + "summary" : null, + "selector" : ".slds-no-cell-focus", + "restrict" : ".slds-table_edit", + "modifier" : "true" + }, + "id" : ".slds-no-cell-focus", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], "tokens" : { } }, { - "description" : "", + "description" : "Responsive tables\n\nWhen a table exceeds the width of its container, one responsive option is to wrap the table in a `.slds-scrollable_x` class so that the user can scroll horizontally. View the example small and medium form factor tabs to see the effect.\n\nWhen `.slds-max-medium-table_stacked` is applied to the “Grid” table, we generate faux `` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **medium form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.\n\nWhen `.slds-max-medium-table_stacked` is applied to the “Grid” table, we generate faux `` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **medium form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.", "annotations" : { - "summary" : "Positions decrement button within counter input field", - "selector" : ".slds-input__button_decrement", - "restrict" : " .slds-button" + "summary" : "Creates stacked row with stacked cells", + "name" : "responsive", + "selector" : ".slds-max-medium-table_stacked", + "restrict" : ".slds-table", + "variant" : "true", + "support" : "prototype" }, - "id" : ".slds-input__button_decrement", + "id" : "responsive", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -3286,173 +3217,43 @@ }, { "description" : "", "annotations" : { - "summary" : "Positions increment button within counter input field", - "selector" : ".slds-input__button_increment", - "restrict" : ".slds-button" + "summary" : "Creates stacked rows with horizontal cells", + "selector" : ".slds-max-medium-table_stacked-horizontal", + "restrict" : ".slds-table", + "support" : "prototype", + "modifier" : "true" }, - "id" : ".slds-input__button_increment", + "id" : ".slds-max-medium-table_stacked-horizontal", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } } ], "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Initiates a dual stateful button", - "name" : "dual-stateful", - "selector" : ".slds-button_dual-stateful", - "restrict" : "button", - "support" : "dev-ready", - "variant" : "true" + } ], + "tokens" : { + "borderRadiusMedium" : { + "auraTokenName" : "borderRadiusMedium", + "cssProperties" : [ "border-radius" ], + "cssSelectors" : [ ".slds-table_joined-wrapper" ], + "sassTokenName" : "$border-radius-medium", + "value" : "0.25rem", + "yamlTokenName" : "BORDER_RADIUS_MEDIUM", + "scope" : null }, - "id" : "dual-stateful", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Shown text when button is not pressed - default state", - "selector" : ".slds-text-not-pressed", - "restrict" : ".slds-button_dual-stateful span" - }, - "id" : ".slds-text-not-pressed", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Shown text when button is pressed", - "selector" : ".slds-text-pressed", - "restrict" : ".slds-button_dual-stateful span" - }, - "id" : ".slds-text-pressed", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "When button is in pressed state", - "selector" : ".slds-is-pressed", - "restrict" : ".slds-button_dual-stateful", - "notes" : "This class should be toggled with JavaScript", - "modifier" : "true", - "group" : "interaction" - }, - "id" : ".slds-is-pressed", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Initiates a stateful button", - "name" : "stateful", - "selector" : ".slds-button_stateful", - "restrict" : "button", - "support" : "dev-ready", - "variant" : "true", - "lwc" : "true" + "borderWidthThick" : { + "auraTokenName" : "borderWidthThick", + "cssProperties" : [ "border-top", "box-shadow" ], + "cssSelectors" : [ ".slds-max-medium-table_stacked, .slds-max-medium-table--stacked", ".slds-max-medium-table_stacked-horizontal, .slds-max-medium-table--stacked-horizontal", ".slds-no-cell-focus .slds-has-error, .slds-no-cell-focus .slds-has-error:hover", ".slds-table .slds-cell-edit.slds-has-error, .slds-table .slds-cell-edit.slds-has-error:hover", ".slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error, .slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error", "tr" ], + "sassTokenName" : "$border-width-thick", + "value" : "2px", + "yamlTokenName" : "BORDER_WIDTH_THICK", + "scope" : null }, - "id" : "stateful", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "Default state of a stateful button", - "annotations" : { - "selector" : ".slds-not-selected", - "restrict" : ".slds-button_stateful", - "notes" : "This class should be toggled with JavaScript", - "modifier" : "true", - "group" : "interaction" - }, - "id" : ".slds-not-selected", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Shown text when button is selected", - "selector" : ".slds-text-selected", - "restrict" : ".slds-button_stateful span" - }, - "id" : ".slds-text-selected", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Shown text when button is selected and focused", - "selector" : ".slds-text-selected-focus", - "restrict" : ".slds-button_stateful span" - }, - "id" : ".slds-text-selected-focus", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Shown text when button is not selected - default state", - "selector" : ".slds-text-not-selected", - "restrict" : ".slds-button_stateful span" - }, - "id" : ".slds-text-not-selected", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "When button is selected and still has focus from click", - "selector" : ".slds-is-selected-clicked", - "restrict" : ".slds-button_stateful", - "notes" : "This class should be toggled with JavaScript", - "modifier" : "true", - "group" : "interaction" - }, - "id" : ".slds-is-selected-clicked", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "When button is pressed and selected", - "selector" : ".slds-is-selected", - "restrict" : ".slds-button_stateful", - "notes" : "This class should be toggled with JavaScript", - "modifier" : "true", - "group" : "interaction" - }, - "id" : ".slds-is-selected", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { "borderWidthThin" : { "auraTokenName" : "borderWidthThin", - "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-button" ], + "cssProperties" : [ "border-bottom", "border-left", "border-top", "box-shadow", "width" ], + "cssSelectors" : [ ".slds-resizable__divider:after", ".slds-resizable__divider:before", ".slds-table_bordered tbody td, .slds-table_bordered tbody th, .slds-table--bordered tbody td, .slds-table--bordered tbody th", ".slds-table_bordered thead > tr + tr > th, .slds-table--bordered thead > tr + tr > th", ".slds-table_bordered, .slds-table--bordered", ".slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover > td:not(.slds-has-focus), .slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover > th:not(.slds-has-focus), .slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus > td:not(.slds-has-focus), .slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus > th:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover > td:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover > th:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus > td:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus > th:not(.slds-has-focus)", ".slds-table_col-bordered td + td, .slds-table_col-bordered th + th, .slds-table_col-bordered th + td, .slds-table_col-bordered td + th, .slds-table--col-bordered td + td, .slds-table--col-bordered th + th, .slds-table--col-bordered th + td, .slds-table--col-bordered td + th", ".slds-table_header-fixed_container:before, .slds-table--header-fixed_container:before" ], "sassTokenName" : "$border-width-thin", "value" : "1px", "yamlTokenName" : "BORDER_WIDTH_THIN", @@ -3460,8 +3261,8 @@ }, "brandAccessible" : { "auraTokenName" : "brandAccessible", - "cssProperties" : [ "border-color", "color" ], - "cssSelectors" : [ ".slds-button", ".slds-button_outline-brand" ], + "cssProperties" : [ "box-shadow", "fill" ], + "cssSelectors" : [ ".slds-is-sortable .slds-th__action:hover .slds-is-sortable__icon, .slds-is-sortable .slds-th__action:focus .slds-is-sortable__icon, .slds-is-sortable.slds-has-focus .slds-th__action .slds-is-sortable__icon, .slds-is-sortable.slds-has-focus .slds-th__action:hover .slds-is-sortable__icon, .slds-is-sortable.slds-has-focus .slds-th__action:focus .slds-is-sortable__icon", ".slds-table th:focus, .slds-table th.slds-has-focus, .slds-table [role=\"gridcell\"]:focus, .slds-table [role=\"gridcell\"].slds-has-focus", ".slds-table_edit:not(.slds-no-cell-focus) tbody tr:hover > .slds-cell-edit.slds-has-focus, .slds-table--edit:not(.slds-no-cell-focus) tbody tr:hover > .slds-cell-edit.slds-has-focus" ], "sassTokenName" : "$brand-accessible", "value" : "#0070d2", "yamlTokenName" : "BRAND_ACCESSIBLE", @@ -3469,197 +3270,206 @@ }, "brandAccessibleActive" : { "auraTokenName" : "brandAccessibleActive", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button:active", ".slds-button:hover, .slds-button:focus" ], + "cssProperties" : [ "box-shadow" ], + "cssSelectors" : [ ".slds-has-focus .slds-th__action", ".slds-has-focus.slds-is-resizable .slds-th__action, .slds-has-focus.slds-is-resizable .slds-th__action:focus, .slds-has-focus.slds-is-resizable .slds-th__action:hover, .slds-has-focus.slds-is-resizable .slds-th__action:focus:hover, .slds-is-resizable .slds-th__action:focus, .slds-is-resizable .slds-th__action:focus:hover", ".slds-table .slds-cell-edit.slds-has-focus", ".slds-table .slds-cell-edit.slds-has-focus:hover" ], "sassTokenName" : "$brand-accessible-active", "value" : "#005fb2", "yamlTokenName" : "BRAND_ACCESSIBLE_ACTIVE", "scope" : null }, - "brandDisabled" : { - "auraTokenName" : "brandDisabled", - "cssProperties" : [ "background", "border-color" ], - "cssSelectors" : [ ".slds-button_brand[disabled], .slds-button_brand:disabled, .slds-button--brand[disabled], .slds-button--brand:disabled", ".slds-button_destructive[disabled], .slds-button_destructive:disabled, .slds-button--destructive[disabled], .slds-button--destructive:disabled", ".slds-button_dual-stateful.slds-is-pressed[disabled], .slds-button_dual-stateful.slds-is-pressed:disabled", ".slds-button_success[disabled], .slds-button_success:disabled, .slds-button--success[disabled], .slds-button--success:disabled" ], - "sassTokenName" : "$brand-disabled", - "value" : "#c9c7c5", - "yamlTokenName" : "BRAND_DISABLED", + "cardShadow" : { + "auraTokenName" : "cardShadow", + "cssProperties" : [ "box-shadow" ], + "cssSelectors" : [ ".slds-table_joined table, .slds-table.slds-has-top-magnet table", ".slds-table_joined-wrapper .slds-table" ], + "sassTokenName" : "$card-shadow", + "value" : "0 2px 2px 0 rgba(0, 0, 0, 0.10)", + "yamlTokenName" : "CARD_SHADOW", "scope" : null }, - "buttonBorderRadius" : { - "auraTokenName" : "buttonBorderRadius", - "cssProperties" : [ "border-radius" ], - "cssSelectors" : [ ".slds-button" ], - "sassTokenName" : "$button-border-radius", - "value" : ".25rem", - "yamlTokenName" : "BUTTON_BORDER_RADIUS", + "cardWrapperSpacing" : { + "auraTokenName" : "cardWrapperSpacing", + "cssProperties" : [ "padding" ], + "cssSelectors" : [ ".slds-table_joined-wrapper" ], + "sassTokenName" : "$card-wrapper-spacing", + "value" : "1rem", + "yamlTokenName" : "CARD_WRAPPER_SPACING", "scope" : null }, - "buttonColorBorderPrimary" : { - "auraTokenName" : "buttonColorBorderPrimary", - "cssProperties" : [ "border-color" ], - "cssSelectors" : [ ".slds-button_inverse, .slds-button--inverse", ".slds-button_neutral.slds-is-selected:hover:not([disabled]), .slds-button_neutral.slds-is-selected:focus:not([disabled]), .slds-button--neutral.slds-is-selected:hover:not([disabled]), .slds-button--neutral.slds-is-selected:focus:not([disabled])" ], - "sassTokenName" : "$button-color-border-primary", - "value" : "#dddbda", - "yamlTokenName" : "BUTTON_COLOR_BORDER_PRIMARY", + "colorBackgroundAlt" : { + "auraTokenName" : "colorBackgroundAlt", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-has-focus .slds-th__action", ".slds-table", ".slds-table .slds-cell-edit.slds-has-focus", ".slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit:hover, .slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit:hover", ".slds-table_edit:not(.slds-no-cell-focus) tbody tr:hover > .slds-cell-edit.slds-has-focus, .slds-table--edit:not(.slds-no-cell-focus) tbody tr:hover > .slds-cell-edit.slds-has-focus", ".slds-table_edit_container:focus .slds-table_edit_container-message, .slds-table_edit_container:focus .slds-table--edit_container-message, .slds-table--edit_container:focus .slds-table_edit_container-message, .slds-table--edit_container:focus .slds-table--edit_container-message", ".slds-table_fixed-layout thead, .slds-table--fixed-layout thead" ], + "sassTokenName" : "$color-background-alt", + "value" : "#FFFFFF", + "yamlTokenName" : "COLOR_BACKGROUND_ALT", "scope" : null }, - "colorBackgroundButtonDefaultActive" : { - "auraTokenName" : "colorBackgroundButtonDefaultActive", + "colorBackgroundBackdropTint" : { + "auraTokenName" : "colorBackgroundBackdropTint", "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-button_neutral.slds-is-selected:active:not([disabled]), .slds-button--neutral.slds-is-selected:active:not([disabled])" ], - "sassTokenName" : "$color-background-button-default-active", - "value" : "#EEF1F6", - "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_DEFAULT_ACTIVE", + "cssSelectors" : [ ".slds-table_edit_container:focus:before, .slds-table--edit_container:focus:before" ], + "sassTokenName" : "$color-background-backdrop-tint", + "value" : "#fafaf9", + "yamlTokenName" : "COLOR_BACKGROUND_BACKDROP_TINT", "scope" : null }, - "colorBackgroundButtonDefaultDisabled" : { - "auraTokenName" : "colorBackgroundButtonDefaultDisabled", + "colorBackgroundButtonBrand" : { + "auraTokenName" : "colorBackgroundButtonBrand", "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-button_neutral[disabled], .slds-button_neutral:disabled, .slds-button--neutral[disabled], .slds-button--neutral:disabled", ".slds-button_outline-brand[disabled], .slds-button_outline-brand:disabled", ".slds-button_text-destructive[disabled], .slds-button_text-destructive:disabled" ], - "sassTokenName" : "$color-background-button-default-disabled", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED", + "cssSelectors" : [ ".slds-resizable__divider:after", ".slds-resizable__divider:hover:before, .slds-resizable__divider:focus:before, .slds-resizable__divider:active:before", ".slds-resizable__input:focus ~ .slds-resizable__handle .slds-resizable__divider:before" ], + "sassTokenName" : "$color-background-button-brand", + "value" : "#0070D2", + "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_BRAND", "scope" : null }, - "colorBackgroundButtonDefaultHover" : { - "auraTokenName" : "colorBackgroundButtonDefaultHover", + "colorBackgroundHighlight" : { + "auraTokenName" : "colorBackgroundHighlight", "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-button_inverse:hover, .slds-button_inverse:focus, .slds-button--inverse:hover, .slds-button--inverse:focus", ".slds-button_neutral.slds-is-selected:hover:not([disabled]), .slds-button_neutral.slds-is-selected:focus:not([disabled]), .slds-button--neutral.slds-is-selected:hover:not([disabled]), .slds-button--neutral.slds-is-selected:focus:not([disabled])" ], - "sassTokenName" : "$color-background-button-default-hover", - "value" : "#F4F6F9", - "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_DEFAULT_HOVER", + "cssSelectors" : [ ".slds-no-cell-focus .slds-has-error, .slds-no-cell-focus .slds-has-error:hover", ".slds-no-cell-focus .slds-is-edited, .slds-no-cell-focus .slds-is-edited:hover", ".slds-table .slds-cell-edit.slds-has-error, .slds-table .slds-cell-edit.slds-has-error:hover", ".slds-table .slds-cell-edit.slds-is-edited, .slds-table .slds-cell-edit.slds-is-edited:hover", ".slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error, .slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error", ".slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit.slds-is-edited, .slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit.slds-is-edited" ], + "sassTokenName" : "$color-background-highlight", + "value" : "#FAFFBD", + "yamlTokenName" : "COLOR_BACKGROUND_HIGHLIGHT", "scope" : null }, - "colorBackgroundButtonInverse" : { - "auraTokenName" : "colorBackgroundButtonInverse", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-button_inverse, .slds-button--inverse" ], - "sassTokenName" : "$color-background-button-inverse", - "value" : "transparent", - "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_INVERSE", + "colorBackgroundRowHover" : { + "auraTokenName" : "colorBackgroundRowHover", + "cssProperties" : [ "background", "background-color" ], + "cssSelectors" : [ ".slds-no-cell-focus .slds-has-focus", ".slds-table:not(.slds-no-row-hover) tbody tr:hover > td, .slds-table:not(.slds-no-row-hover) tbody tr:hover > th, .slds-table:not(.slds-no-row-hover) tbody tr:focus > td, .slds-table:not(.slds-no-row-hover) tbody tr:focus > th", ".slds-table_striped tbody tr:nth-of-type(even) > td, .slds-table_striped tbody tr:nth-of-type(even) > th, .slds-table--striped tbody tr:nth-of-type(even) > td, .slds-table--striped tbody tr:nth-of-type(even) > th" ], + "sassTokenName" : "$color-background-row-hover", + "value" : "#f3f2f2", + "yamlTokenName" : "COLOR_BACKGROUND_ROW_HOVER", "scope" : null }, - "colorBackgroundButtonInverseDisabled" : { - "auraTokenName" : "colorBackgroundButtonInverseDisabled", + "colorBackgroundRowSelected" : { + "auraTokenName" : "colorBackgroundRowSelected", "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-button_inverse[disabled], .slds-button_inverse:disabled, .slds-button--inverse[disabled], .slds-button--inverse:disabled" ], - "sassTokenName" : "$color-background-button-inverse-disabled", - "value" : "transparent", - "yamlTokenName" : "COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED", + "cssSelectors" : [ ".slds-table tbody tr.slds-is-selected > td, .slds-table tbody tr.slds-is-selected > th, .slds-table:not(.slds-no-row-hover) tr.slds-is-selected:hover > td, .slds-table:not(.slds-no-row-hover) tr.slds-is-selected:hover > th" ], + "sassTokenName" : "$color-background-row-selected", + "value" : "#ecebea", + "yamlTokenName" : "COLOR_BACKGROUND_ROW_SELECTED", "scope" : null }, "colorBorder" : { "auraTokenName" : "colorBorder", - "cssProperties" : [ "border-color" ], - "cssSelectors" : [ ".slds-button_outline-brand[disabled], .slds-button_outline-brand:disabled" ], + "cssProperties" : [ "border-bottom", "border-left", "border-top", "box-shadow" ], + "cssSelectors" : [ ".slds-max-medium-table_stacked, .slds-max-medium-table--stacked", ".slds-max-medium-table_stacked-horizontal, .slds-max-medium-table--stacked-horizontal", ".slds-no-cell-focus .slds-has-focus.slds-is-resizable:hover .slds-th__action", ".slds-table_bordered tbody td, .slds-table_bordered tbody th, .slds-table--bordered tbody td, .slds-table--bordered tbody th", ".slds-table_bordered thead > tr + tr > th, .slds-table--bordered thead > tr + tr > th", ".slds-table_bordered, .slds-table--bordered", ".slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover > td:not(.slds-has-focus), .slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover > th:not(.slds-has-focus), .slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus > td:not(.slds-has-focus), .slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus > th:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover > td:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover > th:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus > td:not(.slds-has-focus), .slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus > th:not(.slds-has-focus)", ".slds-table_col-bordered td + td, .slds-table_col-bordered th + th, .slds-table_col-bordered th + td, .slds-table_col-bordered td + th, .slds-table--col-bordered td + td, .slds-table--col-bordered th + th, .slds-table--col-bordered th + td, .slds-table--col-bordered td + th", ".slds-table_header-fixed_container:before, .slds-table--header-fixed_container:before", "tr" ], "sassTokenName" : "$color-border", "value" : "#dddbda", "yamlTokenName" : "COLOR_BORDER", "scope" : null }, - "colorBorderButtonInverseDisabled" : { - "auraTokenName" : "colorBorderButtonInverseDisabled", - "cssProperties" : [ "border-color" ], - "cssSelectors" : [ ".slds-button_inverse[disabled], .slds-button_inverse:disabled, .slds-button--inverse[disabled], .slds-button--inverse:disabled" ], - "sassTokenName" : "$color-border-button-inverse-disabled", - "value" : "rgba(255, 255, 255, 0.15)", - "yamlTokenName" : "COLOR_BORDER_BUTTON_INVERSE_DISABLED", - "scope" : null - }, - "colorTextButtonBrandDisabled" : { - "auraTokenName" : "colorTextButtonBrandDisabled", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_brand[disabled], .slds-button_brand:disabled, .slds-button--brand[disabled], .slds-button--brand:disabled", ".slds-button_destructive[disabled], .slds-button_destructive:disabled, .slds-button--destructive[disabled], .slds-button--destructive:disabled", ".slds-button_dual-stateful.slds-is-pressed[disabled], .slds-button_dual-stateful.slds-is-pressed:disabled", ".slds-button_success[disabled], .slds-button_success:disabled, .slds-button--success[disabled], .slds-button--success:disabled" ], - "sassTokenName" : "$color-text-button-brand-disabled", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_TEXT_BUTTON_BRAND_DISABLED", - "scope" : null - }, - "colorTextButtonDefault" : { - "auraTokenName" : "colorTextButtonDefault", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_inverse:hover, .slds-button_inverse:focus, .slds-button_inverse:active, .slds-button--inverse:hover, .slds-button--inverse:focus, .slds-button--inverse:active, .slds-button_icon-border-inverse:hover, .slds-button_icon-border-inverse:focus, .slds-button_icon-border-inverse:active, .slds-button--icon-border-inverse:hover, .slds-button--icon-border-inverse:focus, .slds-button--icon-border-inverse:active" ], - "sassTokenName" : "$color-text-button-default", - "value" : "#0070D2", - "yamlTokenName" : "COLOR_TEXT_BUTTON_DEFAULT", + "colorBorderBrand" : { + "auraTokenName" : "colorBorderBrand", + "cssProperties" : [ "box-shadow" ], + "cssSelectors" : [ ".slds-table_edit_container:focus:before, .slds-table--edit_container:focus:before" ], + "sassTokenName" : "$color-border-brand", + "value" : "#1589ee", + "yamlTokenName" : "COLOR_BORDER_BRAND", "scope" : null }, - "colorTextButtonDefaultDisabled" : { - "auraTokenName" : "colorTextButtonDefaultDisabled", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button[disabled], .slds-button:disabled", ".slds-button_outline-brand[disabled], .slds-button_outline-brand:disabled", ".slds-button_text-destructive[disabled], .slds-button_text-destructive:disabled" ], - "sassTokenName" : "$color-text-button-default-disabled", - "value" : "#dddbda", - "yamlTokenName" : "COLOR_TEXT_BUTTON_DEFAULT_DISABLED", + "colorBorderError" : { + "auraTokenName" : "colorBorderError", + "cssProperties" : [ "box-shadow" ], + "cssSelectors" : [ ".slds-no-cell-focus .slds-has-error, .slds-no-cell-focus .slds-has-error:hover", ".slds-table .slds-cell-edit.slds-has-error, .slds-table .slds-cell-edit.slds-has-error:hover", ".slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error, .slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error" ], + "sassTokenName" : "$color-border-error", + "value" : "#C23934", + "yamlTokenName" : "COLOR_BORDER_ERROR", "scope" : null }, - "colorTextButtonInverse" : { - "auraTokenName" : "colorTextButtonInverse", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_inverse, .slds-button_inverse:link, .slds-button_inverse:visited, .slds-button--inverse, .slds-button--inverse:link, .slds-button--inverse:visited, .slds-button_icon-border-inverse, .slds-button_icon-border-inverse:link, .slds-button_icon-border-inverse:visited, .slds-button--icon-border-inverse, .slds-button--icon-border-inverse:link, .slds-button--icon-border-inverse:visited" ], - "sassTokenName" : "$color-text-button-inverse", - "value" : "#ecebea", - "yamlTokenName" : "COLOR_TEXT_BUTTON_INVERSE", + "colorTextBrand" : { + "auraTokenName" : "colorTextBrand", + "cssProperties" : [ "fill" ], + "cssSelectors" : [ ".slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit:hover, .slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit:focus, .slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit:hover, .slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit:focus, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit:hover, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit:focus, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit:hover, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit:focus", ".slds-table_edit .slds-button__icon_edit:focus, .slds-table_edit .slds-button__icon--edit:focus, .slds-table--edit .slds-button__icon_edit:focus, .slds-table--edit .slds-button__icon--edit:focus" ], + "sassTokenName" : "$color-text-brand", + "value" : "#1589ee", + "yamlTokenName" : "COLOR_TEXT_BRAND", "scope" : null }, - "colorTextButtonInverseDisabled" : { - "auraTokenName" : "colorTextButtonInverseDisabled", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_inverse[disabled], .slds-button_inverse:disabled, .slds-button--inverse[disabled], .slds-button--inverse:disabled, .slds-button_icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled, .slds-button--icon-border-inverse[disabled], .slds-button--icon-border-inverse:disabled" ], - "sassTokenName" : "$color-text-button-inverse-disabled", - "value" : "rgba(255, 255, 255, 0.15)", - "yamlTokenName" : "COLOR_TEXT_BUTTON_INVERSE_DISABLED", + "colorTextIconDefault" : { + "auraTokenName" : "colorTextIconDefault", + "cssProperties" : [ "fill" ], + "cssSelectors" : [ ".slds-hint-parent .slds-cell-edit.slds-has-focus .slds-button__icon_edit, .slds-hint-parent .slds-cell-edit.slds-has-focus .slds-button__icon--edit", ".slds-no-cell-focus .slds-is-sorted.slds-has-focus .slds-is-sortable__icon" ], + "sassTokenName" : "$color-text-icon-default", + "value" : "#706e6b", + "yamlTokenName" : "COLOR_TEXT_ICON_DEFAULT", "scope" : null }, - "colorTextDestructive" : { - "auraTokenName" : "colorTextDestructive", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_text-destructive" ], - "sassTokenName" : "$color-text-destructive", - "value" : "#C23934", - "yamlTokenName" : "COLOR_TEXT_DESTRUCTIVE", + "colorTextLink" : { + "auraTokenName" : "colorTextLink", + "cssProperties" : [ "color", "fill" ], + "cssSelectors" : [ ".slds-no-cell-focus thead .slds-has-focus:hover", ".slds-no-cell-focus thead .slds-has-focus:hover .slds-is-sortable__icon" ], + "sassTokenName" : "$color-text-link", + "value" : "#006DCC", + "yamlTokenName" : "COLOR_TEXT_LINK", "scope" : null }, - "colorTextDestructiveHover" : { - "auraTokenName" : "colorTextDestructiveHover", + "colorTextLinkActive" : { + "auraTokenName" : "colorTextLinkActive", "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-button_text-destructive:focus, .slds-button_text-destructive:hover" ], - "sassTokenName" : "$color-text-destructive-hover", - "value" : "#A12B2B", - "yamlTokenName" : "COLOR_TEXT_DESTRUCTIVE_HOVER", + "cssSelectors" : [ ".slds-table tbody tr.slds-is-selected a, .slds-table:not(.slds-no-row-hover) tr.slds-is-selected:hover a" ], + "sassTokenName" : "$color-text-link-active", + "value" : "#00396B", + "yamlTokenName" : "COLOR_TEXT_LINK_ACTIVE", "scope" : null }, "fontWeightBold" : { "auraTokenName" : "fontWeightBold", "cssProperties" : [ "font-weight" ], - "cssSelectors" : [ ".slds-button" ], + "cssSelectors" : [ ".slds-table thead th" ], "sassTokenName" : "$font-weight-bold", "value" : "700", "yamlTokenName" : "FONT_WEIGHT_BOLD", "scope" : null }, - "lineHeightButton" : { - "auraTokenName" : "lineHeightButton", - "cssProperties" : [ "line-height" ], - "cssSelectors" : [ ".slds-button" ], - "sassTokenName" : "$line-height-button", - "value" : "1.875rem", - "yamlTokenName" : "LINE_HEIGHT_BUTTON", + "fontWeightRegular" : { + "auraTokenName" : "fontWeightRegular", + "cssProperties" : [ "font-weight" ], + "cssSelectors" : [ ".slds-table th" ], + "sassTokenName" : "$font-weight-regular", + "value" : "400", + "yamlTokenName" : "FONT_WEIGHT_REGULAR", "scope" : null }, - "lineHeightButtonSmall" : { - "auraTokenName" : "lineHeightButtonSmall", - "cssProperties" : [ "line-height" ], - "cssSelectors" : [ ".slds-button_small, .slds-button--small" ], - "sassTokenName" : "$line-height-button-small", - "value" : "1.75rem", - "yamlTokenName" : "LINE_HEIGHT_BUTTON_SMALL", + "sizeMedium" : { + "auraTokenName" : "sizeMedium", + "cssProperties" : [ "margin-left", "width" ], + "cssSelectors" : [ ".slds-table_edit_container:focus .slds-table_edit_container-message, .slds-table_edit_container:focus .slds-table--edit_container-message, .slds-table--edit_container:focus .slds-table_edit_container-message, .slds-table--edit_container:focus .slds-table--edit_container-message" ], + "sassTokenName" : "$size-medium", + "value" : "20rem", + "yamlTokenName" : "SIZE_MEDIUM", + "scope" : null + }, + "spacingLarge" : { + "auraTokenName" : "spacingLarge", + "cssProperties" : [ "padding-left", "padding-right", "width" ], + "cssSelectors" : [ ".slds-resizable__handle", ".slds-table .slds-cell-buffer_left, .slds-table .slds-cell-buffer--left", ".slds-table .slds-cell-buffer_right, .slds-table .slds-cell-buffer--right", ".slds-table_cell-buffer tr > th:first-child, .slds-table_cell-buffer tr > td:first-child, .slds-table--cell-buffer tr > th:first-child, .slds-table--cell-buffer tr > td:first-child", ".slds-table_cell-buffer tr > th:last-child, .slds-table_cell-buffer tr > td:last-child, .slds-table--cell-buffer tr > th:last-child, .slds-table--cell-buffer tr > td:last-child" ], + "sassTokenName" : "$spacing-large", + "value" : "1.5rem", + "yamlTokenName" : "SPACING_LARGE", + "scope" : null + }, + "spacingSmall" : { + "auraTokenName" : "spacingSmall", + "cssProperties" : [ "padding", "padding-left", "right", "width" ], + "cssSelectors" : [ ".slds-has-button-menu .slds-th__action-button", ".slds-max-medium-table_stacked, .slds-max-medium-table--stacked", ".slds-max-medium-table_stacked-horizontal, .slds-max-medium-table--stacked-horizontal", ".slds-popover_edit .slds-form-element__help, .slds-popover--edit .slds-form-element__help", ".slds-resizable__divider:before, .slds-resizable__divider:after", ".slds-resizable__handle", ".slds-table_resizable-cols thead th:last-of-type .slds-resizable__handle, .slds-table--resizable-cols thead th:last-of-type .slds-resizable__handle", "th, td", "tr > td:first-child, tr > td:last-child" ], + "sassTokenName" : "$spacing-small", + "value" : "0.75rem", + "yamlTokenName" : "SPACING_SMALL", + "scope" : null + }, + "spacingXLarge" : { + "auraTokenName" : "spacingXLarge", + "cssProperties" : [ "padding-right" ], + "cssSelectors" : [ ".slds-has-button-menu .slds-th__action" ], + "sassTokenName" : "$spacing-x-large", + "value" : "2rem", + "yamlTokenName" : "SPACING_X_LARGE", "scope" : null }, "spacingXSmall" : { "auraTokenName" : "spacingXSmall", - "cssProperties" : [ "margin-left", "margin-right" ], - "cssSelectors" : [ ".slds-button__icon_left, .slds-button__icon--left", ".slds-button__icon_right, .slds-button__icon--right" ], + "cssProperties" : [ "padding-left", "padding-right" ], + "cssSelectors" : [ ".slds-table_fixed-layout .slds-cell-shrink:first-child, .slds-table--fixed-layout .slds-cell-shrink:first-child", ".slds-table_fixed-layout .slds-cell-shrink:last-child, .slds-table--fixed-layout .slds-cell-shrink:last-child" ], "sassTokenName" : "$spacing-x-small", "value" : "0.5rem", "yamlTokenName" : "SPACING_X_SMALL", @@ -3667,61 +3477,152 @@ }, "spacingXxSmall" : { "auraTokenName" : "spacingXxSmall", - "cssProperties" : [ "margin-left" ], - "cssSelectors" : [ ".slds-button + .slds-button", ".slds-button + .slds-button-group, .slds-button + .slds-button-group-list", ".slds-button-space-left" ], + "cssProperties" : [ "margin-left", "padding", "padding-bottom", "right", "width" ], + "cssSelectors" : [ ".slds-is-sortable__icon", ".slds-max-medium-table_stacked, .slds-max-medium-table--stacked", ".slds-max-medium-table_stacked-horizontal, .slds-max-medium-table--stacked-horizontal", ".slds-popover_edit .slds-popover__body, .slds-popover--edit .slds-popover__body", ".slds-resizable__divider:hover:before, .slds-resizable__divider:focus:before, .slds-resizable__divider:active:before", ".slds-resizable__input:focus ~ .slds-resizable__handle .slds-resizable__divider:before", ".slds-th__action-button", "td:before, th:before", "th:before, td:before" ], "sassTokenName" : "$spacing-xx-small", "value" : "0.25rem", "yamlTokenName" : "SPACING_XX_SMALL", "scope" : null }, - "squareIconMediumBoundary" : { - "auraTokenName" : "squareIconMediumBoundary", - "cssProperties" : [ "min-height" ], - "cssSelectors" : [ ".slds-button_small, .slds-button--small" ], - "sassTokenName" : "$square-icon-medium-boundary", - "value" : "2rem", - "yamlTokenName" : "SQUARE_ICON_MEDIUM_BOUNDARY", + "spacingXxxSmall" : { + "auraTokenName" : "spacingXxxSmall", + "cssProperties" : [ "margin", "margin-top" ], + "cssSelectors" : [ ".slds-form-element__label_edit, .slds-form-element__label--edit", ".slds-max-medium-table_stacked-horizontal, .slds-max-medium-table--stacked-horizontal", "td:before" ], + "sassTokenName" : "$spacing-xxx-small", + "value" : "0.125rem", + "yamlTokenName" : "SPACING_XXX_SMALL", + "scope" : null + }, + "squareIconLargeBoundary" : { + "auraTokenName" : "squareIconLargeBoundary", + "cssProperties" : [ "width" ], + "cssSelectors" : [ ".slds-table_fixed-layout .slds-cell-shrink, .slds-table--fixed-layout .slds-cell-shrink" ], + "sassTokenName" : "$square-icon-large-boundary", + "value" : "3rem", + "yamlTokenName" : "SQUARE_ICON_LARGE_BOUNDARY", + "scope" : null + }, + "squareTappableXxSmall" : { + "auraTokenName" : "squareTappableXxSmall", + "cssProperties" : [ "padding-right" ], + "cssSelectors" : [ ".slds-th__action" ], + "sassTokenName" : "$square-tappable-xx-small", + "value" : "1.25rem", + "yamlTokenName" : "SQUARE_TAPPABLE_XX_SMALL", + "scope" : null + }, + "tableBorderRadius" : { + "auraTokenName" : "tableBorderRadius", + "cssProperties" : [ "border-radius" ], + "cssSelectors" : [ ".slds-table_joined table, .slds-table.slds-has-top-magnet table", ".slds-table_joined-wrapper .slds-table" ], + "sassTokenName" : "$table-border-radius", + "value" : "0 0 0.25rem 0.25rem", + "yamlTokenName" : "TABLE_BORDER_RADIUS", + "scope" : null + }, + "tableCellSpacing" : { + "auraTokenName" : "tableCellSpacing", + "cssProperties" : [ "padding" ], + "cssSelectors" : [ ".slds-table th, .slds-table td", ".slds-table thead th", ".slds-th__action" ], + "sassTokenName" : "$table-cell-spacing", + "value" : "0.25rem 0.5rem", + "yamlTokenName" : "TABLE_CELL_SPACING", + "scope" : null + }, + "tableColorBackgroundHeader" : { + "auraTokenName" : "tableColorBackgroundHeader", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-cell-fixed", ".slds-table thead th", ".slds-table_header-fixed_container, .slds-table--header-fixed_container" ], + "sassTokenName" : "$table-color-background-header", + "value" : "#fafaf9", + "yamlTokenName" : "TABLE_COLOR_BACKGROUND_HEADER", + "scope" : null + }, + "tableColorBackgroundHeaderHover" : { + "auraTokenName" : "tableColorBackgroundHeaderHover", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-has-focus.slds-is-resizable .slds-th__action, .slds-has-focus.slds-is-resizable .slds-th__action:focus, .slds-has-focus.slds-is-resizable .slds-th__action:hover, .slds-has-focus.slds-is-resizable .slds-th__action:focus:hover, .slds-is-resizable .slds-th__action:focus, .slds-is-resizable .slds-th__action:focus:hover", ".slds-is-sortable .slds-th__action:hover, .slds-is-sortable .slds-th__action:focus, .slds-is-sortable.slds-has-focus .slds-th__action, .slds-is-sortable.slds-has-focus .slds-th__action:hover, .slds-is-sortable.slds-has-focus .slds-th__action:focus", ".slds-no-cell-focus .slds-has-focus .slds-th__action, .slds-no-cell-focus .slds-has-focus .slds-th__action:hover, .slds-no-cell-focus .slds-has-focus .slds-th__action:focus, .slds-no-cell-focus .slds-has-focus .slds-th__action:focus:hover", ".slds-no-cell-focus .slds-has-focus.slds-is-resizable:hover .slds-th__action", ".slds-th__action:focus, .slds-th__action:hover" ], + "sassTokenName" : "$table-color-background-header-hover", + "value" : "#FFFFFF", + "yamlTokenName" : "TABLE_COLOR_BACKGROUND_HEADER_HOVER", + "scope" : null + }, + "tableColorBackgroundHeaderResizableHandle" : { + "auraTokenName" : "tableColorBackgroundHeaderResizableHandle", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-resizable__divider:before" ], + "sassTokenName" : "$table-color-background-header-resizable-handle", + "value" : "#b0adab", + "yamlTokenName" : "TABLE_COLOR_BACKGROUND_HEADER_RESIZABLE_HANDLE", + "scope" : null + }, + "tableColorTextHeader" : { + "auraTokenName" : "tableColorTextHeader", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-table thead th" ], + "sassTokenName" : "$table-color-text-header", + "value" : "#514f4d", + "yamlTokenName" : "TABLE_COLOR_TEXT_HEADER", + "scope" : null + }, + "zIndexDefault" : { + "auraTokenName" : "zIndexDefault", + "cssProperties" : [ "z-index" ], + "cssSelectors" : [ ".slds-table_edit_container:focus .slds-table_edit_container-message, .slds-table_edit_container:focus .slds-table--edit_container-message, .slds-table--edit_container:focus .slds-table_edit_container-message, .slds-table--edit_container:focus .slds-table--edit_container-message", ".slds-table_edit_container:focus:before, .slds-table--edit_container:focus:before" ], + "sassTokenName" : "$z-index-default", + "value" : "1", + "yamlTokenName" : "Z_INDEX_DEFAULT", + "scope" : null + }, + "zIndexPopup" : { + "auraTokenName" : "zIndexPopup", + "cssProperties" : [ "z-index" ], + "cssSelectors" : [ ".slds-resizable__divider" ], + "sassTokenName" : "$z-index-popup", + "value" : "5000", + "yamlTokenName" : "Z_INDEX_POPUP", "scope" : null } } }, { - "description" : "To initialize a card, apply the `.slds-card` class to a containing `
      `.\nA card is made up of three sections, a header, a body, and a footer.\nThe card header will get the `.slds-card__header` class.\nThe card body will get the `.slds-card__body` class. The card footer will\nget the `.slds-card__footer` class.", + "description" : "", "annotations" : { - "summary" : "Cards are used to apply a container around a related grouping of information.", - "layout" : "responsive", - "name" : "cards", - "support" : "dev-ready", "base" : "true", - "role" : "article", - "lwc" : "true", - "type" : "data-display, layout", - "category" : "base, structure", - "selector" : ".slds-card, .slds-card-wrapper" + "name" : "vertical-navigation", + "role" : "navigation", + "selector" : ".slds-nav-vertical", + "support" : "dev-ready", + "category" : "structure", + "type" : "navigation", + "layout" : "responsive" }, - "id" : "cards", - "docPath" : "./ui/components/cards/docs.mdx", - "selectors" : [ ".slds-card", ".slds-card, .slds-card-wrapper", ".slds-card-wrapper", ".slds-card__body", ".slds-card__body_inner", ".slds-card__footer", ".slds-card__footer-action", ".slds-card__header", ".slds-card__header-link", ".slds-card__header-title", ".slds-card_boundary", ".slds-einstein-header" ], + "id" : "vertical-navigation", + "docPath" : "./ui/components/vertical-navigation/docs.mdx", + "selectors" : [ ".slds-is-active", ".slds-nav-vertical", ".slds-nav-vertical__action", ".slds-nav-vertical__action_overflow", ".slds-nav-vertical__action-text", ".slds-nav-vertical_compact", ".slds-nav-vertical__item", ".slds-nav-vertical__item [type=\"radio\"]", ".slds-nav-vertical_radio-faux", ".slds-nav-vertical_shade", ".slds-nav-vertical__title" ], "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Initializes card", - "name" : "base", - "selector" : ".slds-card", - "restrict" : "article, div, section", - "support" : "dev-ready", - "variant" : "true" + "summary" : null, + "name" : "list", + "selector" : ".slds-nav-vertical", + "restrict" : "nav, fieldset", + "variant" : "true", + "support" : "dev-ready" }, - "id" : "base", + "id" : "list", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Used to bring back the border on a card when needed", - "selector" : ".slds-card_boundary", - "restrict" : ".slds-card" + "summary" : "Modifer to reduce spacing between navigation items", + "name" : "compact", + "selector" : ".slds-nav-vertical_compact", + "restrict" : ".slds-nav-vertical", + "modifier" : "true", + "group" : "spacing" }, - "id" : ".slds-card_boundary", + "id" : "compact", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -3729,75 +3630,51 @@ }, { "description" : "", "annotations" : { - "summary" : "Initializes card header", - "selector" : ".slds-card__header", - "restrict" : ".slds-card div" + "summary" : "Modifier to adjust list item when vertical navigation is sitting on top of a shaded background", + "name" : "shade", + "selector" : ".slds-nav-vertical_shade", + "restrict" : ".slds-nav-vertical", + "modifier" : "true", + "group" : "color" }, - "id" : ".slds-card__header", + "id" : "shade", "docPath" : null, "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Title element within card header", - "selector" : ".slds-card__header-title", - "restrict" : ".slds-card__header h2" - }, - "id" : ".slds-card__header-title", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Actionable element within the card header title", - "selector" : ".slds-card__header-link", - "restrict" : ".slds-card__header h2 a" - }, - "id" : ".slds-card__header-link", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "variant" : "true", - "summary" : "Einstein themed card header", - "name" : "einstein", - "support" : "dev-ready", - "role" : "article", - "type" : "layout", - "restrict" : ".slds-card__header", - "category" : "feature", - "selector" : ".slds-einstein-header" - }, - "id" : "einstein", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], + "restrictees" : [ ], "tokens" : { } }, { "description" : "", "annotations" : { - "summary" : "Initializes card body", - "selector" : ".slds-card__body", - "restrict" : ".slds-card div" + "summary" : "Section title of the vertical navigation", + "selector" : ".slds-nav-vertical__title", + "restrict" : ".slds-nav-vertical h2, .slds-nav-vertical legend" }, - "id" : ".slds-card__body", + "id" : ".slds-nav-vertical__title", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "List of the vertical navigation", + "selector" : ".slds-nav-vertical__item", + "restrict" : ".slds-nav-vertical li, .slds-nav-vertical span" + }, + "id" : ".slds-nav-vertical__item", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Apply the same spacing found on the card header to the card body", - "selector" : ".slds-card__body_inner", - "restrict" : ".slds-card__body" + "summary" : "Active state of a list item within a vertical navigation", + "name" : "item-active", + "selector" : ".slds-is-active", + "restrict" : ".slds-nav-vertical__item", + "modifier" : "true", + "group" : "interactions" }, - "id" : ".slds-card__body_inner", + "id" : "item-active", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -3807,225 +3684,267 @@ }, { "description" : "", "annotations" : { - "summary" : "Initializes card footer", - "selector" : ".slds-card__footer", - "restrict" : ".slds-card footer" + "summary" : "Actionable element inside of vertical navigation list item", + "selector" : ".slds-nav-vertical__action", + "restrict" : ".slds-nav-vertical a, .slds-nav-vertical button, .slds-nav-vertical label" }, - "id" : ".slds-card__footer", + "id" : ".slds-nav-vertical__action", "docPath" : null, "selectors" : null, "restrictees" : [ { + "description" : "Actionable element that toggles visibility of overflown list items", + "annotations" : { + "summary" : null, + "selector" : ".slds-nav-vertical__action_overflow", + "restrict" : ".slds-nav-vertical__action" + }, + "id" : ".slds-nav-vertical__action_overflow", + "docPath" : null, + "selectors" : null, + "restrictees" : [ { + "description" : "Text inside of actionable element that toggles visibility of overflown list items", + "annotations" : { + "summary" : null, + "selector" : ".slds-nav-vertical__action-text", + "restrict" : ".slds-nav-vertical__action_overflow span" + }, + "id" : ".slds-nav-vertical__action-text", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + } ], + "tokens" : { } + }, { "description" : "", "annotations" : { - "summary" : "Actionable element within card footer", - "selector" : ".slds-card__footer-action", - "restrict" : ".slds-card__footer a" + "summary" : "Used for styling the radio button", + "selector" : ".slds-nav-vertical_radio-faux", + "restrict" : ".slds-nav-vertical__action span" }, - "id" : ".slds-card__footer-action", + "id" : ".slds-nav-vertical_radio-faux", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } } ], "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Version of vertical nav that uses radio buttons", + "name" : "radio-group", + "selector" : ".slds-nav-vertical__item [type=\"radio\"]", + "restrict" : ".slds-nav-vertical", + "variant" : "true", + "support" : "dev-ready" + }, + "id" : "radio-group", + "docPath" : "./ui/components/radio-group/docs.mdx", + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } } ], "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "wrapper", - "summary" : "Removes the card look from nested cards and pulls them to the boundary of the card wrapper, making the nested cards look like they are inside of one card", - "selector" : ".slds-card-wrapper", - "restrict" : "div", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "wrapper", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } } ], "tokens" : { - "borderRadiusMedium" : { - "auraTokenName" : "borderRadiusMedium", - "cssProperties" : [ "border-radius" ], - "cssSelectors" : [ ".slds-card", ".slds-card .slds-card_boundary, .slds-modal .slds-card_boundary, .slds-tabs_default .slds-card_boundary, .slds-tabs--default .slds-card_boundary", ".slds-card-wrapper", ".slds-tabs_card .slds-card_boundary, .slds-tabs_card.slds-tabs_card .slds-card_boundary, .slds-card-wrapper .slds-card_boundary", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], - "sassTokenName" : "$border-radius-medium", - "value" : "0.25rem", - "yamlTokenName" : "BORDER_RADIUS_MEDIUM", - "scope" : null - }, "borderWidthThin" : { "auraTokenName" : "borderWidthThin", - "cssProperties" : [ "border", "border-bottom", "border-top" ], - "cssSelectors" : [ ".slds-card", ".slds-card .slds-card_boundary, .slds-modal .slds-card_boundary, .slds-tabs_default .slds-card_boundary, .slds-tabs--default .slds-card_boundary", ".slds-card-wrapper", ".slds-card__footer", ".slds-region__pinned-left .slds-card, .slds-region__pinned-left .slds-card-wrapper, .slds-region__pinned-left .slds-card_boundary, .slds-region__pinned-left .slds-tabs_card, .slds-region__pinned-right .slds-card, .slds-region__pinned-right .slds-card-wrapper, .slds-region__pinned-right .slds-card_boundary, .slds-region__pinned-right .slds-tabs_card", ".slds-tabs_card .slds-card_boundary, .slds-tabs_card.slds-tabs_card .slds-card_boundary, .slds-card-wrapper .slds-card_boundary", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], + "cssProperties" : [ "border-bottom", "border-top" ], + "cssSelectors" : [ ".slds-nav-vertical__action", ".slds-navigation-list-vertical__action, .slds-navigation-list--vertical__action" ], "sassTokenName" : "$border-width-thin", "value" : "1px", "yamlTokenName" : "BORDER_WIDTH_THIN", "scope" : null }, - "cardColorBackground" : { - "auraTokenName" : "cardColorBackground", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-card", ".slds-card .slds-card, .slds-card .slds-card-wrapper, .slds-card-wrapper .slds-card, .slds-card-wrapper .slds-card-wrapper, .slds-modal .slds-card, .slds-modal .slds-card-wrapper, .slds-tabs_default .slds-card, .slds-tabs_default .slds-card-wrapper, .slds-tabs--default .slds-card, .slds-tabs--default .slds-card-wrapper, .slds-tabs_card .slds-card, .slds-tabs_card .slds-card-wrapper, .slds-tabs_card.slds-tabs_card .slds-card, .slds-tabs_card.slds-tabs_card .slds-card-wrapper", ".slds-card-wrapper", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], - "sassTokenName" : "$card-color-background", - "value" : "#FFFFFF", - "yamlTokenName" : "CARD_COLOR_BACKGROUND", + "brandAccessibleActive" : { + "auraTokenName" : "brandAccessibleActive", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-navigation-list-vertical .slds-is-active .slds-navigation-list-vertical__action:focus, .slds-navigation-list-vertical .slds-is-active .slds-navigation-list--vertical__action:focus, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list-vertical__action:focus, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list--vertical__action:focus" ], + "sassTokenName" : "$brand-accessible-active", + "value" : "#005fb2", + "yamlTokenName" : "BRAND_ACCESSIBLE_ACTIVE", "scope" : null }, - "cardColorBorder" : { - "auraTokenName" : "cardColorBorder", - "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-card", ".slds-card .slds-card_boundary, .slds-modal .slds-card_boundary, .slds-tabs_default .slds-card_boundary, .slds-tabs--default .slds-card_boundary", ".slds-card-wrapper", ".slds-tabs_card .slds-card_boundary, .slds-tabs_card.slds-tabs_card .slds-card_boundary, .slds-card-wrapper .slds-card_boundary", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], - "sassTokenName" : "$card-color-border", - "value" : "#dddbda", - "yamlTokenName" : "CARD_COLOR_BORDER", + "brandPrimary" : { + "auraTokenName" : "brandPrimary", + "cssProperties" : [ "border-left-color", "box-shadow" ], + "cssSelectors" : [ ".slds-nav-vertical__action", ".slds-nav-vertical__action:hover", ".slds-nav-vertical__item [type=\"radio\"]:checked + .slds-nav-vertical__action", ".slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action", ".slds-navigation-list-vertical .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list-vertical .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list--vertical__action" ], + "sassTokenName" : "$brand-primary", + "value" : "#1589ee", + "yamlTokenName" : "BRAND_PRIMARY", "scope" : null }, - "cardFontWeight" : { - "auraTokenName" : "cardFontWeight", - "cssProperties" : [ "font-weight" ], - "cssSelectors" : [ ".slds-card__header-link", ".slds-card__header-title" ], - "sassTokenName" : "$card-font-weight", - "value" : "700", - "yamlTokenName" : "CARD_FONT_WEIGHT", + "brandPrimaryTransparent10" : { + "auraTokenName" : "brandPrimaryTransparent10", + "cssProperties" : [ "background", "background-color" ], + "cssSelectors" : [ ".slds-nav-vertical__item:hover:before, .slds-nav-vertical__item.slds-is-active:before", ".slds-navigation-list-vertical .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list-vertical .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list--vertical__action" ], + "sassTokenName" : "$brand-primary-transparent-10", + "value" : "rgba(21,137,238,0.1)", + "yamlTokenName" : "BRAND_PRIMARY_TRANSPARENT_10", "scope" : null }, - "cardFooterColorBorder" : { - "auraTokenName" : "cardFooterColorBorder", - "cssProperties" : [ "border-top" ], - "cssSelectors" : [ ".slds-card__footer" ], - "sassTokenName" : "$card-footer-color-border", - "value" : "#dddbda", - "yamlTokenName" : "CARD_FOOTER_COLOR_BORDER", + "colorBackgroundAlt" : { + "auraTokenName" : "colorBackgroundAlt", + "cssProperties" : [ "background", "background-color" ], + "cssSelectors" : [ ".slds-nav-vertical_shade .slds-is-active.slds-nav-vertical__item:before", ".slds-nav-vertical_shade .slds-nav-vertical__item [type=\"radio\"]:checked + .slds-nav-vertical__action", ".slds-nav-vertical_shade .slds-nav-vertical__item:hover:before", ".slds-navigation-list-vertical_shade .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list-vertical_shade .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list-vertical--shade .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list-vertical--shade .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list--vertical-inverse .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list--vertical-inverse .slds-is-active .slds-navigation-list--vertical__action" ], + "sassTokenName" : "$color-background-alt", + "value" : "#FFFFFF", + "yamlTokenName" : "COLOR_BACKGROUND_ALT", "scope" : null }, - "cardFooterTextAlign" : { - "auraTokenName" : "cardFooterTextAlign", - "cssProperties" : [ "text-align" ], - "cssSelectors" : [ ".slds-card__footer" ], - "sassTokenName" : "$card-footer-text-align", - "value" : "center", - "yamlTokenName" : "CARD_FOOTER_TEXT_ALIGN", + "colorBackgroundRowActive" : { + "auraTokenName" : "colorBackgroundRowActive", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-navigation-list-vertical__action:active, .slds-navigation-list--vertical__action:active" ], + "sassTokenName" : "$color-background-row-active", + "value" : "#ecebea", + "yamlTokenName" : "COLOR_BACKGROUND_ROW_ACTIVE", "scope" : null }, - "cardShadow" : { - "auraTokenName" : "cardShadow", - "cssProperties" : [ "box-shadow" ], - "cssSelectors" : [ ".slds-card", ".slds-card-wrapper", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], - "sassTokenName" : "$card-shadow", - "value" : "0 2px 2px 0 rgba(0, 0, 0, 0.10)", - "yamlTokenName" : "CARD_SHADOW", + "colorBackgroundRowHover" : { + "auraTokenName" : "colorBackgroundRowHover", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-navigation-list-vertical__action:hover, .slds-navigation-list-vertical__action:focus, .slds-navigation-list--vertical__action:hover, .slds-navigation-list--vertical__action:focus" ], + "sassTokenName" : "$color-background-row-hover", + "value" : "#f3f2f2", + "yamlTokenName" : "COLOR_BACKGROUND_ROW_HOVER", + "scope" : null + }, + "colorBackgroundSelection" : { + "auraTokenName" : "colorBackgroundSelection", + "cssProperties" : [ "background-color" ], + "cssSelectors" : [ ".slds-nav-vertical__item [type=\"radio\"]:checked + .slds-nav-vertical__action" ], + "sassTokenName" : "$color-background-selection", + "value" : "#D8EDFF", + "yamlTokenName" : "COLOR_BACKGROUND_SELECTION", "scope" : null }, "colorBorder" : { "auraTokenName" : "colorBorder", - "cssProperties" : [ "border-bottom" ], - "cssSelectors" : [ ".slds-region__pinned-left .slds-card, .slds-region__pinned-left .slds-card-wrapper, .slds-region__pinned-left .slds-card_boundary, .slds-region__pinned-left .slds-tabs_card, .slds-region__pinned-right .slds-card, .slds-region__pinned-right .slds-card-wrapper, .slds-region__pinned-right .slds-card_boundary, .slds-region__pinned-right .slds-tabs_card" ], + "cssProperties" : [ "border-color" ], + "cssSelectors" : [ ".slds-nav-vertical_shade .slds-is-active .slds-nav-vertical__action", ".slds-nav-vertical_shade .slds-nav-vertical__item [type=\"radio\"]:checked + .slds-nav-vertical__action", ".slds-navigation-list-vertical .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list-vertical .slds-is-active .slds-navigation-list--vertical__action, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list-vertical__action, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list--vertical__action" ], "sassTokenName" : "$color-border", "value" : "#dddbda", "yamlTokenName" : "COLOR_BORDER", "scope" : null }, - "fontSize3" : { - "auraTokenName" : "fontSize3", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-card__footer" ], - "sassTokenName" : "$font-size-3", - "value" : "0.8125rem", - "yamlTokenName" : "FONT_SIZE_3", + "colorTextDefault" : { + "auraTokenName" : "colorTextDefault", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-nav-vertical__action", ".slds-navigation-list-vertical .slds-is-active, .slds-navigation-list--vertical .slds-is-active" ], + "sassTokenName" : "$color-text-default", + "value" : "#080707", + "yamlTokenName" : "COLOR_TEXT_DEFAULT", "scope" : null }, - "lineHeightHeading" : { - "auraTokenName" : "lineHeightHeading", - "cssProperties" : [ "line-height" ], - "cssSelectors" : [ ".slds-card__header-title" ], - "sassTokenName" : "$line-height-heading", - "value" : "1.25", - "yamlTokenName" : "LINE_HEIGHT_HEADING", + "colorTextIconDefault" : { + "auraTokenName" : "colorTextIconDefault", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-nav-vertical__action_overflow" ], + "sassTokenName" : "$color-text-icon-default", + "value" : "#706e6b", + "yamlTokenName" : "COLOR_TEXT_ICON_DEFAULT", "scope" : null }, - "varFontSize5" : { - "auraTokenName" : "varFontSize5", + "colorTextLink" : { + "auraTokenName" : "colorTextLink", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-nav-vertical__action-text" ], + "sassTokenName" : "$color-text-link", + "value" : "#006DCC", + "yamlTokenName" : "COLOR_TEXT_LINK", + "scope" : null + }, + "fontSize5" : { + "auraTokenName" : "fontSize5", "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-card__header-title" ], - "sassTokenName" : "$var-font-size-5", + "cssSelectors" : [ ".slds-nav-vertical__title" ], + "sassTokenName" : "$font-size-5", "value" : "1rem", - "yamlTokenName" : "VAR_FONT_SIZE_5", + "yamlTokenName" : "FONT_SIZE_5", "scope" : null }, - "varFontSize6" : { - "auraTokenName" : "varFontSize6", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-card__header-title" ], - "sassTokenName" : "$var-font-size-6", - "value" : "1.125rem", - "yamlTokenName" : "VAR_FONT_SIZE_6", + "fontWeightBold" : { + "auraTokenName" : "fontWeightBold", + "cssProperties" : [ "font-weight" ], + "cssSelectors" : [ ".slds-nav-vertical__title" ], + "sassTokenName" : "$font-weight-bold", + "value" : "700", + "yamlTokenName" : "FONT_WEIGHT_BOLD", "scope" : null }, - "varSpacingHorizontalMedium" : { - "auraTokenName" : "varSpacingHorizontalMedium", + "spacingLarge" : { + "auraTokenName" : "spacingLarge", + "cssProperties" : [ "padding", "padding-left" ], + "cssSelectors" : [ ".slds-nav-vertical__action", ".slds-nav-vertical__title", ".slds-nav-vertical_compact .slds-nav-vertical__title, .slds-nav-vertical_compact .slds-nav-vertical__action", ".slds-navigation-list-vertical__action, .slds-navigation-list--vertical__action" ], + "sassTokenName" : "$spacing-large", + "value" : "1.5rem", + "yamlTokenName" : "SPACING_LARGE", + "scope" : null + }, + "spacingMedium" : { + "auraTokenName" : "spacingMedium", "cssProperties" : [ "padding" ], - "cssSelectors" : [ ".slds-card__body_inner, .slds-card__body--inner", ".slds-card__footer", ".slds-card__header", ".slds-tabs_card .slds-card_boundary .slds-card__body_inner, .slds-tabs_card .slds-card_boundary .slds-card__body--inner, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__body_inner, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__body--inner, .slds-card-wrapper .slds-card_boundary .slds-card__body_inner, .slds-card-wrapper .slds-card_boundary .slds-card__body--inner", ".slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-card-wrapper .slds-card_boundary .slds-card__footer", ".slds-tabs_card .slds-card_boundary .slds-card__header, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__header, .slds-card-wrapper .slds-card_boundary .slds-card__header", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], - "sassTokenName" : "$var-spacing-horizontal-medium", + "cssSelectors" : [ ".slds-nav-vertical__title" ], + "sassTokenName" : "$spacing-medium", "value" : "1rem", - "yamlTokenName" : "VAR_SPACING_HORIZONTAL_MEDIUM", + "yamlTokenName" : "SPACING_MEDIUM", "scope" : null }, - "varSpacingMedium" : { - "auraTokenName" : "varSpacingMedium", + "spacingXLarge" : { + "auraTokenName" : "spacingXLarge", "cssProperties" : [ "padding" ], - "cssSelectors" : [ ".slds-card-wrapper" ], - "sassTokenName" : "$var-spacing-medium", - "value" : "1rem", - "yamlTokenName" : "VAR_SPACING_MEDIUM", + "cssSelectors" : [ ".slds-nav-vertical__action" ], + "sassTokenName" : "$spacing-x-large", + "value" : "2rem", + "yamlTokenName" : "SPACING_X_LARGE", "scope" : null }, - "varSpacingVerticalMedium" : { - "auraTokenName" : "varSpacingVerticalMedium", - "cssProperties" : [ "margin-top" ], - "cssSelectors" : [ ".slds-card + .slds-card" ], - "sassTokenName" : "$var-spacing-vertical-medium", - "value" : "1rem", - "yamlTokenName" : "VAR_SPACING_VERTICAL_MEDIUM", + "spacingXSmall" : { + "auraTokenName" : "spacingXSmall", + "cssProperties" : [ "border-left-width", "margin-top", "padding" ], + "cssSelectors" : [ ".slds-nav-vertical__action", ".slds-nav-vertical__section:not(:first-of-type)", ".slds-nav-vertical__title", ".slds-nav-vertical__title:not(:first-of-type)", ".slds-navigation-list-vertical .slds-is-active .slds-navigation-list-vertical__action:focus, .slds-navigation-list-vertical .slds-is-active .slds-navigation-list--vertical__action:focus, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list-vertical__action:focus, .slds-navigation-list--vertical .slds-is-active .slds-navigation-list--vertical__action:focus", ".slds-navigation-list-vertical__action, .slds-navigation-list--vertical__action" ], + "sassTokenName" : "$spacing-x-small", + "value" : "0.5rem", + "yamlTokenName" : "SPACING_X_SMALL", "scope" : null }, - "varSpacingVerticalSmall" : { - "auraTokenName" : "varSpacingVerticalSmall", - "cssProperties" : [ "margin", "margin-bottom", "margin-top", "padding" ], - "cssSelectors" : [ ".slds-card__body", ".slds-card__footer", ".slds-card__header", ".slds-card__tile", ".slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-card-wrapper .slds-card_boundary .slds-card__footer", ".slds-tabs_card .slds-card_boundary .slds-card__header, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__header, .slds-card-wrapper .slds-card_boundary .slds-card__header", ".slds-tabs_card, .slds-tabs_card.slds-tabs_card" ], - "sassTokenName" : "$var-spacing-vertical-small", - "value" : "0.75rem", - "yamlTokenName" : "VAR_SPACING_VERTICAL_SMALL", + "spacingXxSmall" : { + "auraTokenName" : "spacingXxSmall", + "cssProperties" : [ "border-left", "padding" ], + "cssSelectors" : [ ".slds-nav-vertical_compact .slds-nav-vertical__title, .slds-nav-vertical_compact .slds-nav-vertical__action", ".slds-navigation-list-vertical__action, .slds-navigation-list--vertical__action" ], + "sassTokenName" : "$spacing-xx-small", + "value" : "0.25rem", + "yamlTokenName" : "SPACING_XX_SMALL", "scope" : null } } }, { - "description" : "A Carousel can accept a maximum number of 5 panels where only 1 panel is visible at a time.\n\nYou are able to navigate between panels by interacting with the `slds-carousel__indicator` elements that sit below the panel.\n\nA panel becomes visible by toggling the `slds-hide` class with the `slds-show` class on the `slds-carousel__panel` element.\n\nWhen making the `slds-carousel__panel` active, the indicator should be updated with the `slds-is-active` class. This provides visual feedback showing which carousel panel is active.\n\n### Accessibility\n\nA Carousel is built using a tabbed UI specification and requires the following to meet accessibility requirements:\n\n- The tab list, which should have `role=\"tablist\"`\n- The tabs in that list, which should each be an `` anchor wrapped in a `
    1. ` list item\n- The tab panels, which display each tab’s content and should each have `role=\"tabpanel\"`\n\n**Expected markup:**\n\n- Selected tab’s anchor has `aria-selected=\"true\"`, all other tabs’ anchors have `aria-selected=\"false\"`\n- Selected tab’s anchor has `tabindex=\"0\"`, all other tabs have `tabindex=\"-1\"`\n- Each tab’s anchor has an `aria-controls` attribute whose value is the id of the associated `
      `\n- Each tab panel has an `aria-labelledby` attribute whose value is the id of its associated ``\n- When the Carousel is set to auto-play, the HTML for the pause button is required to precede the HTML of the tab set\n\n**Expected keyboard interactions:**\n\n- Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab\n- Tab key, when focus is before the tab list, moves focus to the selected tab panel\n- Tab key, when focus is on selected tabpanel, moves focus into the selected tabpanel's associated tab or to the next focusable element on the page if that panel has no focusable elements\n- Shift+Tab keys, when focus is on first element in a tab panel, move focus focus entirely from tabset", + "description" : "", "annotations" : { - "summary" : "A carousel allows multiple pieces of featured content to occupy an allocated amount of space.", - "layout" : "responsive", - "name" : "carousel", - "support" : "dev-ready", "base" : "true", - "lwc" : "true", - "type" : "navigation, data-display", + "name" : "app-launcher", + "role" : "modal-dialog", + "selector" : ".slds-app-launcher__tile", + "summary" : "The App Launcher allows the user to quickly access all the apps and functionality with their organization.", + "support" : "dev-ready", "category" : "experience", - "selector" : ".slds-carousel" + "type" : "navigation", + "layout" : "responsive" }, - "id" : "carousel", - "docPath" : "./ui/components/carousel/docs.mdx", - "selectors" : [ ".slds-carousel", ".slds-carousel__autoplay", ".slds-carousel__content", ".slds-carousel__content-title", ".slds-carousel__image", ".slds-carousel__indicator", ".slds-carousel__indicator-action", ".slds-carousel__indicators", ".slds-carousel__panel-action", ".slds-carousel__panels", ".slds-carousel__stage", ".slds-is-active" ], + "id" : "app-launcher", + "docPath" : "./ui/components/app-launcher/docs.mdx", + "selectors" : [ ".slds-app-launcher__tile", ".slds-app-launcher__tile-body", ".slds-app-launcher__tile-body_small", ".slds-app-launcher__tile-figure", ".slds-app-launcher__tile-figure_small", ".slds-app-launcher__tile_small", ".slds-is-draggable", ".slds-is-grabbed" ], "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Initiates a carousel component", + "summary" : "Tile cards that contains the app information, the icon and description", "name" : "base", - "selector" : ".slds-carousel", + "selector" : ".slds-app-launcher__tile", "restrict" : "div", - "support" : "dev-ready", - "variant" : "true" + "variant" : "true", + "support" : "dev-ready" }, "id" : "base", "docPath" : null, @@ -4033,81 +3952,60 @@ "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Main stage for carousel's tab-panels and tab-list inidicators", - "selector" : ".slds-carousel__stage", - "restrict" : ".slds-carousel div" + "summary" : "Tile card that containes the just app icon and title", + "selector" : ".slds-app-launcher__tile_small", + "restrict" : ".slds-app-launcher__tile" }, - "id" : ".slds-carousel__stage", + "id" : ".slds-app-launcher__tile_small", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Add styles associated with drag and drop of a tile", + "selector" : ".slds-is-draggable", + "restrict" : ".slds-app-launcher__tile" + }, + "id" : ".slds-is-draggable", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Add styles associated with a tile being grabbed in drag and drop interaction", + "name" : "grabbed", + "selector" : ".slds-is-grabbed", + "restrict" : ".slds-app-launcher__tile", + "modifier" : "true", + "group" : "interactions" + }, + "id" : "grabbed", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "App image or icon", + "selector" : ".slds-app-launcher__tile-figure", + "restrict" : ".slds-app-launcher__tile div" + }, + "id" : ".slds-app-launcher__tile-figure", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Tabpanel region that contains all carousel panels", - "selector" : ".slds-carousel__panels", - "restrict" : ".slds-carousel__stage div" - }, - "id" : ".slds-carousel__panels", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Actionable element that contains the carousel's tab-panel content", - "selector" : ".slds-carousel__panel-action", - "restrict" : ".slds-carousel__stage a" - }, - "id" : ".slds-carousel__panel-action", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Element that contains the image inside the carousel's tab-panel", - "selector" : ".slds-carousel__image", - "restrict" : ".slds-carousel__panel-action div" - }, - "id" : ".slds-carousel__image", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Element that contains the content inside the carousel's tab-panel", - "selector" : ".slds-carousel__content", - "restrict" : ".slds-carousel__panel-action div" - }, - "id" : ".slds-carousel__content", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Heading element that contains the title of the carousel's tab-panel", - "selector" : ".slds-carousel__content-title", - "restrict" : ".slds-carousel__content h2" - }, - "id" : ".slds-carousel__content-title", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Element that contains the auto-play button icon to toggle on/off", - "selector" : ".slds-carousel__autoplay", - "restrict" : ".slds-carousel__stage span" + "summary" : "App image or icon of a small tile", + "selector" : ".slds-app-launcher__tile-figure_small", + "restrict" : ".slds-app-launcher__tile-figure" }, - "id" : ".slds-carousel__autoplay", + "id" : ".slds-app-launcher__tile-figure_small", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -4117,48 +4015,24 @@ }, { "description" : "", "annotations" : { - "summary" : "List element that contains the carousel's tab-list inidicators", - "selector" : ".slds-carousel__indicators", - "restrict" : ".slds-carousel ul" + "summary" : "App title and description", + "selector" : ".slds-app-launcher__tile-body", + "restrict" : ".slds-app-launcher__tile div" }, - "id" : ".slds-carousel__indicators", + "id" : ".slds-app-launcher__tile-body", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Carousel's tab-list inidicator items", - "selector" : ".slds-carousel__indicator", - "restrict" : ".slds-carousel__indicators li" + "summary" : "App title, no description", + "selector" : ".slds-app-launcher__tile-body_small", + "restrict" : ".slds-app-launcher__tile-body" }, - "id" : ".slds-carousel__indicator", + "id" : ".slds-app-launcher__tile-body_small", "docPath" : null, "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Actionable element inside of each tab-list indicator", - "selector" : ".slds-carousel__indicator-action", - "restrict" : ".slds-carousel__indicator a" - }, - "id" : ".slds-carousel__indicator-action", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Active state notifying the tab that its current panel is active", - "selector" : ".slds-is-active", - "restrict" : ".slds-carousel__indicator-action" - }, - "id" : ".slds-is-active", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - } ], + "restrictees" : [ ], "tokens" : { } } ], "tokens" : { } @@ -4168,8 +4042,8 @@ "tokens" : { "borderRadiusMedium" : { "auraTokenName" : "borderRadiusMedium", - "cssProperties" : [ "border-bottom-left-radius", "border-bottom-right-radius", "border-radius", "border-top-left-radius", "border-top-right-radius" ], - "cssSelectors" : [ ".slds-carousel__content", ".slds-carousel__image", ".slds-carousel__panel-action" ], + "cssProperties" : [ "border-radius" ], + "cssSelectors" : [ ".slds-app-launcher__tile", ".slds-app-launcher__tile-body", ".slds-app-launcher__tile-figure", ".slds-app-launcher__tile-figure_small, .slds-app-launcher__tile-figure--small" ], "sassTokenName" : "$border-radius-medium", "value" : "0.25rem", "yamlTokenName" : "BORDER_RADIUS_MEDIUM", @@ -4178,7 +4052,7 @@ "borderWidthThin" : { "auraTokenName" : "borderWidthThin", "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-carousel__indicator-action", ".slds-carousel__panel-action" ], + "cssSelectors" : [ ".slds-app-launcher__tile", ".slds-app-launcher__tile-figure_small, .slds-app-launcher__tile-figure--small" ], "sassTokenName" : "$border-width-thin", "value" : "1px", "yamlTokenName" : "BORDER_WIDTH_THIN", @@ -4187,88 +4061,70 @@ "brandAccessibleActive" : { "auraTokenName" : "brandAccessibleActive", "cssProperties" : [ "border-color" ], - "cssSelectors" : [ ".slds-carousel__panel-action:focus" ], + "cssSelectors" : [ ".slds-app-launcher__tile:hover, .slds-app-launcher__tile:focus, .slds-app-launcher__tile:active" ], "sassTokenName" : "$brand-accessible-active", "value" : "#005fb2", "yamlTokenName" : "BRAND_ACCESSIBLE_ACTIVE", "scope" : null }, - "carouselColorBackground" : { - "auraTokenName" : "carouselColorBackground", + "colorBackground" : { + "auraTokenName" : "colorBackground", "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-carousel__content" ], - "sassTokenName" : "$carousel-color-background", - "value" : "#FFFFFF", - "yamlTokenName" : "CAROUSEL_COLOR_BACKGROUND", + "cssSelectors" : [ ".slds-app-launcher__tile-body" ], + "sassTokenName" : "$color-background", + "value" : "#f3f2f2", + "yamlTokenName" : "COLOR_BACKGROUND", "scope" : null }, - "carouselIndicatorColorBackground" : { - "auraTokenName" : "carouselIndicatorColorBackground", - "cssProperties" : [ "background" ], - "cssSelectors" : [ ".slds-carousel__indicator-action" ], - "sassTokenName" : "$carousel-indicator-color-background", - "value" : "#FFFFFF", - "yamlTokenName" : "CAROUSEL_INDICATOR_COLOR_BACKGROUND", + "colorBorder" : { + "auraTokenName" : "colorBorder", + "cssProperties" : [ "border" ], + "cssSelectors" : [ ".slds-app-launcher__tile", ".slds-app-launcher__tile-figure_small, .slds-app-launcher__tile-figure--small" ], + "sassTokenName" : "$color-border", + "value" : "#dddbda", + "yamlTokenName" : "COLOR_BORDER", "scope" : null }, - "carouselIndicatorColorBackgroundActive" : { - "auraTokenName" : "carouselIndicatorColorBackgroundActive", - "cssProperties" : [ "background", "border-color" ], - "cssSelectors" : [ ".slds-carousel__indicator-action.slds-is-active, .slds-carousel__indicator-action.slds-is-active:hover" ], - "sassTokenName" : "$carousel-indicator-color-background-active", - "value" : "#0070D2", - "yamlTokenName" : "CAROUSEL_INDICATOR_COLOR_BACKGROUND_ACTIVE", - "scope" : null - }, - "carouselIndicatorColorBackgroundFocus" : { - "auraTokenName" : "carouselIndicatorColorBackgroundFocus", - "cssProperties" : [ "background-color", "border-color" ], - "cssSelectors" : [ ".slds-carousel__indicator-action:focus" ], - "sassTokenName" : "$carousel-indicator-color-background-focus", - "value" : "#005FB2", - "yamlTokenName" : "CAROUSEL_INDICATOR_COLOR_BACKGROUND_FOCUS", - "scope" : null - }, - "carouselIndicatorColorBackgroundHover" : { - "auraTokenName" : "carouselIndicatorColorBackgroundHover", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-carousel__indicator-action:hover" ], - "sassTokenName" : "$carousel-indicator-color-background-hover", - "value" : "#fafaf9", - "yamlTokenName" : "CAROUSEL_INDICATOR_COLOR_BACKGROUND_HOVER", + "colorBorderSelectionHover" : { + "auraTokenName" : "colorBorderSelectionHover", + "cssProperties" : [ "border-color" ], + "cssSelectors" : [ ".slds-app-launcher__tile_small:hover .slds-app-launcher__tile-figure_small, .slds-app-launcher__tile_small:hover .slds-app-launcher__tile-figure--small, .slds-app-launcher__tile_small:focus .slds-app-launcher__tile-figure_small, .slds-app-launcher__tile_small:focus .slds-app-launcher__tile-figure--small, .slds-app-launcher__tile--small:hover .slds-app-launcher__tile-figure_small, .slds-app-launcher__tile--small:hover .slds-app-launcher__tile-figure--small, .slds-app-launcher__tile--small:focus .slds-app-launcher__tile-figure_small, .slds-app-launcher__tile--small:focus .slds-app-launcher__tile-figure--small" ], + "sassTokenName" : "$color-border-selection-hover", + "value" : "#1589ee", + "yamlTokenName" : "COLOR_BORDER_SELECTION_HOVER", "scope" : null }, - "carouselIndicatorWidth" : { - "auraTokenName" : "carouselIndicatorWidth", - "cssProperties" : [ "height", "width" ], - "cssSelectors" : [ ".slds-carousel__indicator-action" ], - "sassTokenName" : "$carousel-indicator-width", - "value" : "1rem", - "yamlTokenName" : "CAROUSEL_INDICATOR_WIDTH", + "colorTextInverse" : { + "auraTokenName" : "colorTextInverse", + "cssProperties" : [ "color" ], + "cssSelectors" : [ ".slds-app-launcher__tile-figure" ], + "sassTokenName" : "$color-text-inverse", + "value" : "#FFFFFF", + "yamlTokenName" : "COLOR_TEXT_INVERSE", "scope" : null }, - "colorBorder" : { - "auraTokenName" : "colorBorder", - "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-carousel__indicator-action", ".slds-carousel__panel-action" ], - "sassTokenName" : "$color-border", - "value" : "#dddbda", - "yamlTokenName" : "COLOR_BORDER", + "sizeLarge" : { + "auraTokenName" : "sizeLarge", + "cssProperties" : [ "flex" ], + "cssSelectors" : [ ".slds-app-launcher__header-search" ], + "sassTokenName" : "$size-large", + "value" : "25rem", + "yamlTokenName" : "SIZE_LARGE", "scope" : null }, - "fontSize5" : { - "auraTokenName" : "fontSize5", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-carousel__content-title" ], - "sassTokenName" : "$font-size-5", + "spacingMedium" : { + "auraTokenName" : "spacingMedium", + "cssProperties" : [ "padding" ], + "cssSelectors" : [ ".slds-app-launcher__header-search" ], + "sassTokenName" : "$spacing-medium", "value" : "1rem", - "yamlTokenName" : "FONT_SIZE_5", + "yamlTokenName" : "SPACING_MEDIUM", "scope" : null }, "spacingSmall" : { "auraTokenName" : "spacingSmall", "cssProperties" : [ "padding" ], - "cssSelectors" : [ ".slds-carousel__content" ], + "cssSelectors" : [ ".slds-app-launcher__tile-body", ".slds-app-launcher__tile-figure" ], "sassTokenName" : "$spacing-small", "value" : "0.75rem", "yamlTokenName" : "SPACING_SMALL", @@ -4276,8 +4132,8 @@ }, "spacingXSmall" : { "auraTokenName" : "spacingXSmall", - "cssProperties" : [ "margin" ], - "cssSelectors" : [ ".slds-carousel__indicators" ], + "cssProperties" : [ "margin", "padding" ], + "cssSelectors" : [ ".slds-app-launcher__tile", ".slds-app-launcher__tile-body", ".slds-app-launcher__tile-body_small, .slds-app-launcher__tile-body--small" ], "sassTokenName" : "$spacing-x-small", "value" : "0.5rem", "yamlTokenName" : "SPACING_X_SMALL", @@ -4285,8 +4141,8 @@ }, "spacingXxSmall" : { "auraTokenName" : "spacingXxSmall", - "cssProperties" : [ "bottom", "margin" ], - "cssSelectors" : [ ".slds-carousel__autoplay", ".slds-carousel__indicator" ], + "cssProperties" : [ "padding-bottom" ], + "cssSelectors" : [ ".slds-app-launcher__tile.slds-is-draggable .slds-app-launcher__tile-figure" ], "sassTokenName" : "$spacing-xx-small", "value" : "0.25rem", "yamlTokenName" : "SPACING_XX_SMALL", @@ -4294,90 +4150,73 @@ } } }, { - "description" : "The Chat component is used to display real-time and past chat logs between service agents and customers. It comes with a number of sub components that can be used to display the different types of chat items.", + "description" : "", "annotations" : { - "summary" : "Use Chat to display current or historical instant messaging chat sessions", - "layout" : "responsive", - "name" : "chat", - "support" : "dev-ready", "base" : "true", - "role" : "log", - "type" : "data-display", + "name" : "setup-assistant", + "selector" : ".slds-setup-assistant", + "summary" : "Setup Assistant", + "support" : "dev-ready", "category" : "experience", - "selector" : ".slds-chat" + "type" : "data-display", + "layout" : "responsive" }, - "id" : "chat", - "docPath" : "./ui/components/chat/docs.mdx", - "selectors" : [ ".slds-chat", ".slds-chat-avatar", ".slds-chat-avatar__intials", ".slds-chat-bookend", ".slds-chat-bookend_stop", ".slds-chat-event", ".slds-chat-event__agent-message", ".slds-chat-event__body", ".slds-chat-event__rule", ".slds-chat-icon", ".slds-chat-list", ".slds-chat-listitem", ".slds-chat-listitem_bookend", ".slds-chat-listitem_event", ".slds-chat-listitem_inbound", ".slds-chat-listitem_outbound", ".slds-chat-message", ".slds-chat-message__action", ".slds-chat-message__body", ".slds-chat-message__file", ".slds-chat-message__file_inbound", ".slds-chat-message__image_loading", ".slds-chat-message__meta", ".slds-chat-message__text", ".slds-chat-message__text_delivery-failure", ".slds-chat-message__text_delivery-failure-reason", ".slds-chat-message__text_inbound", ".slds-chat-message__text_outbound", ".slds-chat-message__text_outbound-agent", ".slds-chat-message__text_sneak-peek", ".slds-chat-message__text_unsupported-type", ".slds-chat-message_faux-avatar", ".slds-chat_past", ".slds-has-error" ], + "id" : "setup-assistant", + "docPath" : "./ui/components/setup-assistant/docs.mdx", + "selectors" : [ ".slds-setup-assistant", ".slds-setup-assistant__item", ".slds-setup-assistant__step", ".slds-setup-assistant__step-detail", ".slds-setup-assistant__step-summary", ".slds-setup-assistant__step-summary-content", ".slds-setup-assistant__step-summary-title" ], "restrictees" : [ { - "description" : "This component is used to display a current or past chat session between a customer and a service agent.\nIt appears in the form of a \"Log\"", + "description" : "", "annotations" : { - "summary" : "Root container of a chat session", + "summary" : "Setup Assistant component", "name" : "base", - "selector" : ".slds-chat", - "restrict" : "section[role=\"log\"]", - "support" : "dev-ready", - "variant" : "true" + "selector" : ".slds-setup-assistant", + "restrict" : "ol", + "variant" : "true", + "support" : "dev-ready" }, "id" : "base", "docPath" : null, "selectors" : null, "restrictees" : [ { - "description" : "The chat payload should be displayed in the form of a list. Each item in the list has a number of vertical and horizontal spacing rules based on its type", + "description" : "", "annotations" : { - "summary" : "Handles the display of chat items within a list", - "selector" : ".slds-chat-list", - "restrict" : ".slds-chat ul" + "summary" : "Creates a Setup Assistant list item", + "selector" : ".slds-setup-assistant__item", + "restrict" : ".slds-setup-assistant li" }, - "id" : ".slds-chat-list", + "id" : ".slds-setup-assistant__item", + "docPath" : null, + "selectors" : null, + "restrictees" : [ ], + "tokens" : { } + }, { + "description" : "", + "annotations" : { + "summary" : "Creates a Setup Assistant step", + "selector" : ".slds-setup-assistant__step", + "restrict" : ".slds-setup-assistant article" + }, + "id" : ".slds-setup-assistant__step", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Handles spacing and direction of items in the list", - "selector" : ".slds-chat-listitem", - "restrict" : ".slds-chat-list li" + "summary" : "Setup Assistant step's summary portion", + "selector" : ".slds-setup-assistant__step-summary", + "restrict" : ".slds-setup-assistant__step div, .slds-setup-assistant__step .slds-summary_detail__title div" }, - "id" : ".slds-chat-listitem", + "id" : ".slds-setup-assistant__step-summary", "docPath" : null, "selectors" : null, "restrictees" : [ { "description" : "", "annotations" : { - "summary" : "Modifier used to style outbound message list items", - "selector" : ".slds-chat-listitem_outbound", - "restrict" : ".slds-chat-listitem", - "modifier" : "true" - }, - "id" : ".slds-chat-listitem_outbound", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "inbound-message", - "summary" : "Modifier used to style inbound message list items", - "selector" : ".slds-chat-listitem_inbound", - "restrict" : ".slds-chat-listitem", - "modifier" : "true", - "group" : "dialog" - }, - "id" : "inbound-message", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Modifier used for spacing bookend items", - "selector" : ".slds-chat-listitem_bookend", - "restrict" : ".slds-chat-listitem" + "summary" : "Add a right margin to Setup Assistant step's summary content", + "selector" : ".slds-setup-assistant__step-summary-content", + "restrict" : ".slds-setup-assistant__step-summary div" }, - "id" : ".slds-chat-listitem_bookend", + "id" : ".slds-setup-assistant__step-summary-content", "docPath" : null, "selectors" : null, "restrictees" : [ ], @@ -4385,4484 +4224,430 @@ }, { "description" : "", "annotations" : { - "summary" : "Modifier used for spacing event items", - "selector" : ".slds-chat-listitem_event", - "restrict" : ".slds-chat-listitem" + "summary" : "Add bottom padding to Setup Assistant step's summary title", + "selector" : ".slds-setup-assistant__step-summary-title", + "restrict" : ".slds-setup-assistant__step-summary h3" }, - "id" : ".slds-chat-listitem_event", + "id" : ".slds-setup-assistant__step-summary-title", "docPath" : null, "selectors" : null, "restrictees" : [ ], "tokens" : { } - }, { - "description" : "Chat logs are mainly made up of chat messages between an agent and a customer", - "annotations" : { - "summary" : "styles the outter part of a chat message", - "selector" : ".slds-chat-message", - "restrict" : ".slds-chat-listitem div" - }, - "id" : ".slds-chat-message", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Used for when customer avatars are used in consequtive inbound messages to align the message body with the previous message", - "selector" : ".slds-chat-message_faux-avatar", - "restrict" : ".slds-chat-message" - }, - "id" : ".slds-chat-message_faux-avatar", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Used to style avatars in chat logs", - "selector" : ".slds-chat-avatar", - "restrict" : ".slds-chat-message .slds-avatar" - }, - "id" : ".slds-chat-avatar", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Used to style the avatar intials for chat", - "selector" : ".slds-chat-avatar__intials", - "restrict" : ".slds-chat-avatar .slds-avatar__initials", - "deprecated" : "true" - }, - "id" : ".slds-chat-avatar__intials", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Used to contain and align chat messages with their avatars", - "selector" : ".slds-chat-message__body", - "restrict" : ".slds-chat-message div" - }, - "id" : ".slds-chat-message__body", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "true", - "selector" : ".slds-chat-message__image_loading", - "restrict" : ".slds-chat-message__body" - }, - "id" : ".slds-chat-message__image_loading", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Used to style the chat text from agent or customer", - "selector" : ".slds-chat-message__text", - "restrict" : ".slds-chat-message__body div" - }, - "id" : ".slds-chat-message__text", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Used to style icons with a chat log", - "selector" : ".slds-chat-icon", - "restrict" : ".slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container" - }, - "id" : ".slds-chat-icon", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Used for any specific inbound text styling", - "selector" : ".slds-chat-message__text_inbound", - "restrict" : ".slds-chat-message__text" - }, - "id" : ".slds-chat-message__text_inbound", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Used for any specific outbound text styling", - "selector" : ".slds-chat-message__text_outbound", - "restrict" : ".slds-chat-message__text" - }, - "id" : ".slds-chat-message__text_outbound", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Used for any specific outbound (from another agent) text styling", - "selector" : ".slds-chat-message__text_outbound-agent", - "restrict" : ".slds-chat-message__text" - }, - "id" : ".slds-chat-message__text_outbound-agent", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "unsupported", - "summary" : "Used for an inbound message that is not a supported message type", - "selector" : ".slds-chat-message__text_unsupported-type", - "restrict" : ".slds-chat-message__text", - "modifier" : "true", - "group" : "feedback" - }, - "id" : "unsupported", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "delivery-failure", - "summary" : "Used for an inbound message that fails to deliver", - "selector" : ".slds-chat-message__text_delivery-failure", - "restrict" : ".slds-chat-message__text", - "modifier" : "true", - "group" : "feedback" - }, - "id" : "delivery-failure", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Element that contains feedback for why inbound message failed", - "selector" : ".slds-chat-message__text_delivery-failure-reason", - "restrict" : ".slds-chat-message__text_delivery-failure [role=\"alert\"]" - }, - "id" : ".slds-chat-message__text_delivery-failure-reason", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Used when sneak peek is enabled for customer messages", - "selector" : ".slds-chat-message__text_sneak-peek", - "restrict" : ".slds-chat-message__text", - "modifier" : "true" - }, - "id" : ".slds-chat-message__text_sneak-peek", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "true", - "selector" : ".slds-chat-message__file", - "restrict" : ".slds-chat-message__body div" - }, - "id" : ".slds-chat-message__file", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Used for any specific inbound file styling", - "selector" : ".slds-chat-message__file_inbound", - "restrict" : ".slds-chat-message__file" - }, - "id" : ".slds-chat-message__file_inbound", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Used to style chat message meta data", - "selector" : ".slds-chat-message__meta", - "restrict" : ".slds-chat-message div" - }, - "id" : ".slds-chat-message__meta", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Used to style chat message resend action", - "selector" : ".slds-chat-message__action", - "restrict" : ".slds-chat-message .slds-button" - }, - "id" : ".slds-chat-message__action", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Used to style icons with a chat log", - "selector" : ".slds-chat-icon", - "restrict" : ".slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container" - }, - "id" : ".slds-chat-icon", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "During any chat, certain events can occur which need to be displayed to the user", - "selector" : ".slds-chat-event", - "restrict" : ".slds-chat-listitem div" - }, - "id" : ".slds-chat-event", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Used to style the horizontal rules on an event", - "selector" : ".slds-chat-event__rule", - "restrict" : ".slds-chat-event div", - "deprecated" : "true" - }, - "id" : ".slds-chat-event__rule", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Used for styling the event body text", - "selector" : ".slds-chat-event__body", - "restrict" : ".slds-chat-event div" - }, - "id" : ".slds-chat-event__body", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Used to style icons with a chat log", - "selector" : ".slds-chat-icon", - "restrict" : ".slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container" - }, - "id" : ".slds-chat-icon", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "summary" : "Used to style any messages from an agent in the event", - "selector" : ".slds-chat-event__agent-message", - "restrict" : ".slds-chat-event div" - }, - "id" : ".slds-chat-event__agent-message", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "error", - "summary" : "Modifier to indicate the event was an error", - "selector" : ".slds-has-error", - "restrict" : ".slds-chat-event[role=\"alert\"]", - "modifier" : "true", - "group" : "feedback" - }, - "id" : "error", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "Chat sessions are started and stopped with bookends to the conversation", - "annotations" : { - "summary" : "Used to style a chat bookend", - "selector" : ".slds-chat-bookend", - "restrict" : ".slds-chat-listitem div" - }, - "id" : ".slds-chat-bookend", - "docPath" : null, - "selectors" : null, - "restrictees" : [ { - "description" : "", - "annotations" : { - "summary" : "Used to style icons with a chat log", - "selector" : ".slds-chat-icon", - "restrict" : ".slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container" - }, - "id" : ".slds-chat-icon", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - }, { - "description" : "", - "annotations" : { - "name" : "stop", - "summary" : "Modifier for bookends which stop a chat session", - "selector" : ".slds-chat-bookend_stop", - "restrict" : ".slds-chat-bookend", - "modifier" : "true", - "group" : "dialog" - }, - "id" : "stop", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { } - }, { - "description" : "Past chat logs are displayed differently for ease of scanning", - "annotations" : { - "summary" : "Apply when displaying chat logs that appeared in the past", - "name" : "past", - "selector" : ".slds-chat_past", - "restrict" : ".slds-chat", - "support" : "dev-ready", - "variant" : "true" - }, - "id" : "past", - "docPath" : null, - "selectors" : null, - "restrictees" : [ ], - "tokens" : { } - } ], - "tokens" : { } - } ], - "tokens" : { - "borderRadiusLarge" : { - "auraTokenName" : "borderRadiusLarge", - "cssProperties" : [ "border-radius" ], - "cssSelectors" : [ ".slds-chat-message__file_inbound", ".slds-chat-message__image_inbound", ".slds-chat-message__text_inbound", ".slds-chat-message__text_inbound, .slds-chat-message__file_inbound, .slds-chat-message__image_inbound, .slds-chat-message__text_outbound, .slds-chat-message__file_outbound, .slds-chat-message__image_outbound, .slds-chat-message__text_outbound-agent, .slds-chat-message__text_unsupported-type, .slds-chat-message__text_delivery-failure", ".slds-chat-message__text_unsupported-type" ], - "sassTokenName" : "$border-radius-large", - "value" : "0.5rem", - "yamlTokenName" : "BORDER_RADIUS_LARGE", - "scope" : null - }, - "borderWidthThin" : { - "auraTokenName" : "borderWidthThin", - "cssProperties" : [ "border", "border-bottom-width", "border-top", "border-width" ], - "cssSelectors" : [ ".slds-chat-bookend", ".slds-chat-bookend_stop", ".slds-chat-event__rule", ".slds-chat-message__file_inbound, .slds-chat-message__image_inbound, .slds-chat-message__file_outbound, .slds-chat-message__image_outbound", ".slds-chat-message__text_delivery-failure", ".slds-chat-message__text_delivery-failure .slds-chat-message__text_delivery-failure-reason", ".slds-chat-message__text_unsupported-type" ], - "sassTokenName" : "$border-width-thin", - "value" : "1px", - "yamlTokenName" : "BORDER_WIDTH_THIN", - "scope" : null - }, - "chatMessageColorBackgroundInbound" : { - "auraTokenName" : "chatMessageColorBackgroundInbound", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-chat-avatar__intials", ".slds-chat-message__image_inbound", ".slds-chat-message__text_inbound" ], - "sassTokenName" : "$chat-message-color-background-inbound", - "value" : "#F2F2F3", - "yamlTokenName" : "CHAT_MESSAGE_COLOR_BACKGROUND_INBOUND", - "scope" : null - }, - "chatMessageColorBackgroundOutbound" : { - "auraTokenName" : "chatMessageColorBackgroundOutbound", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-chat-message__text_outbound" ], - "sassTokenName" : "$chat-message-color-background-outbound", - "value" : "#005FB2", - "yamlTokenName" : "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND", - "scope" : null - }, - "chatMessageColorBackgroundOutboundAgent" : { - "auraTokenName" : "chatMessageColorBackgroundOutboundAgent", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-chat-message__text_outbound-agent" ], - "sassTokenName" : "$chat-message-color-background-outbound-agent", - "value" : "#6B6D70", - "yamlTokenName" : "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND_AGENT", - "scope" : null - }, - "chatMessageColorBackgroundStatus" : { - "auraTokenName" : "chatMessageColorBackgroundStatus", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-chat-message__text_delivery-failure", ".slds-chat-message__text_unsupported-type" ], - "sassTokenName" : "$chat-message-color-background-status", - "value" : "#FFFFFF", - "yamlTokenName" : "CHAT_MESSAGE_COLOR_BACKGROUND_STATUS", - "scope" : null - }, - "colorBackgroundAlt" : { - "auraTokenName" : "colorBackgroundAlt", - "cssProperties" : [ "background-color" ], - "cssSelectors" : [ ".slds-chat-message__file_inbound" ], - "sassTokenName" : "$color-background-alt", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_BACKGROUND_ALT", - "scope" : null - }, - "colorBorder" : { - "auraTokenName" : "colorBorder", - "cssProperties" : [ "border", "border-top" ], - "cssSelectors" : [ ".slds-chat-bookend", ".slds-chat-event__rule", ".slds-chat-message__file_inbound, .slds-chat-message__image_inbound, .slds-chat-message__file_outbound, .slds-chat-message__image_outbound" ], - "sassTokenName" : "$color-border", - "value" : "#dddbda", - "yamlTokenName" : "COLOR_BORDER", - "scope" : null - }, - "colorBorderDestructive" : { - "auraTokenName" : "colorBorderDestructive", - "cssProperties" : [ "border", "border-top" ], - "cssSelectors" : [ ".slds-chat-message__text_delivery-failure", ".slds-chat-message__text_delivery-failure .slds-chat-message__text_delivery-failure-reason" ], - "sassTokenName" : "$color-border-destructive", - "value" : "#C23934", - "yamlTokenName" : "COLOR_BORDER_DESTRUCTIVE", - "scope" : null - }, - "colorBorderWarning" : { - "auraTokenName" : "colorBorderWarning", - "cssProperties" : [ "border" ], - "cssSelectors" : [ ".slds-chat-message__text_unsupported-type" ], - "sassTokenName" : "$color-border-warning", - "value" : "#FFB75D", - "yamlTokenName" : "COLOR_BORDER_WARNING", - "scope" : null - }, - "colorBrandDarker" : { - "auraTokenName" : "colorBrandDarker", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-chat-message__text a" ], - "sassTokenName" : "$color-brand-darker", - "value" : "#005FB2", - "yamlTokenName" : "COLOR_BRAND_DARKER", - "scope" : null - }, - "colorTextDefault" : { - "auraTokenName" : "colorTextDefault", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-chat-message__file_inbound, .slds-chat-message__image_inbound, .slds-chat-message__file_outbound, .slds-chat-message__image_outbound", ".slds-chat-message__text_delivery-failure", ".slds-chat-message__text_inbound", ".slds-chat-message__text_unsupported-type", ".slds-chat_past .slds-chat-message__meta b" ], - "sassTokenName" : "$color-text-default", - "value" : "#080707", - "yamlTokenName" : "COLOR_TEXT_DEFAULT", - "scope" : null - }, - "colorTextError" : { - "auraTokenName" : "colorTextError", - "cssProperties" : [ "color", "fill" ], - "cssSelectors" : [ ".slds-chat-event.slds-has-error", ".slds-chat-event.slds-has-error svg", ".slds-chat-icon.slds-icon-utility-error", ".slds-chat-message__text_delivery-failure", ".slds-chat-message__text_delivery-failure .slds-chat-message__text_delivery-failure-reason", ".slds-icon" ], - "sassTokenName" : "$color-text-error", - "value" : "#C23934", - "yamlTokenName" : "COLOR_TEXT_ERROR", - "scope" : null - }, - "colorTextInverse" : { - "auraTokenName" : "colorTextInverse", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-chat-message__text_inbound, .slds-chat-message__file_inbound, .slds-chat-message__image_inbound, .slds-chat-message__text_outbound, .slds-chat-message__file_outbound, .slds-chat-message__image_outbound, .slds-chat-message__text_outbound-agent, .slds-chat-message__text_unsupported-type, .slds-chat-message__text_delivery-failure", ".slds-chat-message__text_outbound a, .slds-chat-message__text_outbound-agent a" ], - "sassTokenName" : "$color-text-inverse", - "value" : "#FFFFFF", - "yamlTokenName" : "COLOR_TEXT_INVERSE", - "scope" : null - }, - "colorTextLink" : { - "auraTokenName" : "colorTextLink", - "cssProperties" : [ "fill" ], - "cssSelectors" : [ ".slds-chat-message__action .slds-chat-icon.slds-icon-utility-redo .slds-icon" ], - "sassTokenName" : "$color-text-link", - "value" : "#006DCC", - "yamlTokenName" : "COLOR_TEXT_LINK", - "scope" : null - }, - "colorTextWarning" : { - "auraTokenName" : "colorTextWarning", - "cssProperties" : [ "fill" ], - "cssSelectors" : [ ".slds-chat-icon.slds-icon-utility-warning", ".slds-chat-message__text_unsupported-type", ".slds-icon" ], - "sassTokenName" : "$color-text-warning", - "value" : "#FFB75D", - "yamlTokenName" : "COLOR_TEXT_WARNING", - "scope" : null - }, - "colorTextWeak" : { - "auraTokenName" : "colorTextWeak", - "cssProperties" : [ "color" ], - "cssSelectors" : [ ".slds-chat-avatar__intials", ".slds-chat-avatar__intials.slds-chat-avatar__intials:hover", ".slds-chat-bookend", ".slds-chat-event", ".slds-chat-message__meta" ], - "sassTokenName" : "$color-text-weak", - "value" : "#3e3e3c", - "yamlTokenName" : "COLOR_TEXT_WEAK", - "scope" : null - }, - "fontSize1" : { - "auraTokenName" : "fontSize1", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-chat-message__meta" ], - "sassTokenName" : "$font-size-1", - "value" : "0.625rem", - "yamlTokenName" : "FONT_SIZE_1", - "scope" : null - }, - "fontSize2" : { - "auraTokenName" : "fontSize2", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-chat-event__agent-message", ".slds-chat-message__action" ], - "sassTokenName" : "$font-size-2", - "value" : "0.75rem", - "yamlTokenName" : "FONT_SIZE_2", - "scope" : null - }, - "fontSize3" : { - "auraTokenName" : "fontSize3", - "cssProperties" : [ "font-size" ], - "cssSelectors" : [ ".slds-chat-bookend", ".slds-chat-event", ".slds-chat-message__text" ], - "sassTokenName" : "$font-size-3", - "value" : "0.8125rem", - "yamlTokenName" : "FONT_SIZE_3", - "scope" : null - }, - "lineHeightHeading" : { - "auraTokenName" : "lineHeightHeading", - "cssProperties" : [ "line-height" ], - "cssSelectors" : [ ".slds-chat-message__action" ], - "sassTokenName" : "$line-height-heading", - "value" : "1.25", - "yamlTokenName" : "LINE_HEIGHT_HEADING", - "scope" : null - }, - "sizeSmall" : { - "auraTokenName" : "sizeSmall", - "cssProperties" : [ "width" ], - "cssSelectors" : [ ".slds-chat-message__file", ".slds-chat-message__image_loading" ], - "sassTokenName" : "$size-small", - "value" : "15rem", - "yamlTokenName" : "SIZE_SMALL", - "scope" : null - }, - "spacingLarge" : { - "auraTokenName" : "spacingLarge", - "cssProperties" : [ "margin" ], - "cssSelectors" : [ ".slds-chat-listitem_event" ], - "sassTokenName" : "$spacing-large", - "value" : "1.5rem", - "yamlTokenName" : "SPACING_LARGE", - "scope" : null - }, - "spacingMedium" : { - "auraTokenName" : "spacingMedium", - "cssProperties" : [ "margin" ], - "cssSelectors" : [ ".slds-chat-listitem_bookend", ".slds-chat_past .slds-chat-listitem_event" ], - "sassTokenName" : "$spacing-medium", - "value" : "1rem", - "yamlTokenName" : "SPACING_MEDIUM", - "scope" : null - }, - "spacingSmall" : { - "auraTokenName" : "spacingSmall", - "cssProperties" : [ "margin-bottom", "margin-left", "margin-right", "margin-top", "padding" ], - "cssSelectors" : [ ".slds-chat", ".slds-chat-bookend", ".slds-chat-list", ".slds-chat-listitem", ".slds-chat-listitem_bookend" ], - "sassTokenName" : "$spacing-small", - "value" : "0.75rem", - "yamlTokenName" : "SPACING_SMALL", - "scope" : null - }, - "spacingXLarge" : { - "auraTokenName" : "spacingXLarge", - "cssProperties" : [ "padding-left" ], - "cssSelectors" : [ ".slds-chat-message_faux-avatar" ], - "sassTokenName" : "$spacing-x-large", - "value" : "2rem", - "yamlTokenName" : "SPACING_X_LARGE", - "scope" : null - }, - "spacingXSmall" : { - "auraTokenName" : "spacingXSmall", - "cssProperties" : [ "margin", "margin-left", "margin-right", "margin-top", "padding", "padding-left" ], - "cssSelectors" : [ ".slds-chat-avatar", ".slds-chat-bookend", ".slds-chat-event__agent-message", ".slds-chat-event__body", ".slds-chat-icon", ".slds-chat-message__action", ".slds-chat-message__meta", ".slds-chat-message__text_delivery-failure .slds-chat-message__text_delivery-failure-reason", ".slds-chat-message__text_inbound, .slds-chat-message__text_outbound, .slds-chat-message__text_outbound-agent, .slds-chat-message__text_unsupported-type, .slds-chat-message__text_delivery-failure", ".slds-chat-message__text_sneak-peak .slds-icon-typing, .slds-chat-message__text_sneak-peek .slds-icon-typing", ".slds-chat-message_faux-avatar" ], - "sassTokenName" : "$spacing-x-small", - "value" : "0.5rem", - "yamlTokenName" : "SPACING_X_SMALL", - "scope" : null - }, - "spacingXxLarge" : { - "auraTokenName" : "spacingXxLarge", - "cssProperties" : [ "margin-top" ], - "cssSelectors" : [ ".slds-chat-listitem_bookend + .slds-chat-listitem_bookend" ], - "sassTokenName" : "$spacing-xx-large", - "value" : "3rem", - "yamlTokenName" : "SPACING_XX_LARGE", - "scope" : null - }, - "spacingXxSmall" : { - "auraTokenName" : "spacingXxSmall", - "cssProperties" : [ "margin", "margin-top" ], - "cssSelectors" : [ ".slds-chat-listitem_inbound + .slds-chat-listitem_inbound, .slds-chat-listitem_outbound + .slds-chat-listitem_outbound", ".slds-chat_past .slds-chat-message__meta" ], - "sassTokenName" : "$spacing-xx-small", - "value" : "0.25rem", - "yamlTokenName" : "SPACING_XX_SMALL", - "scope" : null - }, - "spacingXxxSmall" : { - "auraTokenName" : "spacingXxxSmall", - "cssProperties" : [ "margin" ], - "cssSelectors" : [ ".slds-chat-message__meta" ], - "sassTokenName" : "$spacing-xxx-small", - "value" : "0.125rem", - "yamlTokenName" : "SPACING_XXX_SMALL", - "scope" : null - } - } -}, { - "description" : "The ability to style checkboxes with CSS varies across browsers.\nTo ensure that checkboxes look the same everywhere, we use a custom DOM.\nPay close attention to the markup, because all elements must exist for the\nstyles to work.\n\n#### Accessibility\n\nGroups of checkboxes should be marked up using the fieldset and legend\nelement. This helps someone using assistive technology to understand the\nquestion they're answering with the group of checkboxes. The fieldset is\nplaced around the whole group and the legend contains the question.\n\nCustom checkboxes are created by applying the `.slds-checkbox` class to\na `