polaris_tokens 2.15.0 → 2.20.0

data/dist-modern/palette/mfp-ui.light.json

@@ -0,0 +1,129 @@
+{
+  "background": "rgb(246, 246, 247)",
+  "backgroundHovered": "rgb(241, 242, 243)",
+  "backgroundPressed": "rgb(237, 238, 239)",
+  "backgroundSelected": "rgb(237, 238, 239)",
+  "surface": "rgb(255, 255, 255)",
+  "surfaceNeutral": "rgb(228, 229, 231)",
+  "surfaceNeutralHovered": "rgb(219, 221, 223)",
+  "surfaceNeutralPressed": "rgb(201, 204, 208)",
+  "surfaceNeutralDisabled": "rgb(241, 242, 243)",
+  "surfaceNeutralSubdued": "rgb(246, 246, 247)",
+  "surfaceSubdued": "rgb(250, 251, 251)",
+  "surfaceDisabled": "rgb(250, 251, 251)",
+  "surfaceHovered": "rgb(246, 246, 247)",
+  "surfacePressed": "rgb(241, 242, 243)",
+  "surfaceDepressed": "rgb(237, 238, 239)",
+  "backdrop": "rgba(0, 0, 0, 0.5)",
+  "overlay": "rgba(255, 255, 255, 0.5)",
+  "shadowFromDimLight": "rgba(0, 0, 0, 0.2)",
+  "shadowFromAmbientLight": "rgba(23, 24, 24, 0.05)",
+  "shadowFromDirectLight": "rgba(0, 0, 0, 0.15)",
+  "hintFromDirectLight": "rgba(0, 0, 0, 0.15)",
+  "onSurfaceBackground": "rgb(241, 242, 243)",
+  "border": "rgb(140, 145, 150)",
+  "borderNeutralSubdued": "rgb(186, 191, 195)",
+  "borderHovered": "rgb(153, 158, 164)",
+  "borderDisabled": "rgb(210, 213, 216)",
+  "borderSubdued": "rgb(201, 204, 207)",
+  "borderDepressed": "rgb(87, 89, 89)",
+  "borderShadow": "rgb(174, 180, 185)",
+  "borderShadowSubdued": "rgb(186, 191, 196)",
+  "divider": "rgb(225, 227, 229)",
+  "icon": "rgb(92, 95, 98)",
+  "iconHovered": "rgb(26, 28, 29)",
+  "iconPressed": "rgb(68, 71, 74)",
+  "iconDisabled": "rgb(186, 190, 195)",
+  "iconSubdued": "rgb(140, 145, 150)",
+  "text": "rgb(32, 34, 35)",
+  "textDisabled": "rgb(140, 145, 150)",
+  "textSubdued": "rgb(109, 113, 117)",
+  "interactive": "rgb(44, 110, 203)",
+  "interactiveDisabled": "rgb(189, 193, 204)",
+  "interactiveHovered": "rgb(31, 81, 153)",
+  "interactivePressed": "rgb(16, 50, 98)",
+  "focused": "rgb(69, 143, 255)",
+  "surfaceSelected": "rgb(242, 247, 254)",
+  "surfaceSelectedHovered": "rgb(237, 244, 254)",
+  "surfaceSelectedPressed": "rgb(229, 239, 253)",
+  "iconOnInteractive": "rgb(255, 255, 255)",
+  "textOnInteractive": "rgb(255, 255, 255)",
+  "actionSecondary": "rgb(255, 255, 255)",
+  "actionSecondaryDisabled": "rgb(255, 255, 255)",
+  "actionSecondaryHovered": "rgb(246, 246, 247)",
+  "actionSecondaryPressed": "rgb(241, 242, 243)",
+  "actionSecondaryDepressed": "rgb(109, 113, 117)",
+  "actionPrimary": "rgb(46, 113, 191)",
+  "actionPrimaryDisabled": "rgb(241, 241, 241)",
+  "actionPrimaryHovered": "rgb(39, 98, 166)",
+  "actionPrimaryPressed": "rgb(32, 83, 143)",
+  "actionPrimaryDepressed": "rgb(18, 53, 95)",
+  "iconOnPrimary": "rgb(255, 255, 255)",
+  "textOnPrimary": "rgb(255, 255, 255)",
+  "textPrimary": "rgb(44, 109, 185)",
+  "textPrimaryHovered": "rgb(38, 95, 162)",
+  "textPrimaryPressed": "rgb(31, 81, 139)",
+  "surfacePrimarySelected": "rgb(246, 246, 248)",
+  "surfacePrimarySelectedHovered": "rgb(196, 201, 214)",
+  "surfacePrimarySelectedPressed": "rgb(175, 182, 199)",
+  "borderCritical": "rgb(253, 87, 73)",
+  "borderCriticalSubdued": "rgb(224, 179, 178)",
+  "borderCriticalDisabled": "rgb(255, 167, 163)",
+  "iconCritical": "rgb(215, 44, 13)",
+  "surfaceCritical": "rgb(254, 211, 209)",
+  "surfaceCriticalSubdued": "rgb(255, 244, 244)",
+  "surfaceCriticalSubduedHovered": "rgb(255, 240, 240)",
+  "surfaceCriticalSubduedPressed": "rgb(255, 233, 232)",
+  "surfaceCriticalSubduedDepressed": "rgb(254, 188, 185)",
+  "textCritical": "rgb(215, 44, 13)",
+  "actionCritical": "rgb(216, 44, 13)",
+  "actionCriticalDisabled": "rgb(241, 241, 241)",
+  "actionCriticalHovered": "rgb(188, 34, 0)",
+  "actionCriticalPressed": "rgb(162, 27, 0)",
+  "actionCriticalDepressed": "rgb(108, 15, 0)",
+  "iconOnCritical": "rgb(255, 255, 255)",
+  "textOnCritical": "rgb(255, 255, 255)",
+  "interactiveCritical": "rgb(216, 44, 13)",
+  "interactiveCriticalDisabled": "rgb(253, 147, 141)",
+  "interactiveCriticalHovered": "rgb(205, 41, 12)",
+  "interactiveCriticalPressed": "rgb(103, 15, 3)",
+  "borderWarning": "rgb(185, 137, 0)",
+  "borderWarningSubdued": "rgb(225, 184, 120)",
+  "iconWarning": "rgb(185, 137, 0)",
+  "surfaceWarning": "rgb(255, 215, 157)",
+  "surfaceWarningSubdued": "rgb(255, 245, 234)",
+  "surfaceWarningSubduedHovered": "rgb(255, 242, 226)",
+  "surfaceWarningSubduedPressed": "rgb(255, 235, 211)",
+  "textWarning": "rgb(145, 106, 0)",
+  "borderHighlight": "rgb(68, 157, 167)",
+  "borderHighlightSubdued": "rgb(152, 198, 205)",
+  "iconHighlight": "rgb(0, 160, 172)",
+  "surfaceHighlight": "rgb(164, 232, 242)",
+  "surfaceHighlightSubdued": "rgb(235, 249, 252)",
+  "surfaceHighlightSubduedHovered": "rgb(228, 247, 250)",
+  "surfaceHighlightSubduedPressed": "rgb(213, 243, 248)",
+  "textHighlight": "rgb(52, 124, 132)",
+  "borderSuccess": "rgb(0, 164, 124)",
+  "borderSuccessSubdued": "rgb(149, 201, 180)",
+  "iconSuccess": "rgb(0, 127, 95)",
+  "surfaceSuccess": "rgb(174, 233, 209)",
+  "surfaceSuccessSubdued": "rgb(241, 248, 245)",
+  "surfaceSuccessSubduedHovered": "rgb(236, 246, 241)",
+  "surfaceSuccessSubduedPressed": "rgb(226, 241, 234)",
+  "textSuccess": "rgb(0, 128, 96)",
+  "decorativeOneIcon": "rgb(126, 87, 0)",
+  "decorativeOneSurface": "rgb(255, 201, 107)",
+  "decorativeOneText": "rgb(61, 40, 0)",
+  "decorativeTwoIcon": "rgb(175, 41, 78)",
+  "decorativeTwoSurface": "rgb(255, 196, 176)",
+  "decorativeTwoText": "rgb(73, 11, 28)",
+  "decorativeThreeIcon": "rgb(0, 109, 65)",
+  "decorativeThreeSurface": "rgb(146, 230, 181)",
+  "decorativeThreeText": "rgb(0, 47, 25)",
+  "decorativeFourIcon": "rgb(0, 106, 104)",
+  "decorativeFourSurface": "rgb(145, 224, 214)",
+  "decorativeFourText": "rgb(0, 45, 45)",
+  "decorativeFiveIcon": "rgb(174, 43, 76)",
+  "decorativeFiveSurface": "rgb(253, 201, 208)",
+  "decorativeFiveText": "rgb(79, 14, 31)"
+}

