@carbon/themes 11.29.0-rc.0 → 11.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/es/index.js +143 -35
  2. package/lib/index.js +150 -33
  3. package/package.json +2 -2
  4. package/scss/generated/_themes.scss +42 -6
  5. package/scss/generated/_tokens.scss +31 -0
  6. package/src/g10.js +23 -4
  7. package/src/g100.js +22 -4
  8. package/src/g90.js +23 -4
  9. package/src/tokens/v11TokenGroup.js +11 -0
  10. package/src/white.js +23 -4
  11. package/umd/index.js +150 -33
package/es/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { white as white$2, gray80, blue60, gray80Hover, gray10, gray30, gray10Hover, gray20, gray20Hover, whiteHover, gray100, gray50, gray40, gray70, gray60, red60, blue70, blue40, purple60, blue30, green50, yellow30, red50, green40, blue50, orange40, blue20, rgba, blue10, coolGray10, gray90, gray70Hover, gray60Hover, gray50Hover, red30, purple40, red40, purple50, gray90Hover, black, gray30Hover, blue20Hover, blue80, green60, red80, red20, red70, red20Hover, red70Hover, magenta20, magenta70, magenta80, magenta20Hover, magenta70Hover, purple20, purple70, purple80, purple20Hover, purple70Hover, blue70Hover, cyan20, cyan70, cyan80, cyan20Hover, cyan70Hover, teal20, teal70, teal80, teal20Hover, teal70Hover, green20, green70, green80, green20Hover, green70Hover, coolGray20, coolGray70, coolGray80, coolGray20Hover, coolGray70Hover, warmGray20, warmGray70, warmGray80, warmGray20Hover, warmGray70Hover, red10, green10, white0 } from '@carbon/colors';
1
+ import { white as white$2, gray80, blue60, gray80Hover, gray10, gray30, gray10Hover, gray20, gray20Hover, whiteHover, gray100, gray50, gray40, gray70, gray60, red60, blue70, blue40, purple60, blue30, green50, yellow30, red50, green40, blue50, orange40, blue20, rgba, blue10, coolGray10, black, gray90, gray70Hover, gray60Hover, gray50Hover, red30, purple40, red40, purple50, gray90Hover, gray30Hover, blue20Hover, blue80, green60, red80, red20, red70, red20Hover, red70Hover, magenta20, magenta70, magenta80, magenta20Hover, magenta70Hover, purple20, purple70, purple80, purple20Hover, purple70Hover, blue70Hover, cyan20, cyan70, cyan80, cyan20Hover, cyan70Hover, teal20, teal70, teal80, teal20Hover, teal70Hover, green20, green70, green80, green20Hover, green70Hover, coolGray20, coolGray70, coolGray80, coolGray20Hover, coolGray70Hover, warmGray20, warmGray70, warmGray80, warmGray20Hover, warmGray70Hover, red10, green10, white0 } from '@carbon/colors';
2
2
  import Color from 'color';
3
3
  import { caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04, unstable_tokens } from '@carbon/type';
4
4
  export { bodyLong01, bodyLong02, bodyShort01, bodyShort02, caption01, caption02, code01, code02, display01, display02, display03, display04, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, heading01, heading02, helperText01, helperText02, label01, label02, productiveHeading01, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, quotation01, quotation02 } from '@carbon/type';
