@salesforce-ux/design-system 2.24.0 → 2.24.1

package/design-tokens/dist/bg-standard.ios.json

@@ -357,7 +357,7 @@
         "background",
         "background-color"
       ],
-      "value": "rgb(27, 150, 255)",
+      "value": "rgb(1, 68, 134)",
       "name": "yourAccount"
     },
     {

package/design-tokens/dist/bg-standard.json

@@ -34,7 +34,7 @@
   "PICKLIST_CHOICE": "rgb(16, 124, 173)",
   "CHOICE": "rgb(16, 124, 173)",
   "FUNDING_REQUIREMENT": "rgb(57, 101, 71)",
-  "YOUR_ACCOUNT": "rgb(27, 150, 255)",
+  "YOUR_ACCOUNT": "rgb(1, 68, 134)",
   "APP": "rgb(255, 93, 45)",
   "DEFAULT": "rgb(147, 147, 147)",
   "CASE_MILESTONE": "rgb(255, 93, 45)",

package/design-tokens/dist/bg-standard.less

@@ -34,7 +34,7 @@
 @picklist-choice: rgb(16, 124, 173);
 @choice: rgb(16, 124, 173);
 @funding-requirement: rgb(57, 101, 71);
-@your-account: rgb(27, 150, 255);
+@your-account: rgb(1, 68, 134);
 @app: rgb(255, 93, 45);
 @default: rgb(147, 147, 147);
 @case-milestone: rgb(255, 93, 45);

package/design-tokens/dist/bg-standard.map.scss

@@ -35,7 +35,7 @@ $bg-standard-map: (
   'picklist-choice': (rgb(16, 124, 173)),
   'choice': (rgb(16, 124, 173)),
   'funding-requirement': (rgb(57, 101, 71)),
-  'your-account': (rgb(27, 150, 255)),
+  'your-account': (rgb(1, 68, 134)),
   'app': (rgb(255, 93, 45)),
   'default': (rgb(147, 147, 147)),
   'case-milestone': (rgb(255, 93, 45)),

package/design-tokens/dist/bg-standard.raw.json

@@ -393,8 +393,8 @@
         "background",
         "background-color"
       ],
-      "value": "#1B96FF",
-      "originalValue": "#1B96FF",
+      "value": "#014486",
+      "originalValue": "#014486",
       "name": "YOUR_ACCOUNT"
     },
     "APP": {

package/design-tokens/dist/bg-standard.styl

@@ -34,7 +34,7 @@ $slack-conversations = rgb(72, 26, 84)
 $picklist-choice = rgb(16, 124, 173)
 $choice = rgb(16, 124, 173)
 $funding-requirement = rgb(57, 101, 71)
-$your-account = rgb(27, 150, 255)
+$your-account = rgb(1, 68, 134)
 $app = rgb(255, 93, 45)
 $default = rgb(147, 147, 147)
 $case-milestone = rgb(255, 93, 45)

package/design-tokens/dist/shadow.common.js

@@ -1,8 +1,10 @@
 module.exports = {
-  // Shadow depth 5
-  shadow5: "0 0 0 2px #FFFFFF, 0 0 0 4px #0B5CAB",
-  // Shadow depth 6
-  shadow6: "0 0 0 2px #FFFFFF inset, 0 0 0 4px #0B5CAB inset",
-  // Shadow depth 7
-  shadow7: "0 0 0 2px #0B5CAB inset, 0 0 0 4px #FFFFFF inset",
+  // Shadow depth 1
+  shadow1: "0 0 2px 0 #18181814, 0 2px 4px 1px #18181828",
+  // Shadow depth 2
+  shadow2: "0 2px 8px -2px #18181814, 0 8px 12px -2px #18181828",
+  // Shadow depth 3
+  shadow3: "0 12px 24px -4px #18181814, 0 16px 32px -4px #18181828",
+  // Shadow depth 4
+  shadow4: "0 24px 48px -4px #18181833",
 };

package/design-tokens/dist/shadow.custom-props.scss

@@ -1,9 +1,11 @@
 :root {
-    /* Shadow depth 5 */
-    --slds-g-shadow-5: 0 0 0 2px #FFFFFF, 0 0 0 4px #0B5CAB;
-    /* Shadow depth 6 */
-    --slds-g-shadow-6: 0 0 0 2px #FFFFFF inset, 0 0 0 4px #0B5CAB inset;
-    /* Shadow depth 7 */
-    --slds-g-shadow-7: 0 0 0 2px #0B5CAB inset, 0 0 0 4px #FFFFFF inset;
+    /* Shadow depth 1 */
+    --slds-g-shadow-1: 0 0 2px 0 #18181814, 0 2px 4px 1px #18181828;
+    /* Shadow depth 2 */
+    --slds-g-shadow-2: 0 2px 8px -2px #18181814, 0 8px 12px -2px #18181828;
+    /* Shadow depth 3 */
+    --slds-g-shadow-3: 0 12px 24px -4px #18181814, 0 16px 32px -4px #18181828;
+    /* Shadow depth 4 */
+    --slds-g-shadow-4: 0 24px 48px -4px #18181833;
   }
   

package/design-tokens/dist/shadow.json

@@ -1,5 +1,6 @@
 {
-  "shadow-5": "0 0 0 2px #FFFFFF, 0 0 0 4px #0B5CAB",
-  "shadow-6": "0 0 0 2px #FFFFFF inset, 0 0 0 4px #0B5CAB inset",
-  "shadow-7": "0 0 0 2px #0B5CAB inset, 0 0 0 4px #FFFFFF inset"
+  "shadow-1": "0 0 2px 0 #18181814, 0 2px 4px 1px #18181828",
+  "shadow-2": "0 2px 8px -2px #18181814, 0 8px 12px -2px #18181828",
+  "shadow-3": "0 12px 24px -4px #18181814, 0 16px 32px -4px #18181828",
+  "shadow-4": "0 24px 48px -4px #18181833"
 }

package/design-tokens/dist/shadow.module.js

@@ -1,6 +1,8 @@
-// Shadow depth 5
-export const shadow5 = "0 0 0 2px #FFFFFF, 0 0 0 4px #0B5CAB";
-// Shadow depth 6
-export const shadow6 = "0 0 0 2px #FFFFFF inset, 0 0 0 4px #0B5CAB inset";
-// Shadow depth 7
-export const shadow7 = "0 0 0 2px #0B5CAB inset, 0 0 0 4px #FFFFFF inset";
+// Shadow depth 1
+export const shadow1 = "0 0 2px 0 #18181814, 0 2px 4px 1px #18181828";
+// Shadow depth 2
+export const shadow2 = "0 2px 8px -2px #18181814, 0 8px 12px -2px #18181828";
+// Shadow depth 3
+export const shadow3 = "0 12px 24px -4px #18181814, 0 16px 32px -4px #18181828";
+// Shadow depth 4
+export const shadow4 = "0 24px 48px -4px #18181833";

package/design-tokens/dist/shadow.raw.json

@@ -1,18 +1,26 @@
 {
-  "aliases": {
-    "PALETTE_NEUTRAL_100": {
-      "value": "#FFFFFF"
-    },
-    "PALETTE_BLUE_40": {
-      "value": "#0B5CAB"
-    }
-  },
+  "aliases": {},
   "props": {
-    "shadow-5": {
-      "originalValue": "0 0 0 2px {!PALETTE_NEUTRAL_100}, 0 0 0 4px {!PALETTE_BLUE_40}",
+    "shadow-1": {
+      "originalValue": "0 0 2px 0 #18181814, 0 2px 4px 1px #18181828",
+      "syntax": "<length>",
+      "name": "shadow-1",
+      "value": "0 0 2px 0 #18181814, 0 2px 4px 1px #18181828",
+      "scope": "global",
+      "cssProperties": [
+        "box-shadow"
+      ],
+      "inherits": false,
+      "type": "raw",
+      "namespace": "sds",
+      "category": "shadow",
+      "comment": "Shadow depth 1"
+    },
+    "shadow-2": {
+      "originalValue": "0 2px 8px -2px #18181814, 0 8px 12px -2px #18181828",
       "syntax": "<length>",
-      "name": "shadow-5",
-      "value": "0 0 0 2px #FFFFFF, 0 0 0 4px #0B5CAB",
+      "name": "shadow-2",
+      "value": "0 2px 8px -2px #18181814, 0 8px 12px -2px #18181828",
       "scope": "global",
       "cssProperties": [
         "box-shadow"
@@ -21,13 +29,13 @@
       "type": "raw",
       "namespace": "sds",
       "category": "shadow",
-      "comment": "Shadow depth 5"
+      "comment": "Shadow depth 2"
     },
-    "shadow-6": {
-      "originalValue": "0 0 0 2px {!PALETTE_NEUTRAL_100} inset, 0 0 0 4px {!PALETTE_BLUE_40} inset",
+    "shadow-3": {
+      "originalValue": "0 12px 24px -4px #18181814, 0 16px 32px -4px #18181828",
       "syntax": "<length>",
-      "name": "shadow-6",
-      "value": "0 0 0 2px #FFFFFF inset, 0 0 0 4px #0B5CAB inset",
+      "name": "shadow-3",
+      "value": "0 12px 24px -4px #18181814, 0 16px 32px -4px #18181828",
       "scope": "global",
       "cssProperties": [
         "box-shadow"
@@ -36,13 +44,13 @@
       "type": "raw",
       "namespace": "sds",
       "category": "shadow",
-      "comment": "Shadow depth 6"
+      "comment": "Shadow depth 3"
     },
-    "shadow-7": {
-      "originalValue": "0 0 0 2px {!PALETTE_BLUE_40} inset, 0 0 0 4px {!PALETTE_NEUTRAL_100} inset",
+    "shadow-4": {
+      "originalValue": "0 24px 48px -4px #18181833",
       "syntax": "<length>",
-      "name": "shadow-7",
-      "value": "0 0 0 2px #0B5CAB inset, 0 0 0 4px #FFFFFF inset",
+      "name": "shadow-4",
+      "value": "0 24px 48px -4px #18181833",
       "scope": "global",
       "cssProperties": [
         "box-shadow"
@@ -51,7 +59,7 @@
       "type": "raw",
       "namespace": "sds",
       "category": "shadow",
-      "comment": "Shadow depth 7"
+      "comment": "Shadow depth 4"
     }
   }
 }

package/design-tokens/dist/slds-hooks.common.js

@@ -461,10 +461,4 @@ module.exports = {
   colorNeutral100Opacity50: "rgba(255, 255, 255, 0.5)",
   // Neutral Base 100 with 75% opacity.
   colorNeutral100Opacity75: "rgba(255, 255, 255, 0.75)",
-  // Shadow depth 5
-  shadow5: "0 0 0 2px #FFFFFF, 0 0 0 4px #0B5CAB",
-  // Shadow depth 6
-  shadow6: "0 0 0 2px #FFFFFF inset, 0 0 0 4px #0B5CAB inset",
-  // Shadow depth 7
-  shadow7: "0 0 0 2px #0B5CAB inset, 0 0 0 4px #FFFFFF inset",
 };

package/design-tokens/dist/slds-hooks.custom-props.scss

@@ -461,11 +461,5 @@
     --slds-g-color-neutral-100-opacity-50: rgba(255, 255, 255, 0.5);
     /* Neutral Base 100 with 75% opacity. */
     --slds-g-color-neutral-100-opacity-75: rgba(255, 255, 255, 0.75);
-    /* Shadow depth 5 */
-    --slds-g-shadow-5: 0 0 0 2px #FFFFFF, 0 0 0 4px #0B5CAB;
-    /* Shadow depth 6 */
-    --slds-g-shadow-6: 0 0 0 2px #FFFFFF inset, 0 0 0 4px #0B5CAB inset;
-    /* Shadow depth 7 */
-    --slds-g-shadow-7: 0 0 0 2px #0B5CAB inset, 0 0 0 4px #FFFFFF inset;
   }
   

package/design-tokens/dist/slds-hooks.json

@@ -229,8 +229,5 @@
   "color-neutral-100-opacity-10": "rgba(255, 255, 255, 0.1)",
   "color-neutral-100-opacity-25": "rgba(255, 255, 255, 0.25)",
   "color-neutral-100-opacity-50": "rgba(255, 255, 255, 0.5)",
-  "color-neutral-100-opacity-75": "rgba(255, 255, 255, 0.75)",
-  "shadow-5": "0 0 0 2px #FFFFFF, 0 0 0 4px #0B5CAB",
-  "shadow-6": "0 0 0 2px #FFFFFF inset, 0 0 0 4px #0B5CAB inset",
-  "shadow-7": "0 0 0 2px #0B5CAB inset, 0 0 0 4px #FFFFFF inset"
+  "color-neutral-100-opacity-75": "rgba(255, 255, 255, 0.75)"
 }

package/design-tokens/dist/slds-hooks.module.js

@@ -459,10 +459,4 @@ export const colorNeutral100Opacity25 = "rgba(255, 255, 255, 0.25)";
 // Neutral Base 100 with 50% opacity.
 export const colorNeutral100Opacity50 = "rgba(255, 255, 255, 0.5)";
 // Neutral Base 100 with 75% opacity.
-export const colorNeutral100Opacity75 = "rgba(255, 255, 255, 0.75)";
-// Shadow depth 5
-export const shadow5 = "0 0 0 2px #FFFFFF, 0 0 0 4px #0B5CAB";
-// Shadow depth 6
-export const shadow6 = "0 0 0 2px #FFFFFF inset, 0 0 0 4px #0B5CAB inset";
-// Shadow depth 7
-export const shadow7 = "0 0 0 2px #0B5CAB inset, 0 0 0 4px #FFFFFF inset";
+export const colorNeutral100Opacity75 = "rgba(255, 255, 255, 0.75)";

package/design-tokens/dist/slds-hooks.raw.json

@@ -427,7 +427,7 @@
       "value": "#194e31"
     },
     "PALETTE_BLUE_40": {
-      "value": "#0B5CAB"
+      "value": "#0b5cab"
     },
     "PALETTE_BLUE_95": {
       "value": "#eef4ff"
@@ -4834,51 +4834,6 @@
       "category": "transparent",
       "comment": "Neutral Base 100 with 75% opacity.",
       "group": "theme"
-    },
-    "shadow-5": {
-      "originalValue": "0 0 0 2px {!PALETTE_NEUTRAL_100}, 0 0 0 4px {!PALETTE_BLUE_40}",
-      "syntax": "<length>",
-      "name": "shadow-5",
-      "value": "0 0 0 2px #FFFFFF, 0 0 0 4px #0B5CAB",
-      "scope": "global",
-      "cssProperties": [
-        "box-shadow"
-      ],
-      "inherits": false,
-      "type": "raw",
-      "namespace": "sds",
-      "category": "shadow",
-      "comment": "Shadow depth 5"
-    },
-    "shadow-6": {
-      "originalValue": "0 0 0 2px {!PALETTE_NEUTRAL_100} inset, 0 0 0 4px {!PALETTE_BLUE_40} inset",
-      "syntax": "<length>",
-      "name": "shadow-6",
-      "value": "0 0 0 2px #FFFFFF inset, 0 0 0 4px #0B5CAB inset",
-      "scope": "global",
-      "cssProperties": [
-        "box-shadow"
-      ],
-      "inherits": false,
-      "type": "raw",
-      "namespace": "sds",
-      "category": "shadow",
-      "comment": "Shadow depth 6"
-    },
-    "shadow-7": {
-      "originalValue": "0 0 0 2px {!PALETTE_BLUE_40} inset, 0 0 0 4px {!PALETTE_NEUTRAL_100} inset",
-      "syntax": "<length>",
-      "name": "shadow-7",
-      "value": "0 0 0 2px #0B5CAB inset, 0 0 0 4px #FFFFFF inset",
-      "scope": "global",
-      "cssProperties": [
-        "box-shadow"
-      ],
-      "inherits": false,
-      "type": "raw",
-      "namespace": "sds",
-      "category": "shadow",
-      "comment": "Shadow depth 7"
     }
   }
 }

package/metadata/components/buttons/styling-hooks.json

@@ -1 +1 @@
-{"--slds-c-button-stateful-color-background-selected":{"fallbackValue":"transparent","category":"Color","valueType":"Color"},"--slds-c-button-stateful-color-border-selected":{"fallbackValue":"transparent","category":"Color","valueType":"Color"},"--slds-c-button-stateful-color-background-selected-hover":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-stateful-color-border-selected-hover":{"fallbackValue":"1, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-stateful-color-background-selected-active":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-spacing-block-start":{"fallbackValue":"0","category":"Spacing","valueType":"Dimension"},"--slds-c-button-spacing-inline-start":{"fallbackValue":"0","category":"Spacing","valueType":"Dimension"},"--slds-c-button-text-color-hover":{"fallbackValue":"#014486","category":"Color","valueType":"Color"},"--slds-c-button-brand-color-background":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-brand-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-brand-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-brand-color-border":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-brand-text-color":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-brand-color-background-hover":{"fallbackValue":"#014486","category":"Color","valueType":"Color"},"--slds-c-button-brand-color-border-hover":{"fallbackValue":"#014486","category":"Color","valueType":"Color"},"--slds-c-button-brand-text-color-hover":{"fallbackValue":"white","category":"Color","valueType":"Color"},"--slds-c-button-spacing-inline-end":{"fallbackValue":"0","category":"Spacing","valueType":"Dimension"},"--slds-c-button-spacing-block-end":{"fallbackValue":"0","category":"Spacing","valueType":"Dimension"},"--slds-c-button-color-background":{"fallbackValue":"transparent","category":"Color","valueType":"Color"},"--slds-c-button-color-border":{"fallbackValue":"transparent","category":"Color","valueType":"Color"},"--slds-c-button-sizing-border":{"fallbackValue":"1px","category":"Sizing","valueType":"Dimension"},"--slds-c-button-radius-border":{"fallbackValue":"0.25rem","category":"Radius","valueType":"Dimension"},"--slds-c-button-shadow":{"fallbackValue":"","category":"Box Shadow","valueType":"String"},"--slds-c-button-line-height":{"fallbackValue":"1.875rem","category":"Text","valueType":"Number"},"--slds-c-button-text-color":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-color-border-hover":{"fallbackValue":"","category":"Color","valueType":"Color"},"--slds-c-button-color-background-hover":{"fallbackValue":"","category":"Color","valueType":"Color"},"--slds-c-button-shadow-focus":{"fallbackValue":"100, white","category":"Box Shadow","valueType":"String"},"--slds-c-button-text-color-active":{"fallbackValue":"#014486","category":"Color","valueType":"Color"},"--slds-c-button-color-background-active":{"fallbackValue":"","category":"Color","valueType":"Color"},"--slds-c-button-color-border-active":{"fallbackValue":"","category":"Color","valueType":"Color"},"--slds-c-button-destructive-text-color":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-text-color-hover":{"fallbackValue":"30, #ba0517","category":"Color","valueType":"Color"},"--slds-c-button-success-text-color-hover":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-inverse-shadow-focus":{"fallbackValue":"0 0 3px #f3f3f3","category":"Box Shadow","valueType":"String"},"--slds-c-button-neutral-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-neutral-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-neutral-color-background":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-neutral-color-border":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-neutral-color-background-hover":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-neutral-color-border-hover":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-neutral-color-background-active":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-neutral-color-border-active":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-brand-color-background-active":{"fallbackValue":"#014486","category":"Color","valueType":"Color"},"--slds-c-button-brand-text-color-active":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-outline-brand-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-outline-brand-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-outline-brand-color-background":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-outline-brand-color-border":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-outline-brand-color-background-hover":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-outline-brand-color-border-hover":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-outline-brand-color-background-active":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-inverse-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-inverse-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-inverse-color-background":{"fallbackValue":"transparent","category":"Color","valueType":"Color"},"--slds-c-button-inverse-color-border":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-inverse-color-background-hover":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-inverse-color-border-hover":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-inverse-color-background-active":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-inverse-color-border-active":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-inverse-text-color":{"fallbackValue":"100, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-inverse-text-color-hover":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-inverse-text-color-active":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-destructive-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-destructive-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-destructive-color-background":{"fallbackValue":"40, #ba0517","category":"Color","valueType":"Color"},"--slds-c-button-destructive-color-border":{"fallbackValue":"40, #ba0517","category":"Color","valueType":"Color"},"--slds-c-button-destructive-color-background-hover":{"fallbackValue":"30, #8e030f","category":"Color","valueType":"Color"},"--slds-c-button-destructive-color-background-active":{"fallbackValue":"30, #8e030f","category":"Color","valueType":"Color"},"--slds-c-button-destructive-color-border-active":{"fallbackValue":"30, #8e030f","category":"Color","valueType":"Color"},"--slds-c-button-destructive-text-color-active":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-text-destructive-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-text-destructive-color-background":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-color-border":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-text-color":{"fallbackValue":"30, #ea001e","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-color-background-hover":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-color-border-hover":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-color-background-active":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-text-color-active":{"fallbackValue":"30, #ba0517","category":"Color","valueType":"Color"},"--slds-c-button-success-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-success-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-success-color-background":{"fallbackValue":"70, #45c65a","category":"Color","valueType":"Color"},"--slds-c-button-success-color-border":{"fallbackValue":"50, #91db8b","category":"Color","valueType":"Color"},"--slds-c-button-success-text-color":{"fallbackValue":"10, #181818","category":"Color","valueType":"Color"},"--slds-c-button-success-color-background-hover":{"fallbackValue":"50, #2e844a","category":"Color","valueType":"Color"},"--slds-c-button-success-color-border-hover":{"fallbackValue":"50, #2e844a","category":"Color","valueType":"Color"},"--slds-c-button-success-color-background-active":{"fallbackValue":"50, #2e844a","category":"Color","valueType":"Color"},"--slds-c-button-success-color-border-active":{"fallbackValue":"50, #2e844a","category":"Color","valueType":"Color"},"--slds-c-button-success-text-color-active":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-icon-color-foreground":{"fallbackValue":"currentColor","category":"Color","valueType":"Color"}}
+{"--slds-c-button-stateful-color-background-selected":{"fallbackValue":"transparent","category":"Color","valueType":"Color"},"--slds-c-button-stateful-color-border-selected":{"fallbackValue":"transparent","category":"Color","valueType":"Color"},"--slds-c-button-stateful-color-background-selected-hover":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-stateful-color-border-selected-hover":{"fallbackValue":"1, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-stateful-color-background-selected-active":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-spacing-block-start":{"fallbackValue":"0","category":"Spacing","valueType":"Dimension"},"--slds-c-button-spacing-inline-start":{"fallbackValue":"0","category":"Spacing","valueType":"Dimension"},"--slds-c-button-text-color-hover":{"fallbackValue":"#014486","category":"Color","valueType":"Color"},"--slds-c-button-brand-color-background":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-neutral-color-background-hover":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-neutral-color-border-hover":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-neutral-color-background-active":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-neutral-color-border-active":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-outline-brand-color-background-hover":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-outline-brand-color-background-active":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-brand-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-brand-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-brand-color-border":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-brand-text-color":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-brand-color-background-hover":{"fallbackValue":"#014486","category":"Color","valueType":"Color"},"--slds-c-button-brand-color-border-hover":{"fallbackValue":"#014486","category":"Color","valueType":"Color"},"--slds-c-button-brand-text-color-hover":{"fallbackValue":"white","category":"Color","valueType":"Color"},"--slds-c-button-spacing-inline-end":{"fallbackValue":"0","category":"Spacing","valueType":"Dimension"},"--slds-c-button-spacing-block-end":{"fallbackValue":"0","category":"Spacing","valueType":"Dimension"},"--slds-c-button-color-background":{"fallbackValue":"transparent","category":"Color","valueType":"Color"},"--slds-c-button-color-border":{"fallbackValue":"transparent","category":"Color","valueType":"Color"},"--slds-c-button-sizing-border":{"fallbackValue":"1px","category":"Sizing","valueType":"Dimension"},"--slds-c-button-radius-border":{"fallbackValue":"0.25rem","category":"Radius","valueType":"Dimension"},"--slds-c-button-shadow":{"fallbackValue":"","category":"Box Shadow","valueType":"String"},"--slds-c-button-line-height":{"fallbackValue":"1.875rem","category":"Text","valueType":"Number"},"--slds-c-button-text-color":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-color-border-hover":{"fallbackValue":"","category":"Color","valueType":"Color"},"--slds-c-button-color-background-hover":{"fallbackValue":"","category":"Color","valueType":"Color"},"--slds-c-button-shadow-focus":{"fallbackValue":"100, white","category":"Box Shadow","valueType":"String"},"--slds-c-button-text-color-active":{"fallbackValue":"#014486","category":"Color","valueType":"Color"},"--slds-c-button-color-background-active":{"fallbackValue":"","category":"Color","valueType":"Color"},"--slds-c-button-color-border-active":{"fallbackValue":"","category":"Color","valueType":"Color"},"--slds-c-button-destructive-text-color":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-text-color-hover":{"fallbackValue":"30, #ba0517","category":"Color","valueType":"Color"},"--slds-c-button-success-text-color-hover":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-inverse-shadow-focus":{"fallbackValue":"0 0 3px #f3f3f3","category":"Box Shadow","valueType":"String"},"--slds-c-button-neutral-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-neutral-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-neutral-color-background":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-neutral-color-border":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-brand-color-background-active":{"fallbackValue":"#014486","category":"Color","valueType":"Color"},"--slds-c-button-brand-text-color-active":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-outline-brand-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-outline-brand-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-outline-brand-color-background":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-outline-brand-color-border":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-outline-brand-color-border-hover":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-inverse-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-inverse-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-inverse-color-background":{"fallbackValue":"transparent","category":"Color","valueType":"Color"},"--slds-c-button-inverse-color-border":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-inverse-color-background-hover":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-inverse-color-border-hover":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-inverse-color-background-active":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-inverse-color-border-active":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-inverse-text-color":{"fallbackValue":"100, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-inverse-text-color-hover":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-inverse-text-color-active":{"fallbackValue":"#0176d3","category":"Color","valueType":"Color"},"--slds-c-button-destructive-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-destructive-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-destructive-color-background":{"fallbackValue":"40, #ba0517","category":"Color","valueType":"Color"},"--slds-c-button-destructive-color-border":{"fallbackValue":"40, #ba0517","category":"Color","valueType":"Color"},"--slds-c-button-destructive-color-background-hover":{"fallbackValue":"30, #8e030f","category":"Color","valueType":"Color"},"--slds-c-button-destructive-color-background-active":{"fallbackValue":"30, #8e030f","category":"Color","valueType":"Color"},"--slds-c-button-destructive-color-border-active":{"fallbackValue":"30, #8e030f","category":"Color","valueType":"Color"},"--slds-c-button-destructive-text-color-active":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-text-destructive-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-text-destructive-color-background":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-color-border":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-text-color":{"fallbackValue":"30, #ea001e","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-color-background-hover":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-color-border-hover":{"fallbackValue":"4, #c9c9c9","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-color-background-active":{"fallbackValue":"95, #f3f3f3","category":"Color","valueType":"Color"},"--slds-c-button-text-destructive-text-color-active":{"fallbackValue":"30, #ba0517","category":"Color","valueType":"Color"},"--slds-c-button-success-spacing-inline-start":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-success-spacing-inline-end":{"fallbackValue":"1rem","category":"Spacing","valueType":"Dimension"},"--slds-c-button-success-color-background":{"fallbackValue":"70, #45c65a","category":"Color","valueType":"Color"},"--slds-c-button-success-color-border":{"fallbackValue":"50, #91db8b","category":"Color","valueType":"Color"},"--slds-c-button-success-text-color":{"fallbackValue":"10, #181818","category":"Color","valueType":"Color"},"--slds-c-button-success-color-background-hover":{"fallbackValue":"50, #2e844a","category":"Color","valueType":"Color"},"--slds-c-button-success-color-border-hover":{"fallbackValue":"50, #2e844a","category":"Color","valueType":"Color"},"--slds-c-button-success-color-background-active":{"fallbackValue":"50, #2e844a","category":"Color","valueType":"Color"},"--slds-c-button-success-color-border-active":{"fallbackValue":"50, #2e844a","category":"Color","valueType":"Color"},"--slds-c-button-success-text-color-active":{"fallbackValue":"100, white","category":"Color","valueType":"Color"},"--slds-c-icon-color-foreground":{"fallbackValue":"currentColor","category":"Color","valueType":"Color"}}

package/package.json

@@ -59,7 +59,7 @@
       "@salesforce/slds/legacy"
     ]
   },
-  "version": "2.24.0",
+  "version": "2.24.1",
   "jest": {
     "testURL": "http://localhost/",
     "testRegex": "(/__tests__/.*(test|spec))\\.jsx?$",

package/scss/_config.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
@@ -10,7 +10,7 @@
 ///
 /// @type String
 /// @access private
-$app-version: "2.24.0";
+$app-version: "2.24.1";
 
 /// Debug mode (uncomment to activate)
 /// Turn on to output deprecation warnings during development

package/scss/_design-tokens.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/_init.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/_styling-hooks.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
@@ -7,3 +7,10 @@
 // ----------------------------------------------------------------------------
 
 @import '../design-tokens/dist/slds-hooks.custom-props';
+
+:root {
+  --_slds-g-shadow-outset-focus: 0 0 0 2px var(--slds-g-color-neutral-base-100, #FFFFFF), 0 0 0 4px var(--slds-g-color-brand-base-40, #0B5CAB);
+  --_slds-g-shadow-inset-focus: 0 0 0 2px var(--slds-g-color-neutral-base-100) inset, 0 0 0 4px var(--slds-g-color-brand-base-40, #0B5CAB) inset;
+  --_slds-g-shadow-inset-inverse-focus: 0 0 0 2px var(--slds-g-color-brand-base-40, #0B5CAB) inset, 0 0 0 4px var(--slds-g-color-neutral-base-100, #FFFFFF) inset;
+  --_slds-g-shadow-outline-focus: 0 0 0 2px var(--slds-g-color-brand-base-40, #0B5CAB);
+}

package/scss/components/_index.sanitized.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/_index.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/_kinetics.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/_touch.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/accordion/_doc.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/accordion/base/_index.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
@@ -75,8 +75,7 @@
   line-height: var(--slds-c-accordion-heading-line-height, var(--sds-c-accordion-heading-line-height, $line-height-heading));
 
   .slds-button:focus {
-    outline-offset: rem(-4px);
-    box-shadow: none;
+    box-shadow: inset var(--_slds-g-shadow-outline-focus);
   }
 }
 

package/scss/components/accordion/base/_touch.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 .slds-button.slds-accordion__summary-action {
   line-height: $line-height-button;
 }

package/scss/components/activity-timeline/_doc.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/activity-timeline/base/_deprecate.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/activity-timeline/base/_index.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/alert/_doc.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/alert/base/_index.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
@@ -46,7 +46,7 @@ $alert-gradient-size-background: 64px 64px;
     }
 
     &:focus {
-      box-shadow: var(--slds-c-alert-shadow, var(--slds-g-shadow-5, #{$shadow-button-focus}));
+      box-shadow: var(--slds-c-alert-shadow, var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus}));
       border-width: var(--slds-c-alert-sizing-border, $border-width-thin);
       border-style: solid;
       border-color: var(--slds-c-alert-color-border, transparent);
@@ -86,6 +86,10 @@ $alert-gradient-size-background: 64px 64px;
   .slds-button__icon {
     fill: var(--slds-g-color-neutral-base-30, #{$color-gray-10});
   }
+
+  .slds-button:focus {
+    box-shadow: var(--_slds-g-shadow-inset-focus);
+  }
 }
 
 /**

package/scss/components/app-launcher/_doc.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/app-launcher/base/_deprecate.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/app-launcher/base/_index.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
@@ -28,7 +28,7 @@
   }
 
   &:focus {
-    box-shadow: var(--slds-g-shadow-5, #{$shadow-button-focus});
+    box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
   }
 
   /**

package/scss/components/avatar/_doc.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 

package/scss/components/avatar/base/_index.scss

@@ -1,4 +1,4 @@
-// Lightning Design System 2.24.0
+// Lightning Design System 2.24.1
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license