data/dist-modern/palette/mfp-ui.light.polaris.custom-properties.css

@@ -0,0 +1,129 @@
+:root {
+  --p-background: rgb(246, 246, 247);
+  --p-background-hovered: rgb(241, 242, 243);
+  --p-background-pressed: rgb(237, 238, 239);
+  --p-background-selected: rgb(237, 238, 239);
+  --p-surface: rgb(255, 255, 255);
+  --p-surface-neutral: rgb(228, 229, 231);
+  --p-surface-neutral-hovered: rgb(219, 221, 223);
+  --p-surface-neutral-pressed: rgb(201, 204, 208);
+  --p-surface-neutral-disabled: rgb(241, 242, 243);
+  --p-surface-neutral-subdued: rgb(246, 246, 247);
+  --p-surface-subdued: rgb(250, 251, 251);
+  --p-surface-disabled: rgb(250, 251, 251);
+  --p-surface-hovered: rgb(246, 246, 247);
+  --p-surface-pressed: rgb(241, 242, 243);
+  --p-surface-depressed: rgb(237, 238, 239);
+  --p-backdrop: rgba(0, 0, 0, 0.5);
+  --p-overlay: rgba(255, 255, 255, 0.5);
+  --p-shadow-from-dim-light: rgba(0, 0, 0, 0.2);
+  --p-shadow-from-ambient-light: rgba(23, 24, 24, 0.05);
+  --p-shadow-from-direct-light: rgba(0, 0, 0, 0.15);
+  --p-hint-from-direct-light: rgba(0, 0, 0, 0.15);
+  --p-on-surface-background: rgb(241, 242, 243);
+  --p-border: rgb(140, 145, 150);
+  --p-border-neutral-subdued: rgb(186, 191, 195);
+  --p-border-hovered: rgb(153, 158, 164);
+  --p-border-disabled: rgb(210, 213, 216);
+  --p-border-subdued: rgb(201, 204, 207);
+  --p-border-depressed: rgb(87, 89, 89);
+  --p-border-shadow: rgb(174, 180, 185);
+  --p-border-shadow-subdued: rgb(186, 191, 196);
+  --p-divider: rgb(225, 227, 229);
+  --p-icon: rgb(92, 95, 98);
+  --p-icon-hovered: rgb(26, 28, 29);
+  --p-icon-pressed: rgb(68, 71, 74);
+  --p-icon-disabled: rgb(186, 190, 195);
+  --p-icon-subdued: rgb(140, 145, 150);
+  --p-text: rgb(32, 34, 35);
+  --p-text-disabled: rgb(140, 145, 150);
+  --p-text-subdued: rgb(109, 113, 117);
+  --p-interactive: rgb(44, 110, 203);
+  --p-interactive-disabled: rgb(189, 193, 204);
+  --p-interactive-hovered: rgb(31, 81, 153);
+  --p-interactive-pressed: rgb(16, 50, 98);
+  --p-focused: rgb(69, 143, 255);
+  --p-surface-selected: rgb(242, 247, 254);
+  --p-surface-selected-hovered: rgb(237, 244, 254);
+  --p-surface-selected-pressed: rgb(229, 239, 253);
+  --p-icon-on-interactive: rgb(255, 255, 255);
+  --p-text-on-interactive: rgb(255, 255, 255);
+  --p-action-secondary: rgb(255, 255, 255);
+  --p-action-secondary-disabled: rgb(255, 255, 255);
+  --p-action-secondary-hovered: rgb(246, 246, 247);
+  --p-action-secondary-pressed: rgb(241, 242, 243);
+  --p-action-secondary-depressed: rgb(109, 113, 117);
+  --p-action-primary: rgb(46, 113, 191);
+  --p-action-primary-disabled: rgb(241, 241, 241);
+  --p-action-primary-hovered: rgb(39, 98, 166);
+  --p-action-primary-pressed: rgb(32, 83, 143);
+  --p-action-primary-depressed: rgb(18, 53, 95);
+  --p-icon-on-primary: rgb(255, 255, 255);
+  --p-text-on-primary: rgb(255, 255, 255);
+  --p-text-primary: rgb(44, 109, 185);
+  --p-text-primary-hovered: rgb(38, 95, 162);
+  --p-text-primary-pressed: rgb(31, 81, 139);
+  --p-surface-primary-selected: rgb(246, 246, 248);
+  --p-surface-primary-selected-hovered: rgb(196, 201, 214);
+  --p-surface-primary-selected-pressed: rgb(175, 182, 199);
+  --p-border-critical: rgb(253, 87, 73);
+  --p-border-critical-subdued: rgb(224, 179, 178);
+  --p-border-critical-disabled: rgb(255, 167, 163);
+  --p-icon-critical: rgb(215, 44, 13);
+  --p-surface-critical: rgb(254, 211, 209);
+  --p-surface-critical-subdued: rgb(255, 244, 244);
+  --p-surface-critical-subdued-hovered: rgb(255, 240, 240);
+  --p-surface-critical-subdued-pressed: rgb(255, 233, 232);
+  --p-surface-critical-subdued-depressed: rgb(254, 188, 185);
+  --p-text-critical: rgb(215, 44, 13);
+  --p-action-critical: rgb(216, 44, 13);
+  --p-action-critical-disabled: rgb(241, 241, 241);
+  --p-action-critical-hovered: rgb(188, 34, 0);
+  --p-action-critical-pressed: rgb(162, 27, 0);
+  --p-action-critical-depressed: rgb(108, 15, 0);
+  --p-icon-on-critical: rgb(255, 255, 255);
+  --p-text-on-critical: rgb(255, 255, 255);
+  --p-interactive-critical: rgb(216, 44, 13);
+  --p-interactive-critical-disabled: rgb(253, 147, 141);
+  --p-interactive-critical-hovered: rgb(205, 41, 12);
+  --p-interactive-critical-pressed: rgb(103, 15, 3);
+  --p-border-warning: rgb(185, 137, 0);
+  --p-border-warning-subdued: rgb(225, 184, 120);
+  --p-icon-warning: rgb(185, 137, 0);
+  --p-surface-warning: rgb(255, 215, 157);
+  --p-surface-warning-subdued: rgb(255, 245, 234);
+  --p-surface-warning-subdued-hovered: rgb(255, 242, 226);
+  --p-surface-warning-subdued-pressed: rgb(255, 235, 211);
+  --p-text-warning: rgb(145, 106, 0);
+  --p-border-highlight: rgb(68, 157, 167);
+  --p-border-highlight-subdued: rgb(152, 198, 205);
+  --p-icon-highlight: rgb(0, 160, 172);
+  --p-surface-highlight: rgb(164, 232, 242);
+  --p-surface-highlight-subdued: rgb(235, 249, 252);
+  --p-surface-highlight-subdued-hovered: rgb(228, 247, 250);
+  --p-surface-highlight-subdued-pressed: rgb(213, 243, 248);
+  --p-text-highlight: rgb(52, 124, 132);
+  --p-border-success: rgb(0, 164, 124);
+  --p-border-success-subdued: rgb(149, 201, 180);
+  --p-icon-success: rgb(0, 127, 95);
+  --p-surface-success: rgb(174, 233, 209);
+  --p-surface-success-subdued: rgb(241, 248, 245);
+  --p-surface-success-subdued-hovered: rgb(236, 246, 241);
+  --p-surface-success-subdued-pressed: rgb(226, 241, 234);
+  --p-text-success: rgb(0, 128, 96);
+  --p-decorative-one-icon: rgb(126, 87, 0);
+  --p-decorative-one-surface: rgb(255, 201, 107);
+  --p-decorative-one-text: rgb(61, 40, 0);
+  --p-decorative-two-icon: rgb(175, 41, 78);
+  --p-decorative-two-surface: rgb(255, 196, 176);
+  --p-decorative-two-text: rgb(73, 11, 28);
+  --p-decorative-three-icon: rgb(0, 109, 65);
+  --p-decorative-three-surface: rgb(146, 230, 181);
+  --p-decorative-three-text: rgb(0, 47, 25);
+  --p-decorative-four-icon: rgb(0, 106, 104);
+  --p-decorative-four-surface: rgb(145, 224, 214);
+  --p-decorative-four-text: rgb(0, 45, 45);
+  --p-decorative-five-icon: rgb(174, 43, 76);
+  --p-decorative-five-surface: rgb(253, 201, 208);
+  --p-decorative-five-text: rgb(79, 14, 31);
+}