@@ -690,10 +690,6 @@ var slugGradient$3 = "".concat(gray100, " linear-gradient(135deg, ").concat(gray
690
690
  var slugBackgroundHover$3 = gray60;
691
691
  var slugGradientHover$3 = "".concat(gray100, " linear-gradient(135deg, ").concat(gray20Hover, " 0%, rgba(").concat(white$2, ", 0) 100%)");
692
692
  var slugHollowHover$3 = gray80Hover;
693
- var slugCalloutGradientTop$3 = rgba(gray10, 0.85);
694
- var slugCalloutGradientBottom$3 = rgba(gray20, 0.85);
695
- var slugCalloutAuraStart$3 = rgba(blue10, 0.6);
696
- var slugCalloutAuraEnd$3 = rgba(white$2, 0);
697
693
  var slugCalloutGradientTopHover$3 = rgba(gray20, 0.55);
698
694
  var slugCalloutGradientBottomHover$3 = rgba(gray20Hover, 0.55);
699
695
  var slugCalloutAuraStartHover01$3 = rgba(white$2, 0.5);
@@ -709,6 +705,27 @@ var aiGradientStart01$3 = rgba(coolGray10, 0.5);
709
705
  var aiGradientStart02$3 = rgba(blue10, 0.5);
710
706
  var aiGradientEnd$3 = rgba(white$2, 0);
711
707
 
708
+ // Phase 2 - new
709
+ var slugCalloutShadowInner$3 = rgba(blue50, 0.2);
710
+ var slugCalloutShadowOuter01$3 = rgba(blue70, 0.25);
711
+ var slugCalloutShadowOuter02$3 = rgba(black, 0.1);
712
+ var slugCalloutBorder01$3 = blue40;
713
+ var slugCalloutBorder02$3 = blue20;
714
+
715
+ // Changed
716
+ var slugCalloutAuraStart$3 = rgba(blue50, 0.1);
717
+ var slugCalloutAuraEnd$3 = rgba(white$2, 0);
718
+
719
+ // Not used in phase 2 / possibly remove?
720
+ var slugCalloutGradientTop$3 = rgba(gray10, 0.85);
721
+ var slugCalloutGradientBottom$3 = rgba(gray20, 0.85);
722
+
723
+ // One off tokens for caret
724
+ var slugCalloutCaretCenter$3 = '#A7C7FF';
725
+ var slugCalloutCaretBottom$3 = blue20;
726
+ var slugCalloutCaretBottomBackgroundActions$3 = '#DAE5F8';
727
+ var slugCalloutCaretBottomBackground$3 = '#D5E5FF';
728
+
712
729
  var white$1 = /*#__PURE__*/Object.freeze({
713
730
  __proto__: null,
714
731
  background: background$8,
@@ -816,10 +833,6 @@ var white$1 = /*#__PURE__*/Object.freeze({
816
833
  slugBackgroundHover: slugBackgroundHover$3,
817
834
  slugGradientHover: slugGradientHover$3,
818
835
  slugHollowHover: slugHollowHover$3,
819
- slugCalloutGradientTop: slugCalloutGradientTop$3,
820
- slugCalloutGradientBottom: slugCalloutGradientBottom$3,
821
- slugCalloutAuraStart: slugCalloutAuraStart$3,
822
- slugCalloutAuraEnd: slugCalloutAuraEnd$3,
823
836
  slugCalloutGradientTopHover: slugCalloutGradientTopHover$3,
824
837
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$3,
825
838
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$3,
@@ -833,6 +846,19 @@ var white$1 = /*#__PURE__*/Object.freeze({
833
846
  aiGradientStart01: aiGradientStart01$3,
834
847
  aiGradientStart02: aiGradientStart02$3,
835
848
  aiGradientEnd: aiGradientEnd$3,
849
+ slugCalloutShadowInner: slugCalloutShadowInner$3,
850
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01$3,
851
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02$3,
852
+ slugCalloutBorder01: slugCalloutBorder01$3,
853
+ slugCalloutBorder02: slugCalloutBorder02$3,
854
+ slugCalloutAuraStart: slugCalloutAuraStart$3,
855
+ slugCalloutAuraEnd: slugCalloutAuraEnd$3,
856
+ slugCalloutGradientTop: slugCalloutGradientTop$3,
857
+ slugCalloutGradientBottom: slugCalloutGradientBottom$3,
858
+ slugCalloutCaretCenter: slugCalloutCaretCenter$3,
859
+ slugCalloutCaretBottom: slugCalloutCaretBottom$3,
860
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$3,
861
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$3,
836
862
  caption01: caption01,
837
863
  caption02: caption02,
838
864
  label01: label01,
@@ -1077,10 +1103,6 @@ var slugGradient$2 = "".concat(gray100, " linear-gradient(135deg, ").concat(gray
1077
1103
  var slugBackgroundHover$2 = gray60;
1078
1104
  var slugGradientHover$2 = "".concat(gray100, " linear-gradient(135deg, ").concat(gray20Hover, " 0%, rgba(").concat(white$2, ", 0) 100%)");
1079
1105
  var slugHollowHover$2 = gray80Hover;
1080
- var slugCalloutGradientTop$2 = rgba(gray10, 0.85);
1081
- var slugCalloutGradientBottom$2 = rgba(gray20, 0.85);
1082
- var slugCalloutAuraStart$2 = rgba(blue10, 0.6);
1083
- var slugCalloutAuraEnd$2 = rgba(white$2, 0);
1084
1106
  var slugCalloutGradientTopHover$2 = rgba(gray20, 0.55);
1085
1107
  var slugCalloutGradientBottomHover$2 = rgba(gray20Hover, 0.55);
1086
1108
  var slugCalloutAuraStartHover01$2 = rgba(white$2, 0.5);
@@ -1096,6 +1118,27 @@ var aiGradientStart01$2 = rgba(coolGray10, 0.5);
1096
1118
  var aiGradientStart02$2 = rgba(blue10, 0.5);
1097
1119
  var aiGradientEnd$2 = rgba(white$2, 0);
1098
1120
 
1121
+ // Phase 2 - new
1122
+ var slugCalloutShadowInner$2 = rgba(blue50, 0.2);
1123
+ var slugCalloutShadowOuter01$2 = rgba(blue70, 0.25);
1124
+ var slugCalloutShadowOuter02$2 = rgba(black, 0.1);
1125
+ var slugCalloutBorder01$2 = blue40;
1126
+ var slugCalloutBorder02$2 = blue20;
1127
+
1128
+ // Changed
1129
+ var slugCalloutAuraStart$2 = rgba(blue50, 0.1);
1130
+ var slugCalloutAuraEnd$2 = rgba(white$2, 0);
1131
+
1132
+ // Not used in phase 2 / possibly remove?
1133
+ var slugCalloutGradientTop$2 = rgba(gray10, 0.85);
1134
+ var slugCalloutGradientBottom$2 = rgba(gray20, 0.85);
1135
+
1136
+ // One off tokens for caret
1137
+ var slugCalloutCaretCenter$2 = '#A7C7FF';
1138
+ var slugCalloutCaretBottom$2 = blue20;
1139
+ var slugCalloutCaretBottomBackgroundActions$2 = '#D2DCEE';
1140
+ var slugCalloutCaretBottomBackground$2 = '#CCDBF8';
1141
+
1099
1142
  var g10$1 = /*#__PURE__*/Object.freeze({
1100
1143
  __proto__: null,
1101
1144
  background: background$7,
@@ -1203,10 +1246,6 @@ var g10$1 = /*#__PURE__*/Object.freeze({
1203
1246
  slugBackgroundHover: slugBackgroundHover$2,
1204
1247
  slugGradientHover: slugGradientHover$2,
1205
1248
  slugHollowHover: slugHollowHover$2,
1206
- slugCalloutGradientTop: slugCalloutGradientTop$2,
1207
- slugCalloutGradientBottom: slugCalloutGradientBottom$2,
1208
- slugCalloutAuraStart: slugCalloutAuraStart$2,
1209
- slugCalloutAuraEnd: slugCalloutAuraEnd$2,
1210
1249
  slugCalloutGradientTopHover: slugCalloutGradientTopHover$2,
1211
1250
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$2,
1212
1251
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$2,
@@ -1220,6 +1259,19 @@ var g10$1 = /*#__PURE__*/Object.freeze({
1220
1259
  aiGradientStart01: aiGradientStart01$2,
1221
1260
  aiGradientStart02: aiGradientStart02$2,
1222
1261
  aiGradientEnd: aiGradientEnd$2,
1262
+ slugCalloutShadowInner: slugCalloutShadowInner$2,
1263
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01$2,
1264
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02$2,
1265
+ slugCalloutBorder01: slugCalloutBorder01$2,
1266
+ slugCalloutBorder02: slugCalloutBorder02$2,
1267
+ slugCalloutAuraStart: slugCalloutAuraStart$2,
1268
+ slugCalloutAuraEnd: slugCalloutAuraEnd$2,
1269
+ slugCalloutGradientTop: slugCalloutGradientTop$2,
1270
+ slugCalloutGradientBottom: slugCalloutGradientBottom$2,
1271
+ slugCalloutCaretCenter: slugCalloutCaretCenter$2,
1272
+ slugCalloutCaretBottom: slugCalloutCaretBottom$2,
1273
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$2,
1274
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$2,
1223
1275
  caption01: caption01,
1224
1276
  caption02: caption02,
1225
1277
  label01: label01,
@@ -1464,10 +1516,6 @@ var slugGradient$1 = "".concat(gray50, " linear-gradient(135deg, ").concat(gray1
1464
1516
  var slugBackgroundHover$1 = gray20;
1465
1517
  var slugGradientHover$1 = "".concat(gray40, " linear-gradient(135deg, ").concat(white$2, " 0%, rgba(").concat(white$2, ", 0) 100%)");
1466
1518
  var slugHollowHover$1 = gray30Hover;
1467
- var slugCalloutGradientTop$1 = rgba(gray100, 0.85);
1468
- var slugCalloutGradientBottom$1 = rgba(gray90, 0.85);
1469
- var slugCalloutAuraStart$1 = rgba(blue20, 0.2);
1470
- var slugCalloutAuraEnd$1 = rgba(gray100, 0);
1471
1519
  var slugCalloutGradientTopHover$1 = rgba(gray80, 0.55);
1472
1520
  var slugCalloutGradientBottomHover$1 = rgba(gray80Hover, 0.55);
1473
1521
  var slugCalloutAuraStartHover01$1 = rgba(blue20Hover, 0.3);
@@ -1483,6 +1531,27 @@ var aiGradientStart01$1 = rgba(blue20, 0.2);
1483
1531
  var aiGradientStart02$1 = 'transparent';
1484
1532
  var aiGradientEnd$1 = 'rgba(38, 38, 38, 0)';
1485
1533
 
1534
+ // Phase 2 - new
1535
+ var slugCalloutShadowInner$1 = rgba(blue50, 0.2);
1536
+ var slugCalloutShadowOuter01$1 = rgba(blue80, 0.25);
1537
+ var slugCalloutShadowOuter02$1 = rgba(black, 0.65);
1538
+ var slugCalloutBorder01$1 = blue50;
1539
+ var slugCalloutBorder02$1 = rgba(blue30, 0.25);
1540
+
1541
+ // Changed
1542
+ var slugCalloutAuraStart$1 = rgba(blue50, 0.1);
1543
+ var slugCalloutAuraEnd$1 = rgba(white$2, 0);
1544
+
1545
+ // Not used in phase 2 / possibly remove?
1546
+ var slugCalloutGradientTop$1 = rgba(gray100, 0.85);
1547
+ var slugCalloutGradientBottom$1 = rgba(gray90, 0.85);
1548
+
1549
+ // One off tokens for caret
1550
+ var slugCalloutCaretCenter$1 = '#456FB5';
1551
+ var slugCalloutCaretBottom$1 = '#465060';
1552
+ var slugCalloutCaretBottomBackgroundActions$1 = '#253042';
1553
+ var slugCalloutCaretBottomBackground$1 = '#2D3F5C';
1554
+
1486
1555
  var g90$1 = /*#__PURE__*/Object.freeze({
1487
1556
  __proto__: null,
1488
1557
  background: background$6,
@@ -1590,10 +1659,6 @@ var g90$1 = /*#__PURE__*/Object.freeze({
1590
1659
  slugBackgroundHover: slugBackgroundHover$1,
1591
1660
  slugGradientHover: slugGradientHover$1,
1592
1661
  slugHollowHover: slugHollowHover$1,
1593
- slugCalloutGradientTop: slugCalloutGradientTop$1,
1594
- slugCalloutGradientBottom: slugCalloutGradientBottom$1,
1595
- slugCalloutAuraStart: slugCalloutAuraStart$1,
1596
- slugCalloutAuraEnd: slugCalloutAuraEnd$1,
1597
1662
  slugCalloutGradientTopHover: slugCalloutGradientTopHover$1,
1598
1663
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$1,
1599
1664
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$1,
@@ -1607,6 +1672,19 @@ var g90$1 = /*#__PURE__*/Object.freeze({
1607
1672
  aiGradientStart01: aiGradientStart01$1,
1608
1673
  aiGradientStart02: aiGradientStart02$1,
1609
1674
  aiGradientEnd: aiGradientEnd$1,
1675
+ slugCalloutShadowInner: slugCalloutShadowInner$1,
1676
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01$1,
1677
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02$1,
1678
+ slugCalloutBorder01: slugCalloutBorder01$1,
1679
+ slugCalloutBorder02: slugCalloutBorder02$1,
1680
+ slugCalloutAuraStart: slugCalloutAuraStart$1,
1681
+ slugCalloutAuraEnd: slugCalloutAuraEnd$1,
1682
+ slugCalloutGradientTop: slugCalloutGradientTop$1,
1683
+ slugCalloutGradientBottom: slugCalloutGradientBottom$1,
1684
+ slugCalloutCaretCenter: slugCalloutCaretCenter$1,
1685
+ slugCalloutCaretBottom: slugCalloutCaretBottom$1,
1686
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$1,
1687
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$1,
1610
1688
  caption01: caption01,
1611
1689
  caption02: caption02,
1612
1690
  label01: label01,
@@ -1851,10 +1929,6 @@ var slugGradient = "".concat(gray50, " linear-gradient(135deg, ").concat(gray10,
1851
1929
  var slugBackgroundHover = gray20;
1852
1930
  var slugGradientHover = "".concat(gray40, " linear-gradient(135deg, ").concat(white$2, " 0%, rgba(").concat(white$2, ", 0) 100%)");
1853
1931
  var slugHollowHover = gray30Hover;
1854
- var slugCalloutGradientTop = rgba(gray100, 0.85);
1855
- var slugCalloutGradientBottom = rgba(gray90, 0.85);
1856
- var slugCalloutAuraStart = rgba(blue20, 0.2);
1857
- var slugCalloutAuraEnd = rgba(gray100, 0);
1858
1932
  var slugCalloutGradientTopHover = rgba(gray80, 0.55);
1859
1933
  var slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
1860
1934
  var slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
@@ -1870,6 +1944,27 @@ var aiGradientStart01 = rgba(blue20, 0.2);
1870
1944
  var aiGradientStart02 = 'transparent';
1871
1945
  var aiGradientEnd = 'rgba(38, 38, 38, 0)';
1872
1946
 
1947
+ // Phase 2 - new
1948
+ var slugCalloutShadowInner = rgba(blue50, 0.2);
1949
+ var slugCalloutShadowOuter01 = rgba(blue80, 0.25);
1950
+ var slugCalloutShadowOuter02 = rgba(black, 0.65);
1951
+ var slugCalloutBorder01 = blue50;
1952
+ var slugCalloutBorder02 = rgba(blue30, 0.25);
1953
+
1954
+ // Changed
1955
+ var slugCalloutAuraStart = rgba(blue50, 0.1);
1956
+ var slugCalloutAuraEnd = rgba(white$2, 0);
1957
+
1958
+ // Not used in phase 2 / possibly remove?
1959
+ var slugCalloutGradientTop = rgba(gray100, 0.85);
1960
+ var slugCalloutGradientBottom = rgba(gray90, 0.85);
1961
+
1962
+ // One off tokens for caret
1963
+ var slugCalloutCaretCenter = '#3F68AF';
1964
+ var slugCalloutCaretBottom = '#3D4655';
1965
+ var slugCalloutCaretBottomBackgroundActions = '#192436';
1966
+ var slugCalloutCaretBottomBackground = '#213250';
1967
+
1873
1968
  var g100$1 = /*#__PURE__*/Object.freeze({
1874
1969
  __proto__: null,
1875
1970
  background: background$5,
@@ -1977,10 +2072,6 @@ var g100$1 = /*#__PURE__*/Object.freeze({
1977
2072
  slugBackgroundHover: slugBackgroundHover,
1978
2073
  slugGradientHover: slugGradientHover,
1979
2074
  slugHollowHover: slugHollowHover,
1980
- slugCalloutGradientTop: slugCalloutGradientTop,
1981
- slugCalloutGradientBottom: slugCalloutGradientBottom,
1982
- slugCalloutAuraStart: slugCalloutAuraStart,
1983
- slugCalloutAuraEnd: slugCalloutAuraEnd,
1984
2075
  slugCalloutGradientTopHover: slugCalloutGradientTopHover,
1985
2076
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover,
1986
2077
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01,
@@ -1994,6 +2085,19 @@ var g100$1 = /*#__PURE__*/Object.freeze({
1994
2085
  aiGradientStart01: aiGradientStart01,
1995
2086
  aiGradientStart02: aiGradientStart02,
1996
2087
  aiGradientEnd: aiGradientEnd,
2088
+ slugCalloutShadowInner: slugCalloutShadowInner,
2089
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01,
2090
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02,
2091
+ slugCalloutBorder01: slugCalloutBorder01,
2092
+ slugCalloutBorder02: slugCalloutBorder02,
2093
+ slugCalloutAuraStart: slugCalloutAuraStart,
2094
+ slugCalloutAuraEnd: slugCalloutAuraEnd,
2095
+ slugCalloutGradientTop: slugCalloutGradientTop,
2096
+ slugCalloutGradientBottom: slugCalloutGradientBottom,
2097
+ slugCalloutCaretCenter: slugCalloutCaretCenter,
2098
+ slugCalloutCaretBottom: slugCalloutCaretBottom,
2099
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions,
2100
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground,
1997
2101
  caption01: caption01,
1998
2102
  caption02: caption02,
1999
2103
  label01: label01,
@@ -4890,7 +4994,11 @@ var contextual = TokenGroup.create({
4890
4994
  var ai = TokenGroup.create({
4891
4995
  name: 'AI',
4892
4996
  properties: ['background'],
4893
- tokens: ['slug-background', 'slug-gradient', 'slug-background-hover', 'slug-gradient-hover', 'slug-hollow-hover', 'slug-callout-gradient-top', 'slug-callout-gradient-bottom', 'slug-callout-aura-start', 'slug-callout-aura-end', 'slug-callout-gradient-top-hover', 'slug-callout-gradient-bottom-hover', 'slug-callout-aura-start-hover-01', 'slug-callout-aura-start-hover-02', 'slug-callout-aura-end-hover-01', 'slug-callout-aura-end-hover-02', 'slug-callout-gradient-top-selected', 'slug-callout-gradient-bottom-selected', 'slug-callout-aura-start-selected', 'slug-callout-aura-end-selected', 'ai-gradient-start-01', 'ai-gradient-start-02', 'ai-gradient-end']
4997
+ tokens: ['slug-background', 'slug-gradient', 'slug-background-hover', 'slug-gradient-hover', 'slug-hollow-hover', 'slug-callout-gradient-top', 'slug-callout-gradient-bottom', 'slug-callout-aura-start', 'slug-callout-aura-end', 'slug-callout-gradient-top-hover', 'slug-callout-gradient-bottom-hover', 'slug-callout-aura-start-hover-01', 'slug-callout-aura-start-hover-02', 'slug-callout-aura-end-hover-01', 'slug-callout-aura-end-hover-02', 'slug-callout-gradient-top-selected', 'slug-callout-gradient-bottom-selected', 'slug-callout-aura-start-selected', 'slug-callout-aura-end-selected', 'ai-gradient-start-01', 'ai-gradient-start-02', 'ai-gradient-end',
4998
+ // Phase 2
4999
+ 'slug-callout-shadow-inner', 'slug-callout-shadow-outer-01', 'slug-callout-shadow-outer-02', 'slug-callout-border-01', 'slug-callout-border-02',
5000
+ // Caret tokens
5001
+ 'slug-callout-caret-center', 'slug-callout-caret-bottom', 'slug-callout-caret-bottom-background', 'slug-callout-caret-bottom-background-actions']
4894
5002
  });
4895
5003
  var group = TokenGroup.create({
4896
5004
  name: 'All',
@@ -5046,4 +5154,4 @@ var themes = {
5046
5154
  g100: g100$1
5047
5155
  };
5048
5156
 
5049
- export { aiGradientEnd$3 as aiGradientEnd, aiGradientStart01$3 as aiGradientStart01, aiGradientStart02$3 as aiGradientStart02, background$8 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, borderTile01$3 as borderTile01, borderTile02$3 as borderTile02, borderTile03$3 as borderTile03, index$2 as buttonTokens, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$8 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, formatTokenName, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInteractive$3 as iconInteractive, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, index as notificationTokens, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, slugBackground$3 as slugBackground, slugBackgroundHover$3 as slugBackgroundHover, slugCalloutAuraEnd$3 as slugCalloutAuraEnd, slugCalloutAuraEndHover01$3 as slugCalloutAuraEndHover01, slugCalloutAuraEndHover02$3 as slugCalloutAuraEndHover02, slugCalloutAuraEndSelected$3 as slugCalloutAuraEndSelected, slugCalloutAuraStart$3 as slugCalloutAuraStart, slugCalloutAuraStartHover01$3 as slugCalloutAuraStartHover01, slugCalloutAuraStartHover02$3 as slugCalloutAuraStartHover02, slugCalloutAuraStartSelected$3 as slugCalloutAuraStartSelected, slugCalloutGradientBottom$3 as slugCalloutGradientBottom, slugCalloutGradientBottomHover$3 as slugCalloutGradientBottomHover, slugCalloutGradientBottomSelected$3 as slugCalloutGradientBottomSelected, slugCalloutGradientTop$3 as slugCalloutGradientTop, slugCalloutGradientTopHover$3 as slugCalloutGradientTopHover, slugCalloutGradientTopSelected$3 as slugCalloutGradientTopSelected, slugGradient$3 as slugGradient, slugGradientHover$3 as slugGradientHover, slugHollowHover$3 as slugHollowHover, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, index$1 as tagTokens, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, unstable_metadata, index$3 as v10, white$1 as white };
5157
+ export { aiGradientEnd$3 as aiGradientEnd, aiGradientStart01$3 as aiGradientStart01, aiGradientStart02$3 as aiGradientStart02, background$8 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, borderTile01$3 as borderTile01, borderTile02$3 as borderTile02, borderTile03$3 as borderTile03, index$2 as buttonTokens, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$8 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, formatTokenName, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInteractive$3 as iconInteractive, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, index as notificationTokens, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, slugBackground$3 as slugBackground, slugBackgroundHover$3 as slugBackgroundHover, slugCalloutAuraEnd$3 as slugCalloutAuraEnd, slugCalloutAuraEndHover01$3 as slugCalloutAuraEndHover01, slugCalloutAuraEndHover02$3 as slugCalloutAuraEndHover02, slugCalloutAuraEndSelected$3 as slugCalloutAuraEndSelected, slugCalloutAuraStart$3 as slugCalloutAuraStart, slugCalloutAuraStartHover01$3 as slugCalloutAuraStartHover01, slugCalloutAuraStartHover02$3 as slugCalloutAuraStartHover02, slugCalloutAuraStartSelected$3 as slugCalloutAuraStartSelected, slugCalloutBorder01$3 as slugCalloutBorder01, slugCalloutBorder02$3 as slugCalloutBorder02, slugCalloutCaretBottom$3 as slugCalloutCaretBottom, slugCalloutCaretBottomBackground$3 as slugCalloutCaretBottomBackground, slugCalloutCaretBottomBackgroundActions$3 as slugCalloutCaretBottomBackgroundActions, slugCalloutCaretCenter$3 as slugCalloutCaretCenter, slugCalloutGradientBottom$3 as slugCalloutGradientBottom, slugCalloutGradientBottomHover$3 as slugCalloutGradientBottomHover, slugCalloutGradientBottomSelected$3 as slugCalloutGradientBottomSelected, slugCalloutGradientTop$3 as slugCalloutGradientTop, slugCalloutGradientTopHover$3 as slugCalloutGradientTopHover, slugCalloutGradientTopSelected$3 as slugCalloutGradientTopSelected, slugCalloutShadowInner$3 as slugCalloutShadowInner, slugCalloutShadowOuter01$3 as slugCalloutShadowOuter01, slugCalloutShadowOuter02$3 as slugCalloutShadowOuter02, slugGradient$3 as slugGradient, slugGradientHover$3 as slugGradientHover, slugHollowHover$3 as slugHollowHover, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, index$1 as tagTokens, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, unstable_metadata, index$3 as v10, white$1 as white };
package/lib/index.js CHANGED
@@ -696,10 +696,6 @@ var slugGradient$3 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").co
696
696
  var slugBackgroundHover$3 = colors$1.gray60;
697
697
  var slugGradientHover$3 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").concat(colors$1.gray20Hover, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
698
698
  var slugHollowHover$3 = colors$1.gray80Hover;
699
- var slugCalloutGradientTop$3 = colors$1.rgba(colors$1.gray10, 0.85);
700
- var slugCalloutGradientBottom$3 = colors$1.rgba(colors$1.gray20, 0.85);
701
- var slugCalloutAuraStart$3 = colors$1.rgba(colors$1.blue10, 0.6);
702
- var slugCalloutAuraEnd$3 = colors$1.rgba(colors$1.white, 0);
703
699
  var slugCalloutGradientTopHover$3 = colors$1.rgba(colors$1.gray20, 0.55);
704
700
  var slugCalloutGradientBottomHover$3 = colors$1.rgba(colors$1.gray20Hover, 0.55);
705
701
  var slugCalloutAuraStartHover01$3 = colors$1.rgba(colors$1.white, 0.5);
@@ -715,6 +711,27 @@ var aiGradientStart01$3 = colors$1.rgba(colors$1.coolGray10, 0.5);
715
711
  var aiGradientStart02$3 = colors$1.rgba(colors$1.blue10, 0.5);
716
712
  var aiGradientEnd$3 = colors$1.rgba(colors$1.white, 0);
717
713
 
714
+ // Phase 2 - new
715
+ var slugCalloutShadowInner$3 = colors$1.rgba(colors$1.blue50, 0.2);
716
+ var slugCalloutShadowOuter01$3 = colors$1.rgba(colors$1.blue70, 0.25);
717
+ var slugCalloutShadowOuter02$3 = colors$1.rgba(colors$1.black, 0.1);
718
+ var slugCalloutBorder01$3 = colors$1.blue40;
719
+ var slugCalloutBorder02$3 = colors$1.blue20;
720
+
721
+ // Changed
722
+ var slugCalloutAuraStart$3 = colors$1.rgba(colors$1.blue50, 0.1);
723
+ var slugCalloutAuraEnd$3 = colors$1.rgba(colors$1.white, 0);
724
+
725
+ // Not used in phase 2 / possibly remove?
726
+ var slugCalloutGradientTop$3 = colors$1.rgba(colors$1.gray10, 0.85);
727
+ var slugCalloutGradientBottom$3 = colors$1.rgba(colors$1.gray20, 0.85);
728
+
729
+ // One off tokens for caret
730
+ var slugCalloutCaretCenter$3 = '#A7C7FF';
731
+ var slugCalloutCaretBottom$3 = colors$1.blue20;
732
+ var slugCalloutCaretBottomBackgroundActions$3 = '#DAE5F8';
733
+ var slugCalloutCaretBottomBackground$3 = '#D5E5FF';
734
+
718
735
  var white$1 = /*#__PURE__*/Object.freeze({
719
736
  __proto__: null,
720
737
  background: background$8,
@@ -822,10 +839,6 @@ var white$1 = /*#__PURE__*/Object.freeze({
822
839
  slugBackgroundHover: slugBackgroundHover$3,
823
840
  slugGradientHover: slugGradientHover$3,
824
841
  slugHollowHover: slugHollowHover$3,
825
- slugCalloutGradientTop: slugCalloutGradientTop$3,
826
- slugCalloutGradientBottom: slugCalloutGradientBottom$3,
827
- slugCalloutAuraStart: slugCalloutAuraStart$3,
828
- slugCalloutAuraEnd: slugCalloutAuraEnd$3,
829
842
  slugCalloutGradientTopHover: slugCalloutGradientTopHover$3,
830
843
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$3,
831
844
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$3,
@@ -839,6 +852,19 @@ var white$1 = /*#__PURE__*/Object.freeze({
839
852
  aiGradientStart01: aiGradientStart01$3,
840
853
  aiGradientStart02: aiGradientStart02$3,
841
854
  aiGradientEnd: aiGradientEnd$3,
855
+ slugCalloutShadowInner: slugCalloutShadowInner$3,
856
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01$3,
857
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02$3,
858
+ slugCalloutBorder01: slugCalloutBorder01$3,
859
+ slugCalloutBorder02: slugCalloutBorder02$3,
860
+ slugCalloutAuraStart: slugCalloutAuraStart$3,
861
+ slugCalloutAuraEnd: slugCalloutAuraEnd$3,
862
+ slugCalloutGradientTop: slugCalloutGradientTop$3,
863
+ slugCalloutGradientBottom: slugCalloutGradientBottom$3,
864
+ slugCalloutCaretCenter: slugCalloutCaretCenter$3,
865
+ slugCalloutCaretBottom: slugCalloutCaretBottom$3,
866
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$3,
867
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$3,
842
868
  caption01: type$2.caption01,
843
869
  caption02: type$2.caption02,
844
870
  label01: type$2.label01,
@@ -1083,10 +1109,6 @@ var slugGradient$2 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").co
1083
1109
  var slugBackgroundHover$2 = colors$1.gray60;
1084
1110
  var slugGradientHover$2 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").concat(colors$1.gray20Hover, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
1085
1111
  var slugHollowHover$2 = colors$1.gray80Hover;
1086
- var slugCalloutGradientTop$2 = colors$1.rgba(colors$1.gray10, 0.85);
1087
- var slugCalloutGradientBottom$2 = colors$1.rgba(colors$1.gray20, 0.85);
1088
- var slugCalloutAuraStart$2 = colors$1.rgba(colors$1.blue10, 0.6);
1089
- var slugCalloutAuraEnd$2 = colors$1.rgba(colors$1.white, 0);
1090
1112
  var slugCalloutGradientTopHover$2 = colors$1.rgba(colors$1.gray20, 0.55);
1091
1113
  var slugCalloutGradientBottomHover$2 = colors$1.rgba(colors$1.gray20Hover, 0.55);
1092
1114
  var slugCalloutAuraStartHover01$2 = colors$1.rgba(colors$1.white, 0.5);
@@ -1102,6 +1124,27 @@ var aiGradientStart01$2 = colors$1.rgba(colors$1.coolGray10, 0.5);
1102
1124
  var aiGradientStart02$2 = colors$1.rgba(colors$1.blue10, 0.5);
1103
1125
  var aiGradientEnd$2 = colors$1.rgba(colors$1.white, 0);
1104
1126
 
1127
+ // Phase 2 - new
1128
+ var slugCalloutShadowInner$2 = colors$1.rgba(colors$1.blue50, 0.2);
1129
+ var slugCalloutShadowOuter01$2 = colors$1.rgba(colors$1.blue70, 0.25);
1130
+ var slugCalloutShadowOuter02$2 = colors$1.rgba(colors$1.black, 0.1);
1131
+ var slugCalloutBorder01$2 = colors$1.blue40;
1132
+ var slugCalloutBorder02$2 = colors$1.blue20;
1133
+
1134
+ // Changed
1135
+ var slugCalloutAuraStart$2 = colors$1.rgba(colors$1.blue50, 0.1);
1136
+ var slugCalloutAuraEnd$2 = colors$1.rgba(colors$1.white, 0);
1137
+
1138
+ // Not used in phase 2 / possibly remove?
1139
+ var slugCalloutGradientTop$2 = colors$1.rgba(colors$1.gray10, 0.85);
1140
+ var slugCalloutGradientBottom$2 = colors$1.rgba(colors$1.gray20, 0.85);
1141
+
1142
+ // One off tokens for caret
1143
+ var slugCalloutCaretCenter$2 = '#A7C7FF';
1144
+ var slugCalloutCaretBottom$2 = colors$1.blue20;
1145
+ var slugCalloutCaretBottomBackgroundActions$2 = '#D2DCEE';
1146
+ var slugCalloutCaretBottomBackground$2 = '#CCDBF8';
1147
+
1105
1148
  var g10$1 = /*#__PURE__*/Object.freeze({
1106
1149
  __proto__: null,
1107
1150
  background: background$7,
@@ -1209,10 +1252,6 @@ var g10$1 = /*#__PURE__*/Object.freeze({
1209
1252
  slugBackgroundHover: slugBackgroundHover$2,
1210
1253
  slugGradientHover: slugGradientHover$2,
1211
1254
  slugHollowHover: slugHollowHover$2,
1212
- slugCalloutGradientTop: slugCalloutGradientTop$2,
1213
- slugCalloutGradientBottom: slugCalloutGradientBottom$2,
1214
- slugCalloutAuraStart: slugCalloutAuraStart$2,
1215
- slugCalloutAuraEnd: slugCalloutAuraEnd$2,
1216
1255
  slugCalloutGradientTopHover: slugCalloutGradientTopHover$2,
1217
1256
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$2,
1218
1257
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$2,
@@ -1226,6 +1265,19 @@ var g10$1 = /*#__PURE__*/Object.freeze({
1226
1265
  aiGradientStart01: aiGradientStart01$2,
1227
1266
  aiGradientStart02: aiGradientStart02$2,
1228
1267
  aiGradientEnd: aiGradientEnd$2,
1268
+ slugCalloutShadowInner: slugCalloutShadowInner$2,
1269
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01$2,
1270
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02$2,
1271
+ slugCalloutBorder01: slugCalloutBorder01$2,
1272
+ slugCalloutBorder02: slugCalloutBorder02$2,
1273
+ slugCalloutAuraStart: slugCalloutAuraStart$2,
1274
+ slugCalloutAuraEnd: slugCalloutAuraEnd$2,
1275
+ slugCalloutGradientTop: slugCalloutGradientTop$2,
1276
+ slugCalloutGradientBottom: slugCalloutGradientBottom$2,
1277
+ slugCalloutCaretCenter: slugCalloutCaretCenter$2,
1278
+ slugCalloutCaretBottom: slugCalloutCaretBottom$2,
1279
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$2,
1280
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$2,
1229
1281
  caption01: type$2.caption01,
1230
1282
  caption02: type$2.caption02,
1231
1283
  label01: type$2.label01,
@@ -1470,10 +1522,6 @@ var slugGradient$1 = "".concat(colors$1.gray50, " linear-gradient(135deg, ").con
1470
1522
  var slugBackgroundHover$1 = colors$1.gray20;
1471
1523
  var slugGradientHover$1 = "".concat(colors$1.gray40, " linear-gradient(135deg, ").concat(colors$1.white, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
1472
1524
  var slugHollowHover$1 = colors$1.gray30Hover;
1473
- var slugCalloutGradientTop$1 = colors$1.rgba(colors$1.gray100, 0.85);
1474
- var slugCalloutGradientBottom$1 = colors$1.rgba(colors$1.gray90, 0.85);
1475
- var slugCalloutAuraStart$1 = colors$1.rgba(colors$1.blue20, 0.2);
1476
- var slugCalloutAuraEnd$1 = colors$1.rgba(colors$1.gray100, 0);
1477
1525
  var slugCalloutGradientTopHover$1 = colors$1.rgba(colors$1.gray80, 0.55);
1478
1526
  var slugCalloutGradientBottomHover$1 = colors$1.rgba(colors$1.gray80Hover, 0.55);
1479
1527
  var slugCalloutAuraStartHover01$1 = colors$1.rgba(colors$1.blue20Hover, 0.3);
@@ -1489,6 +1537,27 @@ var aiGradientStart01$1 = colors$1.rgba(colors$1.blue20, 0.2);
1489
1537
  var aiGradientStart02$1 = 'transparent';
1490
1538
  var aiGradientEnd$1 = 'rgba(38, 38, 38, 0)';
1491
1539
 
1540
+ // Phase 2 - new
1541
+ var slugCalloutShadowInner$1 = colors$1.rgba(colors$1.blue50, 0.2);
1542
+ var slugCalloutShadowOuter01$1 = colors$1.rgba(colors$1.blue80, 0.25);
1543
+ var slugCalloutShadowOuter02$1 = colors$1.rgba(colors$1.black, 0.65);
1544
+ var slugCalloutBorder01$1 = colors$1.blue50;
1545
+ var slugCalloutBorder02$1 = colors$1.rgba(colors$1.blue30, 0.25);
1546
+
1547
+ // Changed
1548
+ var slugCalloutAuraStart$1 = colors$1.rgba(colors$1.blue50, 0.1);
1549
+ var slugCalloutAuraEnd$1 = colors$1.rgba(colors$1.white, 0);
1550
+
1551
+ // Not used in phase 2 / possibly remove?
1552
+ var slugCalloutGradientTop$1 = colors$1.rgba(colors$1.gray100, 0.85);
1553
+ var slugCalloutGradientBottom$1 = colors$1.rgba(colors$1.gray90, 0.85);
1554
+
1555
+ // One off tokens for caret
1556
+ var slugCalloutCaretCenter$1 = '#456FB5';
1557
+ var slugCalloutCaretBottom$1 = '#465060';
1558
+ var slugCalloutCaretBottomBackgroundActions$1 = '#253042';
1559
+ var slugCalloutCaretBottomBackground$1 = '#2D3F5C';
1560
+
1492
1561
  var g90$1 = /*#__PURE__*/Object.freeze({
1493
1562
  __proto__: null,
1494
1563
  background: background$6,
@@ -1596,10 +1665,6 @@ var g90$1 = /*#__PURE__*/Object.freeze({
1596
1665
  slugBackgroundHover: slugBackgroundHover$1,
1597
1666
  slugGradientHover: slugGradientHover$1,
1598
1667
  slugHollowHover: slugHollowHover$1,
1599
- slugCalloutGradientTop: slugCalloutGradientTop$1,
1600
- slugCalloutGradientBottom: slugCalloutGradientBottom$1,
1601
- slugCalloutAuraStart: slugCalloutAuraStart$1,
1602
- slugCalloutAuraEnd: slugCalloutAuraEnd$1,
1603
1668
  slugCalloutGradientTopHover: slugCalloutGradientTopHover$1,
1604
1669
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$1,
1605
1670
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$1,
@@ -1613,6 +1678,19 @@ var g90$1 = /*#__PURE__*/Object.freeze({
1613
1678
  aiGradientStart01: aiGradientStart01$1,
1614
1679
  aiGradientStart02: aiGradientStart02$1,
1615
1680
  aiGradientEnd: aiGradientEnd$1,
1681
+ slugCalloutShadowInner: slugCalloutShadowInner$1,
1682
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01$1,
1683
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02$1,
1684
+ slugCalloutBorder01: slugCalloutBorder01$1,
1685
+ slugCalloutBorder02: slugCalloutBorder02$1,
1686
+ slugCalloutAuraStart: slugCalloutAuraStart$1,
1687
+ slugCalloutAuraEnd: slugCalloutAuraEnd$1,
1688
+ slugCalloutGradientTop: slugCalloutGradientTop$1,
1689
+ slugCalloutGradientBottom: slugCalloutGradientBottom$1,
1690
+ slugCalloutCaretCenter: slugCalloutCaretCenter$1,
1691
+ slugCalloutCaretBottom: slugCalloutCaretBottom$1,
1692
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$1,
1693
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$1,
1616
1694
  caption01: type$2.caption01,
1617
1695
  caption02: type$2.caption02,
1618
1696
  label01: type$2.label01,
@@ -1857,10 +1935,6 @@ var slugGradient = "".concat(colors$1.gray50, " linear-gradient(135deg, ").conca
1857
1935
  var slugBackgroundHover = colors$1.gray20;
1858
1936
  var slugGradientHover = "".concat(colors$1.gray40, " linear-gradient(135deg, ").concat(colors$1.white, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
1859
1937
  var slugHollowHover = colors$1.gray30Hover;
1860
- var slugCalloutGradientTop = colors$1.rgba(colors$1.gray100, 0.85);
1861
- var slugCalloutGradientBottom = colors$1.rgba(colors$1.gray90, 0.85);
1862
- var slugCalloutAuraStart = colors$1.rgba(colors$1.blue20, 0.2);
1863
- var slugCalloutAuraEnd = colors$1.rgba(colors$1.gray100, 0);
1864
1938
  var slugCalloutGradientTopHover = colors$1.rgba(colors$1.gray80, 0.55);
1865
1939
  var slugCalloutGradientBottomHover = colors$1.rgba(colors$1.gray80Hover, 0.55);
1866
1940
  var slugCalloutAuraStartHover01 = colors$1.rgba(colors$1.blue20Hover, 0.3);
@@ -1876,6 +1950,27 @@ var aiGradientStart01 = colors$1.rgba(colors$1.blue20, 0.2);
1876
1950
  var aiGradientStart02 = 'transparent';
1877
1951
  var aiGradientEnd = 'rgba(38, 38, 38, 0)';
1878
1952
 
1953
+ // Phase 2 - new
1954
+ var slugCalloutShadowInner = colors$1.rgba(colors$1.blue50, 0.2);
1955
+ var slugCalloutShadowOuter01 = colors$1.rgba(colors$1.blue80, 0.25);
1956
+ var slugCalloutShadowOuter02 = colors$1.rgba(colors$1.black, 0.65);
1957
+ var slugCalloutBorder01 = colors$1.blue50;
1958
+ var slugCalloutBorder02 = colors$1.rgba(colors$1.blue30, 0.25);
1959
+
1960
+ // Changed
1961
+ var slugCalloutAuraStart = colors$1.rgba(colors$1.blue50, 0.1);
1962
+ var slugCalloutAuraEnd = colors$1.rgba(colors$1.white, 0);
1963
+
1964
+ // Not used in phase 2 / possibly remove?
1965
+ var slugCalloutGradientTop = colors$1.rgba(colors$1.gray100, 0.85);
1966
+ var slugCalloutGradientBottom = colors$1.rgba(colors$1.gray90, 0.85);
1967
+
1968
+ // One off tokens for caret
1969
+ var slugCalloutCaretCenter = '#3F68AF';
1970
+ var slugCalloutCaretBottom = '#3D4655';
1971
+ var slugCalloutCaretBottomBackgroundActions = '#192436';
1972
+ var slugCalloutCaretBottomBackground = '#213250';
1973
+
1879
1974
  var g100$1 = /*#__PURE__*/Object.freeze({
1880
1975
  __proto__: null,
1881
1976
  background: background$5,
@@ -1983,10 +2078,6 @@ var g100$1 = /*#__PURE__*/Object.freeze({
1983
2078
  slugBackgroundHover: slugBackgroundHover,
1984
2079
  slugGradientHover: slugGradientHover,
1985
2080
  slugHollowHover: slugHollowHover,
1986
- slugCalloutGradientTop: slugCalloutGradientTop,
1987
- slugCalloutGradientBottom: slugCalloutGradientBottom,
1988
- slugCalloutAuraStart: slugCalloutAuraStart,
1989
- slugCalloutAuraEnd: slugCalloutAuraEnd,
1990
2081
  slugCalloutGradientTopHover: slugCalloutGradientTopHover,
1991
2082
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover,
1992
2083
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01,
@@ -2000,6 +2091,19 @@ var g100$1 = /*#__PURE__*/Object.freeze({
2000
2091
  aiGradientStart01: aiGradientStart01,
2001
2092
  aiGradientStart02: aiGradientStart02,
2002
2093
  aiGradientEnd: aiGradientEnd,
2094
+ slugCalloutShadowInner: slugCalloutShadowInner,
2095
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01,
2096
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02,
2097
+ slugCalloutBorder01: slugCalloutBorder01,
2098
+ slugCalloutBorder02: slugCalloutBorder02,
2099
+ slugCalloutAuraStart: slugCalloutAuraStart,
2100
+ slugCalloutAuraEnd: slugCalloutAuraEnd,
2101
+ slugCalloutGradientTop: slugCalloutGradientTop,
2102
+ slugCalloutGradientBottom: slugCalloutGradientBottom,
2103
+ slugCalloutCaretCenter: slugCalloutCaretCenter,
2104
+ slugCalloutCaretBottom: slugCalloutCaretBottom,
2105
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions,
2106
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground,
2003
2107
  caption01: type$2.caption01,
2004
2108
  caption02: type$2.caption02,
2005
2109
  label01: type$2.label01,
@@ -4896,7 +5000,11 @@ var contextual = TokenGroup.create({
4896
5000
  var ai = TokenGroup.create({
4897
5001
  name: 'AI',
4898
5002
  properties: ['background'],
4899
- tokens: ['slug-background', 'slug-gradient', 'slug-background-hover', 'slug-gradient-hover', 'slug-hollow-hover', 'slug-callout-gradient-top', 'slug-callout-gradient-bottom', 'slug-callout-aura-start', 'slug-callout-aura-end', 'slug-callout-gradient-top-hover', 'slug-callout-gradient-bottom-hover', 'slug-callout-aura-start-hover-01', 'slug-callout-aura-start-hover-02', 'slug-callout-aura-end-hover-01', 'slug-callout-aura-end-hover-02', 'slug-callout-gradient-top-selected', 'slug-callout-gradient-bottom-selected', 'slug-callout-aura-start-selected', 'slug-callout-aura-end-selected', 'ai-gradient-start-01', 'ai-gradient-start-02', 'ai-gradient-end']
5003
+ tokens: ['slug-background', 'slug-gradient', 'slug-background-hover', 'slug-gradient-hover', 'slug-hollow-hover', 'slug-callout-gradient-top', 'slug-callout-gradient-bottom', 'slug-callout-aura-start', 'slug-callout-aura-end', 'slug-callout-gradient-top-hover', 'slug-callout-gradient-bottom-hover', 'slug-callout-aura-start-hover-01', 'slug-callout-aura-start-hover-02', 'slug-callout-aura-end-hover-01', 'slug-callout-aura-end-hover-02', 'slug-callout-gradient-top-selected', 'slug-callout-gradient-bottom-selected', 'slug-callout-aura-start-selected', 'slug-callout-aura-end-selected', 'ai-gradient-start-01', 'ai-gradient-start-02', 'ai-gradient-end',
5004
+ // Phase 2
5005
+ 'slug-callout-shadow-inner', 'slug-callout-shadow-outer-01', 'slug-callout-shadow-outer-02', 'slug-callout-border-01', 'slug-callout-border-02',
5006
+ // Caret tokens
5007
+ 'slug-callout-caret-center', 'slug-callout-caret-bottom', 'slug-callout-caret-bottom-background', 'slug-callout-caret-bottom-background-actions']
4900
5008
  });
4901
5009
  var group = TokenGroup.create({
4902
5010
  name: 'All',
@@ -5434,12 +5542,21 @@ exports.slugCalloutAuraStart = slugCalloutAuraStart$3;
5434
5542
  exports.slugCalloutAuraStartHover01 = slugCalloutAuraStartHover01$3;
5435
5543
  exports.slugCalloutAuraStartHover02 = slugCalloutAuraStartHover02$3;
5436
5544
  exports.slugCalloutAuraStartSelected = slugCalloutAuraStartSelected$3;
5545
+ exports.slugCalloutBorder01 = slugCalloutBorder01$3;
5546
+ exports.slugCalloutBorder02 = slugCalloutBorder02$3;
5547
+ exports.slugCalloutCaretBottom = slugCalloutCaretBottom$3;
5548
+ exports.slugCalloutCaretBottomBackground = slugCalloutCaretBottomBackground$3;
5549
+ exports.slugCalloutCaretBottomBackgroundActions = slugCalloutCaretBottomBackgroundActions$3;
5550
+ exports.slugCalloutCaretCenter = slugCalloutCaretCenter$3;
5437
5551
  exports.slugCalloutGradientBottom = slugCalloutGradientBottom$3;
5438
5552
  exports.slugCalloutGradientBottomHover = slugCalloutGradientBottomHover$3;
5439
5553
  exports.slugCalloutGradientBottomSelected = slugCalloutGradientBottomSelected$3;
5440
5554
  exports.slugCalloutGradientTop = slugCalloutGradientTop$3;
5441
5555
  exports.slugCalloutGradientTopHover = slugCalloutGradientTopHover$3;
5442
5556
  exports.slugCalloutGradientTopSelected = slugCalloutGradientTopSelected$3;
5557
+ exports.slugCalloutShadowInner = slugCalloutShadowInner$3;
5558
+ exports.slugCalloutShadowOuter01 = slugCalloutShadowOuter01$3;
5559
+ exports.slugCalloutShadowOuter02 = slugCalloutShadowOuter02$3;
5443
5560
  exports.slugGradient = slugGradient$3;
5444
5561
  exports.slugGradientHover = slugGradientHover$3;
5445
5562
  exports.slugHollowHover = slugHollowHover$3;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/themes",
3
3
  "description": "Themes for applying color in the Carbon Design System",
4
- "version": "11.29.0-rc.0",
4
+ "version": "11.29.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -49,5 +49,5 @@
49
49
  "rimraf": "^5.0.0"
50
50
  },
51
51
  "sideEffects": false,
52
- "gitHead": "5eb449df62a21a69a467895cb94d758ba8554620"
52
+ "gitHead": "6d133d4f920b7c01f6ea2221938a339c14a85b42"
53
53
  }
package/scss/generated/_themes.scss CHANGED
@@ -100,16 +100,25 @@ $white: (
100
100
  slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0),
101
101
  slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0),
102
102
  slug-callout-aura-end-selected: rgba(255, 255, 255, 0),
103
- slug-callout-aura-start: rgba(237, 245, 255, 0.6),
103
+ slug-callout-aura-start: rgba(69, 137, 255, 0.1),
104
104
  slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5),
105
105
  slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5),
106
106
  slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6),
107
+ slug-callout-border-01: #78a9ff,
108
+ slug-callout-border-02: #d0e2ff,
109
+ slug-callout-caret-bottom: #d0e2ff,
110
+ slug-callout-caret-bottom-background: #d5e5ff,
111
+ slug-callout-caret-bottom-background-actions: #dae5f8,
112
+ slug-callout-caret-center: #a7c7ff,
107
113
  slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85),
108
114
  slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55),
109
115
  slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85),
110
116
  slug-callout-gradient-top: rgba(244, 244, 244, 0.85),
111
117
  slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55),
112
118
  slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85),
119
+ slug-callout-shadow-inner: rgba(69, 137, 255, 0.2),
120
+ slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25),
121
+ slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1),
113
122
  slug-gradient: #161616
114
123
  linear-gradient(135deg, #a8a8a8 0%, rgba(#ffffff, 0) 100%),
115
124
  slug-gradient-hover: #161616
@@ -233,16 +242,25 @@ $g10: (
233
242
  slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0),
234
243
  slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0),
235
244
  slug-callout-aura-end-selected: rgba(255, 255, 255, 0),
236
- slug-callout-aura-start: rgba(237, 245, 255, 0.6),
245
+ slug-callout-aura-start: rgba(69, 137, 255, 0.1),
237
246
  slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5),
238
247
  slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5),
239
248
  slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6),
249
+ slug-callout-border-01: #78a9ff,
250
+ slug-callout-border-02: #d0e2ff,
251
+ slug-callout-caret-bottom: #d0e2ff,
252
+ slug-callout-caret-bottom-background: #ccdbf8,
253
+ slug-callout-caret-bottom-background-actions: #d2dcee,
254
+ slug-callout-caret-center: #a7c7ff,
240
255
  slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85),
241
256
  slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55),
242
257
  slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85),
243
258
  slug-callout-gradient-top: rgba(244, 244, 244, 0.85),
244
259
  slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55),
245
260
  slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85),
261
+ slug-callout-shadow-inner: rgba(69, 137, 255, 0.2),
262
+ slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25),
263
+ slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1),
246
264
  slug-gradient: #161616
247
265
  linear-gradient(135deg, #a8a8a8 0%, rgba(#ffffff, 0) 100%),
248
266
  slug-gradient-hover: #161616
@@ -362,20 +380,29 @@ $g90: (
362
380
  skeleton-element: #525252,
363
381
  slug-background: #c6c6c6,
364
382
  slug-background-hover: #e0e0e0,
365
- slug-callout-aura-end: rgba(22, 22, 22, 0),
383
+ slug-callout-aura-end: rgba(255, 255, 255, 0),
366
384
  slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0),
367
385
  slug-callout-aura-end-hover-02: unquote('transparent'),
368
386
  slug-callout-aura-end-selected: rgba(22, 22, 22, 0),
369
- slug-callout-aura-start: rgba(208, 226, 255, 0.2),
387
+ slug-callout-aura-start: rgba(69, 137, 255, 0.1),
370
388
  slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3),
371
389
  slug-callout-aura-start-hover-02: unquote('transparent'),
372
390
  slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2),
391
+ slug-callout-border-01: #4589ff,
392
+ slug-callout-border-02: rgba(166, 200, 255, 0.25),
393
+ slug-callout-caret-bottom: #465060,
394
+ slug-callout-caret-bottom-background: #2d3f5c,
395
+ slug-callout-caret-bottom-background-actions: #253042,
396
+ slug-callout-caret-center: #456fb5,
373
397
  slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85),
374
398
  slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55),
375
399
  slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85),
376
400
  slug-callout-gradient-top: rgba(22, 22, 22, 0.85),
377
401
  slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55),
378
402
  slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85),
403
+ slug-callout-shadow-inner: rgba(69, 137, 255, 0.2),
404
+ slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25),
405
+ slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65),
379
406
  slug-gradient: #8d8d8d
380
407
  linear-gradient(135deg, #f4f4f4 0%, rgba(#ffffff, 0) 100%),
381
408
  slug-gradient-hover: #a8a8a8
@@ -495,20 +522,29 @@ $g100: (
495
522
  skeleton-element: #393939,
496
523
  slug-background: #c6c6c6,
497
524
  slug-background-hover: #e0e0e0,
498
- slug-callout-aura-end: rgba(22, 22, 22, 0),
525
+ slug-callout-aura-end: rgba(255, 255, 255, 0),
499
526
  slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0),
500
527
  slug-callout-aura-end-hover-02: unquote('transparent'),
501
528
  slug-callout-aura-end-selected: rgba(22, 22, 22, 0),
502
- slug-callout-aura-start: rgba(208, 226, 255, 0.2),
529
+ slug-callout-aura-start: rgba(69, 137, 255, 0.1),
503
530
  slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3),
504
531
  slug-callout-aura-start-hover-02: unquote('transparent'),
505
532
  slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2),
533
+ slug-callout-border-01: #4589ff,
534
+ slug-callout-border-02: rgba(166, 200, 255, 0.25),
535
+ slug-callout-caret-bottom: #3d4655,
536
+ slug-callout-caret-bottom-background: #213250,
537
+ slug-callout-caret-bottom-background-actions: #192436,
538
+ slug-callout-caret-center: #3f68af,
506
539
  slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85),
507
540
  slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55),
508
541
  slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85),
509
542
  slug-callout-gradient-top: rgba(22, 22, 22, 0.85),
510
543
  slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55),
511
544
  slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85),
545
+ slug-callout-shadow-inner: rgba(69, 137, 255, 0.2),
546
+ slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25),
547
+ slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65),
512
548
  slug-gradient: #8d8d8d
513
549
  linear-gradient(135deg, #f4f4f4 0%, rgba(#ffffff, 0) 100%),
514
550
  slug-gradient-hover: #a8a8a8
package/scss/generated/_tokens.scss CHANGED
@@ -378,6 +378,37 @@ $ai-gradient-start-02: _get('ai-gradient-start-02') !default;
378
378
  /// The CSS Custom Property for the `ai-gradient-end` token
379
379
  $ai-gradient-end: _get('ai-gradient-end') !default;
380
380
 
381
+ /// The CSS Custom Property for the `slug-callout-shadow-inner` token
382
+ $slug-callout-shadow-inner: _get('slug-callout-shadow-inner') !default;
383
+
384
+ /// The CSS Custom Property for the `slug-callout-shadow-outer-01` token
385
+ $slug-callout-shadow-outer-01: _get('slug-callout-shadow-outer-01') !default;
386
+
387
+ /// The CSS Custom Property for the `slug-callout-shadow-outer-02` token
388
+ $slug-callout-shadow-outer-02: _get('slug-callout-shadow-outer-02') !default;
389
+
390
+ /// The CSS Custom Property for the `slug-callout-border-01` token
391
+ $slug-callout-border-01: _get('slug-callout-border-01') !default;
392
+
393
+ /// The CSS Custom Property for the `slug-callout-border-02` token
394
+ $slug-callout-border-02: _get('slug-callout-border-02') !default;
395
+
396
+ /// The CSS Custom Property for the `slug-callout-caret-center` token
397
+ $slug-callout-caret-center: _get('slug-callout-caret-center') !default;
398
+
399
+ /// The CSS Custom Property for the `slug-callout-caret-bottom` token
400
+ $slug-callout-caret-bottom: _get('slug-callout-caret-bottom') !default;
401
+
402
+ /// The CSS Custom Property for the `slug-callout-caret-bottom-background` token
403
+ $slug-callout-caret-bottom-background: _get(
404
+ 'slug-callout-caret-bottom-background'
405
+ ) !default;
406
+
407
+ /// The CSS Custom Property for the `slug-callout-caret-bottom-background-actions` token
408
+ $slug-callout-caret-bottom-background-actions: _get(
409
+ 'slug-callout-caret-bottom-background-actions'
410
+ ) !default;
411
+
381
412
  /// The CSS Custom Property for the `highlight` token
382
413
  $highlight: _get('highlight') !default;
383
414
 
package/src/g10.js CHANGED
@@ -42,6 +42,7 @@ import {
42
42
  purple60,
43
43
 
44
44
  // Constants
45
+ black,
45
46
  white,
46
47
  whiteHover,
47
48
  rgba,
@@ -212,10 +213,6 @@ export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rg
212
213
  export const slugBackgroundHover = gray60;
213
214
  export const slugGradientHover = `${gray100} linear-gradient(135deg, ${gray20Hover} 0%, rgba(${white}, 0) 100%)`;
214
215
  export const slugHollowHover = gray80Hover;
215
- export const slugCalloutGradientTop = rgba(gray10, 0.85);
216
- export const slugCalloutGradientBottom = rgba(gray20, 0.85);
217
- export const slugCalloutAuraStart = rgba(blue10, 0.6);
218
- export const slugCalloutAuraEnd = rgba(white, 0);
219
216
  export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
220
217
  export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
221
218
  export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
@@ -231,6 +228,28 @@ export const aiGradientStart01 = rgba(coolGray10, 0.5);
231
228
  export const aiGradientStart02 = rgba(blue10, 0.5);
232
229
  export const aiGradientEnd = rgba(white, 0);
233
230
 
231
+ // Phase 2 - new
232
+ export const slugCalloutShadowInner = rgba(blue50, 0.2);
233
+ export const slugCalloutShadowOuter01 = rgba(blue70, 0.25);
234
+ export const slugCalloutShadowOuter02 = rgba(black, 0.1);
235
+
236
+ export const slugCalloutBorder01 = blue40;
237
+ export const slugCalloutBorder02 = blue20;
238
+
239
+ // Changed
240
+ export const slugCalloutAuraStart = rgba(blue50, 0.1);
241
+ export const slugCalloutAuraEnd = rgba(white, 0);
242
+
243
+ // Not used in phase 2 / possibly remove?
244
+ export const slugCalloutGradientTop = rgba(gray10, 0.85);
245
+ export const slugCalloutGradientBottom = rgba(gray20, 0.85);
246
+
247
+ // One off tokens for caret
248
+ export const slugCalloutCaretCenter = '#A7C7FF';
249
+ export const slugCalloutCaretBottom = blue20;
250
+ export const slugCalloutCaretBottomBackgroundActions = '#D2DCEE';
251
+ export const slugCalloutCaretBottomBackground = '#CCDBF8';
252
+
234
253
  export {
235
254
  // Type
236
255
  caption01,
package/src/g100.js CHANGED
@@ -218,10 +218,6 @@ export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgb
218
218
  export const slugBackgroundHover = gray20;
219
219
  export const slugGradientHover = `${gray40} linear-gradient(135deg, ${white} 0%, rgba(${white}, 0) 100%)`;
220
220
  export const slugHollowHover = gray30Hover;
221
- export const slugCalloutGradientTop = rgba(gray100, 0.85);
222
- export const slugCalloutGradientBottom = rgba(gray90, 0.85);
223
- export const slugCalloutAuraStart = rgba(blue20, 0.2);
224
- export const slugCalloutAuraEnd = rgba(gray100, 0);
225
221
  export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
226
222
  export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
227
223
  export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
@@ -237,6 +233,28 @@ export const aiGradientStart01 = rgba(blue20, 0.2);
237
233
  export const aiGradientStart02 = 'transparent';
238
234
  export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
239
235
 
236
+ // Phase 2 - new
237
+ export const slugCalloutShadowInner = rgba(blue50, 0.2);
238
+ export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
239
+ export const slugCalloutShadowOuter02 = rgba(black, 0.65);
240
+
241
+ export const slugCalloutBorder01 = blue50;
242
+ export const slugCalloutBorder02 = rgba(blue30, 0.25);
243
+
244
+ // Changed
245
+ export const slugCalloutAuraStart = rgba(blue50, 0.1);
246
+ export const slugCalloutAuraEnd = rgba(white, 0);
247
+
248
+ // Not used in phase 2 / possibly remove?
249
+ export const slugCalloutGradientTop = rgba(gray100, 0.85);
250
+ export const slugCalloutGradientBottom = rgba(gray90, 0.85);
251
+
252
+ // One off tokens for caret
253
+ export const slugCalloutCaretCenter = '#3F68AF';
254
+ export const slugCalloutCaretBottom = '#3D4655';
255
+ export const slugCalloutCaretBottomBackgroundActions = '#192436';
256
+ export const slugCalloutCaretBottomBackground = '#213250';
257
+
240
258
  export {
241
259
  // Type
242
260
  caption01,
package/src/g90.js CHANGED
@@ -35,6 +35,7 @@ import {
35
35
  // Support
36
36
  blue30,
37
37
  blue50,
38
+ blue80,
38
39
  green40,
39
40
  green50,
40
41
  yellow30,
@@ -218,10 +219,6 @@ export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgb
218
219
  export const slugBackgroundHover = gray20;
219
220
  export const slugGradientHover = `${gray40} linear-gradient(135deg, ${white} 0%, rgba(${white}, 0) 100%)`;
220
221
  export const slugHollowHover = gray30Hover;
221
- export const slugCalloutGradientTop = rgba(gray100, 0.85);
222
- export const slugCalloutGradientBottom = rgba(gray90, 0.85);
223
- export const slugCalloutAuraStart = rgba(blue20, 0.2);
224
- export const slugCalloutAuraEnd = rgba(gray100, 0);
225
222
  export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
226
223
  export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
227
224
  export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
@@ -237,6 +234,28 @@ export const aiGradientStart01 = rgba(blue20, 0.2);
237
234
  export const aiGradientStart02 = 'transparent';
238
235
  export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
239
236
 
237
+ // Phase 2 - new
238
+ export const slugCalloutShadowInner = rgba(blue50, 0.2);
239
+ export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
240
+ export const slugCalloutShadowOuter02 = rgba(black, 0.65);
241
+
242
+ export const slugCalloutBorder01 = blue50;
243
+ export const slugCalloutBorder02 = rgba(blue30, 0.25);
244
+
245
+ // Changed
246
+ export const slugCalloutAuraStart = rgba(blue50, 0.1);
247
+ export const slugCalloutAuraEnd = rgba(white, 0);
248
+
249
+ // Not used in phase 2 / possibly remove?
250
+ export const slugCalloutGradientTop = rgba(gray100, 0.85);
251
+ export const slugCalloutGradientBottom = rgba(gray90, 0.85);
252
+
253
+ // One off tokens for caret
254
+ export const slugCalloutCaretCenter = '#456FB5';
255
+ export const slugCalloutCaretBottom = '#465060';
256
+ export const slugCalloutCaretBottomBackgroundActions = '#253042';
257
+ export const slugCalloutCaretBottomBackground = '#2D3F5C';
258
+
240
259
  export {
241
260
  // Type
242
261
  caption01,
package/src/tokens/v11TokenGroup.js CHANGED
@@ -367,6 +367,17 @@ export const ai = TokenGroup.create({
367
367
  'ai-gradient-start-01',
368
368
  'ai-gradient-start-02',
369
369
  'ai-gradient-end',
370
+ // Phase 2
371
+ 'slug-callout-shadow-inner',
372
+ 'slug-callout-shadow-outer-01',
373
+ 'slug-callout-shadow-outer-02',
374
+ 'slug-callout-border-01',
375
+ 'slug-callout-border-02',
376
+ // Caret tokens
377
+ 'slug-callout-caret-center',
378
+ 'slug-callout-caret-bottom',
379
+ 'slug-callout-caret-bottom-background',
380
+ 'slug-callout-caret-bottom-background-actions',
370
381
  ],
371
382
  });
372
383
 
package/src/white.js CHANGED
@@ -42,6 +42,7 @@ import {
42
42
  purple60,
43
43
 
44
44
  // Constants
45
+ black,
45
46
  white,
46
47
  whiteHover,
47
48
  rgba,
@@ -212,10 +213,6 @@ export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rg
212
213
  export const slugBackgroundHover = gray60;
213
214
  export const slugGradientHover = `${gray100} linear-gradient(135deg, ${gray20Hover} 0%, rgba(${white}, 0) 100%)`;
214
215
  export const slugHollowHover = gray80Hover;
215
- export const slugCalloutGradientTop = rgba(gray10, 0.85);
216
- export const slugCalloutGradientBottom = rgba(gray20, 0.85);
217
- export const slugCalloutAuraStart = rgba(blue10, 0.6);
218
- export const slugCalloutAuraEnd = rgba(white, 0);
219
216
  export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
220
217
  export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
221
218
  export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
@@ -231,6 +228,28 @@ export const aiGradientStart01 = rgba(coolGray10, 0.5);
231
228
  export const aiGradientStart02 = rgba(blue10, 0.5);
232
229
  export const aiGradientEnd = rgba(white, 0);
233
230
 
231
+ // Phase 2 - new
232
+ export const slugCalloutShadowInner = rgba(blue50, 0.2);
233
+ export const slugCalloutShadowOuter01 = rgba(blue70, 0.25);
234
+ export const slugCalloutShadowOuter02 = rgba(black, 0.1);
235
+
236
+ export const slugCalloutBorder01 = blue40;
237
+ export const slugCalloutBorder02 = blue20;
238
+
239
+ // Changed
240
+ export const slugCalloutAuraStart = rgba(blue50, 0.1);
241
+ export const slugCalloutAuraEnd = rgba(white, 0);
242
+
243
+ // Not used in phase 2 / possibly remove?
244
+ export const slugCalloutGradientTop = rgba(gray10, 0.85);
245
+ export const slugCalloutGradientBottom = rgba(gray20, 0.85);
246
+
247
+ // One off tokens for caret
248
+ export const slugCalloutCaretCenter = '#A7C7FF';
249
+ export const slugCalloutCaretBottom = blue20;
250
+ export const slugCalloutCaretBottomBackgroundActions = '#DAE5F8';
251
+ export const slugCalloutCaretBottomBackground = '#D5E5FF';
252
+
234
253
  // Type
235
254
  export {
236
255
  caption01,
package/umd/index.js CHANGED
@@ -693,10 +693,6 @@
693
693
  var slugBackgroundHover$3 = colors$1.gray60;
694
694
  var slugGradientHover$3 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").concat(colors$1.gray20Hover, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
695
695
  var slugHollowHover$3 = colors$1.gray80Hover;
696
- var slugCalloutGradientTop$3 = colors$1.rgba(colors$1.gray10, 0.85);
697
- var slugCalloutGradientBottom$3 = colors$1.rgba(colors$1.gray20, 0.85);
698
- var slugCalloutAuraStart$3 = colors$1.rgba(colors$1.blue10, 0.6);
699
- var slugCalloutAuraEnd$3 = colors$1.rgba(colors$1.white, 0);
700
696
  var slugCalloutGradientTopHover$3 = colors$1.rgba(colors$1.gray20, 0.55);
701
697
  var slugCalloutGradientBottomHover$3 = colors$1.rgba(colors$1.gray20Hover, 0.55);
702
698
  var slugCalloutAuraStartHover01$3 = colors$1.rgba(colors$1.white, 0.5);
@@ -712,6 +708,27 @@
712
708
  var aiGradientStart02$3 = colors$1.rgba(colors$1.blue10, 0.5);
713
709
  var aiGradientEnd$3 = colors$1.rgba(colors$1.white, 0);
714
710
 
711
+ // Phase 2 - new
712
+ var slugCalloutShadowInner$3 = colors$1.rgba(colors$1.blue50, 0.2);
713
+ var slugCalloutShadowOuter01$3 = colors$1.rgba(colors$1.blue70, 0.25);
714
+ var slugCalloutShadowOuter02$3 = colors$1.rgba(colors$1.black, 0.1);
715
+ var slugCalloutBorder01$3 = colors$1.blue40;
716
+ var slugCalloutBorder02$3 = colors$1.blue20;
717
+
718
+ // Changed
719
+ var slugCalloutAuraStart$3 = colors$1.rgba(colors$1.blue50, 0.1);
720
+ var slugCalloutAuraEnd$3 = colors$1.rgba(colors$1.white, 0);
721
+
722
+ // Not used in phase 2 / possibly remove?
723
+ var slugCalloutGradientTop$3 = colors$1.rgba(colors$1.gray10, 0.85);
724
+ var slugCalloutGradientBottom$3 = colors$1.rgba(colors$1.gray20, 0.85);
725
+
726
+ // One off tokens for caret
727
+ var slugCalloutCaretCenter$3 = '#A7C7FF';
728
+ var slugCalloutCaretBottom$3 = colors$1.blue20;
729
+ var slugCalloutCaretBottomBackgroundActions$3 = '#DAE5F8';
730
+ var slugCalloutCaretBottomBackground$3 = '#D5E5FF';
731
+
715
732
  var white$1 = /*#__PURE__*/Object.freeze({
716
733
  __proto__: null,
717
734
  background: background$8,
@@ -819,10 +836,6 @@
819
836
  slugBackgroundHover: slugBackgroundHover$3,
820
837
  slugGradientHover: slugGradientHover$3,
821
838
  slugHollowHover: slugHollowHover$3,
822
- slugCalloutGradientTop: slugCalloutGradientTop$3,
823
- slugCalloutGradientBottom: slugCalloutGradientBottom$3,
824
- slugCalloutAuraStart: slugCalloutAuraStart$3,
825
- slugCalloutAuraEnd: slugCalloutAuraEnd$3,
826
839
  slugCalloutGradientTopHover: slugCalloutGradientTopHover$3,
827
840
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$3,
828
841
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$3,
@@ -836,6 +849,19 @@
836
849
  aiGradientStart01: aiGradientStart01$3,
837
850
  aiGradientStart02: aiGradientStart02$3,
838
851
  aiGradientEnd: aiGradientEnd$3,
852
+ slugCalloutShadowInner: slugCalloutShadowInner$3,
853
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01$3,
854
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02$3,
855
+ slugCalloutBorder01: slugCalloutBorder01$3,
856
+ slugCalloutBorder02: slugCalloutBorder02$3,
857
+ slugCalloutAuraStart: slugCalloutAuraStart$3,
858
+ slugCalloutAuraEnd: slugCalloutAuraEnd$3,
859
+ slugCalloutGradientTop: slugCalloutGradientTop$3,
860
+ slugCalloutGradientBottom: slugCalloutGradientBottom$3,
861
+ slugCalloutCaretCenter: slugCalloutCaretCenter$3,
862
+ slugCalloutCaretBottom: slugCalloutCaretBottom$3,
863
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$3,
864
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$3,
839
865
  caption01: type$2.caption01,
840
866
  caption02: type$2.caption02,
841
867
  label01: type$2.label01,
@@ -1080,10 +1106,6 @@
1080
1106
  var slugBackgroundHover$2 = colors$1.gray60;
1081
1107
  var slugGradientHover$2 = "".concat(colors$1.gray100, " linear-gradient(135deg, ").concat(colors$1.gray20Hover, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
1082
1108
  var slugHollowHover$2 = colors$1.gray80Hover;
1083
- var slugCalloutGradientTop$2 = colors$1.rgba(colors$1.gray10, 0.85);
1084
- var slugCalloutGradientBottom$2 = colors$1.rgba(colors$1.gray20, 0.85);
1085
- var slugCalloutAuraStart$2 = colors$1.rgba(colors$1.blue10, 0.6);
1086
- var slugCalloutAuraEnd$2 = colors$1.rgba(colors$1.white, 0);
1087
1109
  var slugCalloutGradientTopHover$2 = colors$1.rgba(colors$1.gray20, 0.55);
1088
1110
  var slugCalloutGradientBottomHover$2 = colors$1.rgba(colors$1.gray20Hover, 0.55);
1089
1111
  var slugCalloutAuraStartHover01$2 = colors$1.rgba(colors$1.white, 0.5);
@@ -1099,6 +1121,27 @@
1099
1121
  var aiGradientStart02$2 = colors$1.rgba(colors$1.blue10, 0.5);
1100
1122
  var aiGradientEnd$2 = colors$1.rgba(colors$1.white, 0);
1101
1123
 
1124
+ // Phase 2 - new
1125
+ var slugCalloutShadowInner$2 = colors$1.rgba(colors$1.blue50, 0.2);
1126
+ var slugCalloutShadowOuter01$2 = colors$1.rgba(colors$1.blue70, 0.25);
1127
+ var slugCalloutShadowOuter02$2 = colors$1.rgba(colors$1.black, 0.1);
1128
+ var slugCalloutBorder01$2 = colors$1.blue40;
1129
+ var slugCalloutBorder02$2 = colors$1.blue20;
1130
+
1131
+ // Changed
1132
+ var slugCalloutAuraStart$2 = colors$1.rgba(colors$1.blue50, 0.1);
1133
+ var slugCalloutAuraEnd$2 = colors$1.rgba(colors$1.white, 0);
1134
+
1135
+ // Not used in phase 2 / possibly remove?
1136
+ var slugCalloutGradientTop$2 = colors$1.rgba(colors$1.gray10, 0.85);
1137
+ var slugCalloutGradientBottom$2 = colors$1.rgba(colors$1.gray20, 0.85);
1138
+
1139
+ // One off tokens for caret
1140
+ var slugCalloutCaretCenter$2 = '#A7C7FF';
1141
+ var slugCalloutCaretBottom$2 = colors$1.blue20;
1142
+ var slugCalloutCaretBottomBackgroundActions$2 = '#D2DCEE';
1143
+ var slugCalloutCaretBottomBackground$2 = '#CCDBF8';
1144
+
1102
1145
  var g10$1 = /*#__PURE__*/Object.freeze({
1103
1146
  __proto__: null,
1104
1147
  background: background$7,
@@ -1206,10 +1249,6 @@
1206
1249
  slugBackgroundHover: slugBackgroundHover$2,
1207
1250
  slugGradientHover: slugGradientHover$2,
1208
1251
  slugHollowHover: slugHollowHover$2,
1209
- slugCalloutGradientTop: slugCalloutGradientTop$2,
1210
- slugCalloutGradientBottom: slugCalloutGradientBottom$2,
1211
- slugCalloutAuraStart: slugCalloutAuraStart$2,
1212
- slugCalloutAuraEnd: slugCalloutAuraEnd$2,
1213
1252
  slugCalloutGradientTopHover: slugCalloutGradientTopHover$2,
1214
1253
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$2,
1215
1254
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$2,
@@ -1223,6 +1262,19 @@
1223
1262
  aiGradientStart01: aiGradientStart01$2,
1224
1263
  aiGradientStart02: aiGradientStart02$2,
1225
1264
  aiGradientEnd: aiGradientEnd$2,
1265
+ slugCalloutShadowInner: slugCalloutShadowInner$2,
1266
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01$2,
1267
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02$2,
1268
+ slugCalloutBorder01: slugCalloutBorder01$2,
1269
+ slugCalloutBorder02: slugCalloutBorder02$2,
1270
+ slugCalloutAuraStart: slugCalloutAuraStart$2,
1271
+ slugCalloutAuraEnd: slugCalloutAuraEnd$2,
1272
+ slugCalloutGradientTop: slugCalloutGradientTop$2,
1273
+ slugCalloutGradientBottom: slugCalloutGradientBottom$2,
1274
+ slugCalloutCaretCenter: slugCalloutCaretCenter$2,
1275
+ slugCalloutCaretBottom: slugCalloutCaretBottom$2,
1276
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$2,
1277
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$2,
1226
1278
  caption01: type$2.caption01,
1227
1279
  caption02: type$2.caption02,
1228
1280
  label01: type$2.label01,
@@ -1467,10 +1519,6 @@
1467
1519
  var slugBackgroundHover$1 = colors$1.gray20;
1468
1520
  var slugGradientHover$1 = "".concat(colors$1.gray40, " linear-gradient(135deg, ").concat(colors$1.white, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
1469
1521
  var slugHollowHover$1 = colors$1.gray30Hover;
1470
- var slugCalloutGradientTop$1 = colors$1.rgba(colors$1.gray100, 0.85);
1471
- var slugCalloutGradientBottom$1 = colors$1.rgba(colors$1.gray90, 0.85);
1472
- var slugCalloutAuraStart$1 = colors$1.rgba(colors$1.blue20, 0.2);
1473
- var slugCalloutAuraEnd$1 = colors$1.rgba(colors$1.gray100, 0);
1474
1522
  var slugCalloutGradientTopHover$1 = colors$1.rgba(colors$1.gray80, 0.55);
1475
1523
  var slugCalloutGradientBottomHover$1 = colors$1.rgba(colors$1.gray80Hover, 0.55);
1476
1524
  var slugCalloutAuraStartHover01$1 = colors$1.rgba(colors$1.blue20Hover, 0.3);
@@ -1486,6 +1534,27 @@
1486
1534
  var aiGradientStart02$1 = 'transparent';
1487
1535
  var aiGradientEnd$1 = 'rgba(38, 38, 38, 0)';
1488
1536
 
1537
+ // Phase 2 - new
1538
+ var slugCalloutShadowInner$1 = colors$1.rgba(colors$1.blue50, 0.2);
1539
+ var slugCalloutShadowOuter01$1 = colors$1.rgba(colors$1.blue80, 0.25);
1540
+ var slugCalloutShadowOuter02$1 = colors$1.rgba(colors$1.black, 0.65);
1541
+ var slugCalloutBorder01$1 = colors$1.blue50;
1542
+ var slugCalloutBorder02$1 = colors$1.rgba(colors$1.blue30, 0.25);
1543
+
1544
+ // Changed
1545
+ var slugCalloutAuraStart$1 = colors$1.rgba(colors$1.blue50, 0.1);
1546
+ var slugCalloutAuraEnd$1 = colors$1.rgba(colors$1.white, 0);
1547
+
1548
+ // Not used in phase 2 / possibly remove?
1549
+ var slugCalloutGradientTop$1 = colors$1.rgba(colors$1.gray100, 0.85);
1550
+ var slugCalloutGradientBottom$1 = colors$1.rgba(colors$1.gray90, 0.85);
1551
+
1552
+ // One off tokens for caret
1553
+ var slugCalloutCaretCenter$1 = '#456FB5';
1554
+ var slugCalloutCaretBottom$1 = '#465060';
1555
+ var slugCalloutCaretBottomBackgroundActions$1 = '#253042';
1556
+ var slugCalloutCaretBottomBackground$1 = '#2D3F5C';
1557
+
1489
1558
  var g90$1 = /*#__PURE__*/Object.freeze({
1490
1559
  __proto__: null,
1491
1560
  background: background$6,
@@ -1593,10 +1662,6 @@
1593
1662
  slugBackgroundHover: slugBackgroundHover$1,
1594
1663
  slugGradientHover: slugGradientHover$1,
1595
1664
  slugHollowHover: slugHollowHover$1,
1596
- slugCalloutGradientTop: slugCalloutGradientTop$1,
1597
- slugCalloutGradientBottom: slugCalloutGradientBottom$1,
1598
- slugCalloutAuraStart: slugCalloutAuraStart$1,
1599
- slugCalloutAuraEnd: slugCalloutAuraEnd$1,
1600
1665
  slugCalloutGradientTopHover: slugCalloutGradientTopHover$1,
1601
1666
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$1,
1602
1667
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$1,
@@ -1610,6 +1675,19 @@
1610
1675
  aiGradientStart01: aiGradientStart01$1,
1611
1676
  aiGradientStart02: aiGradientStart02$1,
1612
1677
  aiGradientEnd: aiGradientEnd$1,
1678
+ slugCalloutShadowInner: slugCalloutShadowInner$1,
1679
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01$1,
1680
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02$1,
1681
+ slugCalloutBorder01: slugCalloutBorder01$1,
1682
+ slugCalloutBorder02: slugCalloutBorder02$1,
1683
+ slugCalloutAuraStart: slugCalloutAuraStart$1,
1684
+ slugCalloutAuraEnd: slugCalloutAuraEnd$1,
1685
+ slugCalloutGradientTop: slugCalloutGradientTop$1,
1686
+ slugCalloutGradientBottom: slugCalloutGradientBottom$1,
1687
+ slugCalloutCaretCenter: slugCalloutCaretCenter$1,
1688
+ slugCalloutCaretBottom: slugCalloutCaretBottom$1,
1689
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$1,
1690
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$1,
1613
1691
  caption01: type$2.caption01,
1614
1692
  caption02: type$2.caption02,
1615
1693
  label01: type$2.label01,
@@ -1854,10 +1932,6 @@
1854
1932
  var slugBackgroundHover = colors$1.gray20;
1855
1933
  var slugGradientHover = "".concat(colors$1.gray40, " linear-gradient(135deg, ").concat(colors$1.white, " 0%, rgba(").concat(colors$1.white, ", 0) 100%)");
1856
1934
  var slugHollowHover = colors$1.gray30Hover;
1857
- var slugCalloutGradientTop = colors$1.rgba(colors$1.gray100, 0.85);
1858
- var slugCalloutGradientBottom = colors$1.rgba(colors$1.gray90, 0.85);
1859
- var slugCalloutAuraStart = colors$1.rgba(colors$1.blue20, 0.2);
1860
- var slugCalloutAuraEnd = colors$1.rgba(colors$1.gray100, 0);
1861
1935
  var slugCalloutGradientTopHover = colors$1.rgba(colors$1.gray80, 0.55);
1862
1936
  var slugCalloutGradientBottomHover = colors$1.rgba(colors$1.gray80Hover, 0.55);
1863
1937
  var slugCalloutAuraStartHover01 = colors$1.rgba(colors$1.blue20Hover, 0.3);
@@ -1873,6 +1947,27 @@
1873
1947
  var aiGradientStart02 = 'transparent';
1874
1948
  var aiGradientEnd = 'rgba(38, 38, 38, 0)';
1875
1949
 
1950
+ // Phase 2 - new
1951
+ var slugCalloutShadowInner = colors$1.rgba(colors$1.blue50, 0.2);
1952
+ var slugCalloutShadowOuter01 = colors$1.rgba(colors$1.blue80, 0.25);
1953
+ var slugCalloutShadowOuter02 = colors$1.rgba(colors$1.black, 0.65);
1954
+ var slugCalloutBorder01 = colors$1.blue50;
1955
+ var slugCalloutBorder02 = colors$1.rgba(colors$1.blue30, 0.25);
1956
+
1957
+ // Changed
1958
+ var slugCalloutAuraStart = colors$1.rgba(colors$1.blue50, 0.1);
1959
+ var slugCalloutAuraEnd = colors$1.rgba(colors$1.white, 0);
1960
+
1961
+ // Not used in phase 2 / possibly remove?
1962
+ var slugCalloutGradientTop = colors$1.rgba(colors$1.gray100, 0.85);
1963
+ var slugCalloutGradientBottom = colors$1.rgba(colors$1.gray90, 0.85);
1964
+
1965
+ // One off tokens for caret
1966
+ var slugCalloutCaretCenter = '#3F68AF';
1967
+ var slugCalloutCaretBottom = '#3D4655';
1968
+ var slugCalloutCaretBottomBackgroundActions = '#192436';
1969
+ var slugCalloutCaretBottomBackground = '#213250';
1970
+
1876
1971
  var g100$1 = /*#__PURE__*/Object.freeze({
1877
1972
  __proto__: null,
1878
1973
  background: background$5,
@@ -1980,10 +2075,6 @@
1980
2075
  slugBackgroundHover: slugBackgroundHover,
1981
2076
  slugGradientHover: slugGradientHover,
1982
2077
  slugHollowHover: slugHollowHover,
1983
- slugCalloutGradientTop: slugCalloutGradientTop,
1984
- slugCalloutGradientBottom: slugCalloutGradientBottom,
1985
- slugCalloutAuraStart: slugCalloutAuraStart,
1986
- slugCalloutAuraEnd: slugCalloutAuraEnd,
1987
2078
  slugCalloutGradientTopHover: slugCalloutGradientTopHover,
1988
2079
  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover,
1989
2080
  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01,
@@ -1997,6 +2088,19 @@
1997
2088
  aiGradientStart01: aiGradientStart01,
1998
2089
  aiGradientStart02: aiGradientStart02,
1999
2090
  aiGradientEnd: aiGradientEnd,
2091
+ slugCalloutShadowInner: slugCalloutShadowInner,
2092
+ slugCalloutShadowOuter01: slugCalloutShadowOuter01,
2093
+ slugCalloutShadowOuter02: slugCalloutShadowOuter02,
2094
+ slugCalloutBorder01: slugCalloutBorder01,
2095
+ slugCalloutBorder02: slugCalloutBorder02,
2096
+ slugCalloutAuraStart: slugCalloutAuraStart,
2097
+ slugCalloutAuraEnd: slugCalloutAuraEnd,
2098
+ slugCalloutGradientTop: slugCalloutGradientTop,
2099
+ slugCalloutGradientBottom: slugCalloutGradientBottom,
2100
+ slugCalloutCaretCenter: slugCalloutCaretCenter,
2101
+ slugCalloutCaretBottom: slugCalloutCaretBottom,
2102
+ slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions,
2103
+ slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground,
2000
2104
  caption01: type$2.caption01,
2001
2105
  caption02: type$2.caption02,
2002
2106
  label01: type$2.label01,
@@ -4893,7 +4997,11 @@
4893
4997
  var ai = TokenGroup.create({
4894
4998
  name: 'AI',
4895
4999
  properties: ['background'],
4896
- tokens: ['slug-background', 'slug-gradient', 'slug-background-hover', 'slug-gradient-hover', 'slug-hollow-hover', 'slug-callout-gradient-top', 'slug-callout-gradient-bottom', 'slug-callout-aura-start', 'slug-callout-aura-end', 'slug-callout-gradient-top-hover', 'slug-callout-gradient-bottom-hover', 'slug-callout-aura-start-hover-01', 'slug-callout-aura-start-hover-02', 'slug-callout-aura-end-hover-01', 'slug-callout-aura-end-hover-02', 'slug-callout-gradient-top-selected', 'slug-callout-gradient-bottom-selected', 'slug-callout-aura-start-selected', 'slug-callout-aura-end-selected', 'ai-gradient-start-01', 'ai-gradient-start-02', 'ai-gradient-end']
5000
+ tokens: ['slug-background', 'slug-gradient', 'slug-background-hover', 'slug-gradient-hover', 'slug-hollow-hover', 'slug-callout-gradient-top', 'slug-callout-gradient-bottom', 'slug-callout-aura-start', 'slug-callout-aura-end', 'slug-callout-gradient-top-hover', 'slug-callout-gradient-bottom-hover', 'slug-callout-aura-start-hover-01', 'slug-callout-aura-start-hover-02', 'slug-callout-aura-end-hover-01', 'slug-callout-aura-end-hover-02', 'slug-callout-gradient-top-selected', 'slug-callout-gradient-bottom-selected', 'slug-callout-aura-start-selected', 'slug-callout-aura-end-selected', 'ai-gradient-start-01', 'ai-gradient-start-02', 'ai-gradient-end',
5001
+ // Phase 2
5002
+ 'slug-callout-shadow-inner', 'slug-callout-shadow-outer-01', 'slug-callout-shadow-outer-02', 'slug-callout-border-01', 'slug-callout-border-02',
5003
+ // Caret tokens
5004
+ 'slug-callout-caret-center', 'slug-callout-caret-bottom', 'slug-callout-caret-bottom-background', 'slug-callout-caret-bottom-background-actions']
4897
5005
  });
4898
5006
  var group = TokenGroup.create({
4899
5007
  name: 'All',
@@ -5431,12 +5539,21 @@
5431
5539
  exports.slugCalloutAuraStartHover01 = slugCalloutAuraStartHover01$3;
5432
5540
  exports.slugCalloutAuraStartHover02 = slugCalloutAuraStartHover02$3;
5433
5541
  exports.slugCalloutAuraStartSelected = slugCalloutAuraStartSelected$3;
5542
+ exports.slugCalloutBorder01 = slugCalloutBorder01$3;
5543
+ exports.slugCalloutBorder02 = slugCalloutBorder02$3;
5544
+ exports.slugCalloutCaretBottom = slugCalloutCaretBottom$3;
5545
+ exports.slugCalloutCaretBottomBackground = slugCalloutCaretBottomBackground$3;
5546
+ exports.slugCalloutCaretBottomBackgroundActions = slugCalloutCaretBottomBackgroundActions$3;
5547
+ exports.slugCalloutCaretCenter = slugCalloutCaretCenter$3;
5434
5548
  exports.slugCalloutGradientBottom = slugCalloutGradientBottom$3;
5435
5549
  exports.slugCalloutGradientBottomHover = slugCalloutGradientBottomHover$3;
5436
5550
  exports.slugCalloutGradientBottomSelected = slugCalloutGradientBottomSelected$3;
5437
5551
  exports.slugCalloutGradientTop = slugCalloutGradientTop$3;
5438
5552
  exports.slugCalloutGradientTopHover = slugCalloutGradientTopHover$3;
5439
5553
  exports.slugCalloutGradientTopSelected = slugCalloutGradientTopSelected$3;
5554
+ exports.slugCalloutShadowInner = slugCalloutShadowInner$3;
5555
+ exports.slugCalloutShadowOuter01 = slugCalloutShadowOuter01$3;
5556
+ exports.slugCalloutShadowOuter02 = slugCalloutShadowOuter02$3;
5440
5557
  exports.slugGradient = slugGradient$3;
5441
5558
  exports.slugGradientHover = slugGradientHover$3;
5442
5559
  exports.slugHollowHover = slugHollowHover$3;