data/dist-modern/theme/base.json

@@ -9,4 +9,4 @@
   "highlight": "#5bcdda",
   "success": "#008060",
   "decorative": "#ffc96b"
-}
+}

data/dist-modern/theme/mfp-ui.json

@@ -0,0 +1,12 @@
+{
+  "surface": "#111213",
+  "onSurface": "#111213",
+  "interactive": "#2e72d2",
+  "secondary": "#111213",
+  "primary": "#2864aa",
+  "critical": "#d82c0d",
+  "warning": "#ffc453",
+  "highlight": "#5bcdda",
+  "success": "#008060",
+  "decorative": "#ffc96b"
+}

data/dist/color-filters.color-map.scss

@@ -137,12 +137,4 @@ $polaris-color-filters: (
   'white': (
     'base': brightness(0) saturate(100%) invert(100%),
   ),
-  'icon': (
-    'base': brightness(0) saturate(100%) invert(36%) sepia(13%) saturate(137%)
-      hue-rotate(169deg) brightness(95%) contrast(87%),
-  ),
-  'action': (
-    'base': brightness(0) saturate(100%) invert(20%) sepia(59%) saturate(5557%)
-      hue-rotate(162deg) brightness(95%) contrast(101%),
-  ),
 );

data/dist/color-filters.map.scss

@@ -229,4 +229,12 @@ $polaris-color-filters-map: (
   'color-white': (
     brightness(0) saturate(100%) invert(100%),
   ),
+  'icon': (
+    'base': brightness(0) saturate(100%) invert(36%) sepia(13%) saturate(137%)
+      hue-rotate(169deg) brightness(95%) contrast(87%),
+  ),
+  'action': (
+    'base': brightness(0) saturate(100%) invert(20%) sepia(59%) saturate(5557%)
+      hue-rotate(162deg) brightness(95%) contrast(101%),
+  ),
 );

data/dist/index.common.js

@@ -71,6 +71,6 @@ module.exports = {
   spacingLoose: '20px',
   spacingExtraLoose: '32px',
   fontStackBase:
-    "-apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif",
+    "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
   fontStackMonospace: "Monaco, Consolas, 'Lucida Console', monospace",
 };

data/dist/index.custom-properties.css

@@ -70,7 +70,7 @@
   --spacing-base: 16px;
   --spacing-loose: 20px;
   --spacing-extra-loose: 32px;
-  --font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', Roboto,
-    'Segoe UI', 'Helvetica Neue', sans-serif;
+  --font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco',
+    'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
   --font-stack-monospace: Monaco, Consolas, 'Lucida Console', monospace;
 }

data/dist/index.d.ts

@@ -63,7 +63,7 @@ declare interface Tokens {
   durationSlow: 300;
   durationSlower: 400;
   durationSlowest: 500;
-  fontStackBase: "-apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif";
+  fontStackBase: "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
   fontStackMonospace: "Monaco, Consolas, 'Lucida Console', monospace";
   spacingBase: "16px";
   spacingBaseTight: "12px";

data/dist/index.json

@@ -70,6 +70,6 @@
   "spacing-base": "16px",
   "spacing-loose": "20px",
   "spacing-extra-loose": "32px",
-  "font-stack-base": "-apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif",
+  "font-stack-base": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
   "font-stack-monospace": "Monaco, Consolas, 'Lucida Console', monospace"
 }

data/dist/index.map.scss

@@ -216,8 +216,8 @@ $polaris-index-map: (
     -apple-system,
     BlinkMacSystemFont,
     'San Francisco',
-    Roboto,
     'Segoe UI',
+    Roboto,
     'Helvetica Neue',
     sans-serif,
   ),

data/dist/index.raw.json

@@ -677,8 +677,8 @@
       "type": "font-family",
       "category": "font-family",
       "name": "font-stack-base",
-      "value": "-apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif",
-      "originalValue": "-apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif"
+      "value": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+      "originalValue": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
     },
     "font-stack-monospace": {
       "type": "font-family",

data/dist/index.scss

@@ -69,6 +69,6 @@ $spacing-base-tight: 12px;
 $spacing-base: 16px;
 $spacing-loose: 20px;
 $spacing-extra-loose: 32px;
-$font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', Roboto,
-  'Segoe UI', 'Helvetica Neue', sans-serif;
+$font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI',
+  Roboto, 'Helvetica Neue', sans-serif;
 $font-stack-monospace: Monaco, Consolas, 'Lucida Console', monospace;

data/dist/typography.common.js

@@ -1,5 +1,5 @@
 module.exports = {
   fontStackBase:
-    "-apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif",
+    "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
   fontStackMonospace: "Monaco, Consolas, 'Lucida Console', monospace",
 };

data/dist/typography.custom-properties.css

@@ -1,5 +1,5 @@
 :root {
-  --font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', Roboto,
-    'Segoe UI', 'Helvetica Neue', sans-serif;
+  --font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco',
+    'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
   --font-stack-monospace: Monaco, Consolas, 'Lucida Console', monospace;
 }

data/dist/typography.json

@@ -1,4 +1,4 @@
 {
-  "font-stack-base": "-apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif",
+  "font-stack-base": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
   "font-stack-monospace": "Monaco, Consolas, 'Lucida Console', monospace"
 }

data/dist/typography.map.scss

@@ -3,8 +3,8 @@ $polaris-typography-map: (
     -apple-system,
     BlinkMacSystemFont,
     'San Francisco',
-    Roboto,
     'Segoe UI',
+    Roboto,
     'Helvetica Neue',
     sans-serif,
   ),

data/dist/typography.raw.json

@@ -5,8 +5,8 @@
       "type": "font-family",
       "category": "font-family",
       "name": "font-stack-base",
-      "value": "-apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif",
-      "originalValue": "-apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif"
+      "value": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+      "originalValue": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
     },
     "font-stack-monospace": {
       "type": "font-family",

data/dist/typography.scss

@@ -1,3 +1,3 @@
-$font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', Roboto,
-  'Segoe UI', 'Helvetica Neue', sans-serif;
+$font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI',
+  Roboto, 'Helvetica Neue', sans-serif;
 $font-stack-monospace: Monaco, Consolas, 'Lucida Console', monospace;

data/lib/polaris_tokens/rails/engine.rb

@@ -3,6 +3,7 @@ module PolarisTokens
     class Engine < ::Rails::Engine
       initializer 'polaris.tokens' do |app|
         config.assets.paths << PolarisTokens.root.join('dist')
+        config.assets.paths << PolarisTokens.root.join('dist-modern')
       end
     end
   end