@neo4j-ndl/base 4.19.0 → 4.20.1-alpha.b78fc61

package/lib/tokens/css/tokens.css

@@ -63,6 +63,7 @@
   --code-dark-property: #ffaa97ff;
   --content-extra-light-max-width: 768px;
   --content-light-max-width: 1024px;
+  --content-medium-max-width: 1280px;
   --content-heavy-max-width: 1680px;
   --content-max-max-width: 1920px;
   --categorical-1: #55bdc5ff;
@@ -215,6 +216,20 @@
   --palette-neutral-70: #212325ff;
   --palette-neutral-75: #1a1b1dff;
   --palette-neutral-80: #09090aff;
+  --palette-neutral-12-5: #fafbfbff;
+  --palette-neutral-17-5: #ecedeeff;
+  --palette-neutral-22-5: #d9daddff;
+  --palette-neutral-27-5: #c5c8ccff;
+  --palette-neutral-32-5: #b2b5bbff;
+  --palette-neutral-37-5: #9fa3aaff;
+  --palette-neutral-42-5: #8b9199ff;
+  --palette-neutral-47-5: #787e87ff;
+  --palette-neutral-52-5: #676c74ff;
+  --palette-neutral-57-5: #565a61ff;
+  --palette-neutral-62-5: #45484eff;
+  --palette-neutral-67-5: #2f3135ff;
+  --palette-neutral-72-5: #1e1f21ff;
+  --palette-neutral-77-5: #121214ff;
   --palette-beige-10: #fffcf4ff;
   --palette-beige-20: #fff7e3ff;
   --palette-beige-30: #f2ead4ff;
@@ -244,23 +259,26 @@
   --space-48: 48px;
   --space-64: 64px;
   --theme-dark-box-shadow-raised: 0px 1px 2px 0px rgb(from #09090aff r g b / 0.50); /** Used for small components that need sharper shadows to illustrate elevation. */
-  --theme-dark-box-shadow-overlay: 0px 8px 20px 0px rgb(from #09090aff r g b / 0.50); /** Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector */
+  --theme-dark-box-shadow-overlay: 0 -1px 0 0 rgba(255, 255, 255, 0.10) inset, 0 1px 2px 0 rgba(0, 0, 0, 0.20), 0 4px 8px 0 rgba(0, 0, 0, 0.40); /** Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector */
   --theme-dark-color-neutral-text-weakest: #818790ff; /** Should be used mainly for disabled text */
   --theme-dark-color-neutral-text-weaker: #a8acb2ff; /** Should be used sparsely and mainly for headers and subtitles to differentiate from input text */
   --theme-dark-color-neutral-text-weak: #cfd1d4ff; /** Used for labels, icon color and descriptions */
   --theme-dark-color-neutral-text-default: #f5f6f6ff; /** Used for all default text */
   --theme-dark-color-neutral-text-inverse: #1a1b1dff; /** Default text on Neutral-bg-strongest or other dark backgrounds */
+  --theme-dark-color-neutral-text-static-light: #ffffffff; /** Used for static light text */
+  --theme-dark-color-neutral-text-static-dark: #1a1b1dff; /** Used for static dark text */
   --theme-dark-color-neutral-icon: #cfd1d4ff; /** Used as a default neutral icon color */
-  --theme-dark-color-neutral-bg-weak: #212325ff; /** Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default */
-  --theme-dark-color-neutral-bg-default: #1a1b1dff; /** Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak */
+  --theme-dark-color-neutral-bg-weak: #1a1b1dff; /** Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default */
+  --theme-dark-color-neutral-bg-default: #121214ff; /** Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak */
   --theme-dark-color-neutral-bg-strong: #3c3f44ff; /** Use sparsely, mainly included in some component states */
   --theme-dark-color-neutral-bg-stronger: #6f757eff;
   --theme-dark-color-neutral-bg-strongest: #f5f6f6ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */
   --theme-dark-color-neutral-bg-status: #a8acb2ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */
   --theme-dark-color-neutral-bg-on-bg-weak: #81879014;
-  --theme-dark-color-neutral-border-weak: #3c3f44ff; /** Used for light borders such as dividers and tables as well as some components such as context menu and code block to make them stand out more from the background */
-  --theme-dark-color-neutral-border-strong: #5e636aff; /** Used for components that are outlined and need to stand out such as text fields, search fields, drop-downs, buttons, checkboxes and radio buttons */
-  --theme-dark-color-neutral-border-strongest: #bbbec3ff;
+  --theme-dark-color-neutral-border-weaker: #212325ff;
+  --theme-dark-color-neutral-border-weak: #2f3135ff; /** Used for light borders such as dividers and tables as well as some components such as context menu and code block to make them stand out more from the background */
+  --theme-dark-color-neutral-border-strong: #45484eff; /** Used for components that are outlined and need to stand out such as text fields, search fields, drop-downs, buttons, checkboxes and radio buttons */
+  --theme-dark-color-neutral-border-strongest: #6f757eff;
   --theme-dark-color-neutral-hover: #959aa11a; /** Used for neutral hover states on components */
   --theme-dark-color-neutral-pressed: #959aa133; /** Used for neutral pressed states on components */
   --theme-dark-color-primary-text: #8fe3e8ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */
@@ -269,24 +287,24 @@
   --theme-dark-color-primary-bg-strong: #8fe3e8ff; /** Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors */
   --theme-dark-color-primary-bg-status: #5db3bfff;
   --theme-dark-color-primary-bg-selected: #262f31ff;
-  --theme-dark-color-primary-border-strong: #8fe3e8ff; /** Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard */
+  --theme-dark-color-primary-border-strong: #c3f8fbff; /** Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard */
   --theme-dark-color-primary-border-weak: #02507bff; /** Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background */
   --theme-dark-color-primary-focus: #5db3bfff; /** Used for all focused states */
   --theme-dark-color-primary-hover-weak: #8fe3e814; /** Used for hover states where the background is either transparent or use Neutral-bg-weak */
-  --theme-dark-color-primary-hover-strong: #5db3bfff; /** Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */
+  --theme-dark-color-primary-hover-strong: #5cc3c9ff; /** Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */
   --theme-dark-color-primary-pressed-weak: #8fe3e81f; /** Used for pressed states where the background is either transparent or use Neutral-bg-weak */
-  --theme-dark-color-primary-pressed-strong: #4c99a4ff; /** Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */
+  --theme-dark-color-primary-pressed-strong: #5cc3c9ff; /** Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */
   --theme-dark-color-danger-text: #ffaa97ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */
   --theme-dark-color-danger-icon: #ffaa97ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */
   --theme-dark-color-danger-bg-strong: #ffaa97ff; /** Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states */
   --theme-dark-color-danger-bg-weak: #432520ff; /** Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags */
   --theme-dark-color-danger-bg-status: #f96746ff;
-  --theme-dark-color-danger-border-strong: #ffaa97ff; /** Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels */
+  --theme-dark-color-danger-border-strong: #ffd7d2ff; /** Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels */
   --theme-dark-color-danger-border-weak: #730e00ff; /** Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background */
   --theme-dark-color-danger-hover-weak: #ffaa9714; /** Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak */
-  --theme-dark-color-danger-hover-strong: #f96746ff; /** Only used for hover states in critical filled buttons */
+  --theme-dark-color-danger-hover-strong: #ff8e6aff; /** Only used for hover states in critical filled buttons */
   --theme-dark-color-danger-pressed-weak: #ffaa971f; /** Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak */
-  --theme-dark-color-danger-pressed-strong: #e84e2cff; /** Only used for pressed states in critical filled buttons */
+  --theme-dark-color-danger-pressed-strong: #ff8e6aff; /** Only used for pressed states in critical filled buttons */
   --theme-dark-color-warning-text: #ffd600ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */
   --theme-dark-color-warning-icon: #ffd600ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */
   --theme-dark-color-warning-bg-strong: #ffd600ff; /** Use sparsely. Only used for filled labels */
@@ -309,12 +327,14 @@
   --theme-dark-color-discovery-border-strong: #ccb4ffff; /** Use sparsely. Only used for outlined labels */
   --theme-dark-color-discovery-border-weak: #4b2894ff; /** Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background */
   --theme-light-box-shadow-raised: 0px 1px 2px 0px rgb(from #1a1b1dff r g b / 0.18); /** Used for small components that need sharper shadows to illustrate elevation. */
-  --theme-light-box-shadow-overlay: 0px 4px 8px 0px rgb(from #1a1b1dff r g b / 0.12); /** Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector */
+  --theme-light-box-shadow-overlay: 0 -1px 0 0 rgba(0, 0, 0, 0.08) inset, 0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(26, 27, 29, 0.06);; /** Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector */
   --theme-light-color-neutral-text-weakest: #a8acb2ff; /** Should be used mainly for disabled text */
   --theme-light-color-neutral-text-weaker: #5e636aff; /** Should be used sparsely and mainly for headers and subtitles to differentiate from input text */
   --theme-light-color-neutral-text-weak: #4d5157ff; /** Used for labels, icon color and descriptions */
   --theme-light-color-neutral-text-default: #1a1b1dff; /** Used for all default text */
   --theme-light-color-neutral-text-inverse: #ffffffff; /** Default text on neutral-bg-strongest or other dark backgrounds */
+  --theme-light-color-neutral-text-static-light: #ffffffff; /** Used for static light text */
+  --theme-light-color-neutral-text-static-dark: #1a1b1dff; /** Used for static dark text */
   --theme-light-color-neutral-icon: #4d5157ff; /** Used as a default neutral icon color */
   --theme-light-color-neutral-bg-weak: #ffffffff; /** Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default */
   --theme-light-color-neutral-bg-default: #f5f6f6ff; /** Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak */
@@ -323,35 +343,36 @@
   --theme-light-color-neutral-bg-stronger: #a8acb2ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */
   --theme-light-color-neutral-bg-strongest: #3c3f44ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */
   --theme-light-color-neutral-bg-status: #a8acb2ff;
+  --theme-light-color-neutral-border-weaker: #ecedeeff;
   --theme-light-color-neutral-border-weak: #e2e3e5ff; /** Used for light borders such as dividers and tables as well as some components such as context menu and code block to make them stand out more from the background */
   --theme-light-color-neutral-border-strong: #bbbec3ff; /** Used for components that are outlined and need to stand out such as text fields, search fields, drop-downs, buttons, checkboxes and radio buttons */
-  --theme-light-color-neutral-border-strongest: #6f757eff;
+  --theme-light-color-neutral-border-strongest: #8b9199ff;
   --theme-light-color-neutral-hover: #6f757e1a; /** Used for neutral hover states on components */
   --theme-light-color-neutral-pressed: #6f757e33; /** Used for neutral pressed states on components */
-  --theme-light-color-primary-text: #0a6190ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */
-  --theme-light-color-primary-icon: #0a6190ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */
+  --theme-light-color-primary-text: #014063ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */
+  --theme-light-color-primary-icon: #014063ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */
   --theme-light-color-primary-bg-weak: #e7fafbff; /** Used as a light primary background and usually in combination with Primary-text,icon. Components include banners, semi-filled labels, drag & drops and filled tabs */
-  --theme-light-color-primary-bg-strong: #0a6190ff; /** Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors */
+  --theme-light-color-primary-bg-strong: #014063ff; /** Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors */
   --theme-light-color-primary-bg-status: #4c99a4ff;
   --theme-light-color-primary-bg-selected: #e7fafbff;
-  --theme-light-color-primary-border-strong: #0a6190ff; /** Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard */
+  --theme-light-color-primary-border-strong: #02507bff; /** Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard */
   --theme-light-color-primary-border-weak: #8fe3e8ff; /** Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background */
   --theme-light-color-primary-focus: #30839dff; /** Used for all focused states */
   --theme-light-color-primary-hover-weak: #30839d1a; /** Used for hover states where the background is either transparent or use Neutral-bg-weak */
   --theme-light-color-primary-hover-strong: #02507bff; /** Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */
   --theme-light-color-primary-pressed-weak: #30839d1f; /** Used for pressed states where the background is either transparent or use Neutral-bg-weak */
-  --theme-light-color-primary-pressed-strong: #014063ff; /** Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */
-  --theme-light-color-danger-text: #bb2d00ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */
-  --theme-light-color-danger-icon: #bb2d00ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */
-  --theme-light-color-danger-bg-strong: #bb2d00ff; /** Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states */
+  --theme-light-color-primary-pressed-strong: #02507bff; /** Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */
+  --theme-light-color-danger-text: #961200ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */
+  --theme-light-color-danger-icon: #961200ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */
+  --theme-light-color-danger-bg-strong: #961200ff; /** Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states */
   --theme-light-color-danger-bg-weak: #ffe9e7ff; /** Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags */
   --theme-light-color-danger-bg-status: #e84e2cff;
   --theme-light-color-danger-border-strong: #bb2d00ff; /** Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels */
   --theme-light-color-danger-border-weak: #ffaa97ff; /** Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background */
   --theme-light-color-danger-hover-weak: #d4330014; /** Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak */
-  --theme-light-color-danger-hover-strong: #961200ff; /** Only used for hover states in critical filled buttons */
+  --theme-light-color-danger-hover-strong: #bb2d00ff; /** Only used for hover states in critical filled buttons */
   --theme-light-color-danger-pressed-weak: #d433001f; /** Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak */
-  --theme-light-color-danger-pressed-strong: #730e00ff; /** Only used for pressed states in critical filled buttons */
+  --theme-light-color-danger-pressed-strong: #bb2d00ff; /** Only used for pressed states in critical filled buttons */
   --theme-light-color-warning-text: #765500ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */
   --theme-light-color-warning-icon: #765500ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */
   --theme-light-color-warning-bg-strong: #765500ff; /** Use sparsely. Only used for filled labels */
@@ -384,78 +405,78 @@
   --typography-code-font-weight: 400;
   --typography-code-letter-spacing: 0rem;
   --typography-code-line-height: 1.4286;
-  --typography-display: 500 2.5rem/1.2 Syne Neo;
+  --typography-display: 500 1.5rem/2 Syne Neo;
   --typography-display-font-family: Syne Neo;
-  --typography-display-font-size: 2.5rem;
+  --typography-display-font-size: 1.5rem;
   --typography-display-font-weight: 500;
   --typography-display-letter-spacing: 0rem;
-  --typography-display-line-height: 1.2;
-  --typography-title-1: 700 1.875rem/1.3333 Public Sans;
-  --typography-title-1-font-family: Public Sans;
-  --typography-title-1-font-size: 1.875rem;
+  --typography-display-line-height: 2;
+  --typography-title-1: 700 1.5rem/2 Inter;
+  --typography-title-1-font-family: Inter;
+  --typography-title-1-font-size: 1.5rem;
   --typography-title-1-font-weight: 700;
-  --typography-title-1-letter-spacing: 0.016rem;
-  --typography-title-1-line-height: 1.3333;
-  --typography-title-2: 700 1.5rem/1.3333 Public Sans;
-  --typography-title-2-font-family: Public Sans;
-  --typography-title-2-font-size: 1.5rem;
+  --typography-title-1-letter-spacing: 0rem;
+  --typography-title-1-line-height: 2;
+  --typography-title-2: 700 1.25rem/1.75 Inter;
+  --typography-title-2-font-family: Inter;
+  --typography-title-2-font-size: 1.25rem;
   --typography-title-2-font-weight: 700;
-  --typography-title-2-letter-spacing: 0.016rem;
-  --typography-title-2-line-height: 1.3333;
-  --typography-title-3: 700 1.25rem/1.4 Public Sans;
-  --typography-title-3-font-family: Public Sans;
-  --typography-title-3-font-size: 1.25rem;
+  --typography-title-2-letter-spacing: 0rem;
+  --typography-title-2-line-height: 1.75;
+  --typography-title-3: 700 1rem/1.5 Inter;
+  --typography-title-3-font-family: Inter;
+  --typography-title-3-font-size: 1rem;
   --typography-title-3-font-weight: 700;
-  --typography-title-3-letter-spacing: 0.016rem;
-  --typography-title-3-line-height: 1.4;
-  --typography-title-4: 700 1rem/1.5 Public Sans;
-  --typography-title-4-font-family: Public Sans;
-  --typography-title-4-font-size: 1rem;
+  --typography-title-3-letter-spacing: 0rem;
+  --typography-title-3-line-height: 1.5;
+  --typography-title-4: 700 0.875rem/1.4286 Inter;
+  --typography-title-4-font-family: Inter;
+  --typography-title-4-font-size: 0.875rem;
   --typography-title-4-font-weight: 700;
-  --typography-title-4-letter-spacing: 0.016rem;
-  --typography-title-4-line-height: 1.5;
-  --typography-subheading-large: 600 1.25rem/1.4 Public Sans;
-  --typography-subheading-large-font-family: Public Sans;
-  --typography-subheading-large-font-size: 1.25rem;
-  --typography-subheading-large-font-weight: 600;
-  --typography-subheading-large-letter-spacing: 0.016rem;
-  --typography-subheading-large-line-height: 1.4;
-  --typography-subheading-medium: 600 1rem/1.5 Public Sans;
-  --typography-subheading-medium-font-family: Public Sans;
-  --typography-subheading-medium-font-size: 1rem;
-  --typography-subheading-medium-font-weight: 600;
-  --typography-subheading-medium-letter-spacing: 0.016rem;
-  --typography-subheading-medium-line-height: 1.5;
-  --typography-subheading-small: 600 0.875rem/1.4286 Public Sans;
-  --typography-subheading-small-font-family: Public Sans;
-  --typography-subheading-small-font-size: 0.875rem;
-  --typography-subheading-small-font-weight: 600;
+  --typography-title-4-letter-spacing: 0rem;
+  --typography-title-4-line-height: 1.4286;
+  --typography-subheading-large: 500 1rem/1.5 Inter;
+  --typography-subheading-large-font-family: Inter;
+  --typography-subheading-large-font-size: 1rem;
+  --typography-subheading-large-font-weight: 500;
+  --typography-subheading-large-letter-spacing: 0rem;
+  --typography-subheading-large-line-height: 1.5;
+  --typography-subheading-medium: 500 0.875rem/1.4286 Inter;
+  --typography-subheading-medium-font-family: Inter;
+  --typography-subheading-medium-font-size: 0.875rem;
+  --typography-subheading-medium-font-weight: 500;
+  --typography-subheading-medium-letter-spacing: 0rem;
+  --typography-subheading-medium-line-height: 1.4286;
+  --typography-subheading-small: 500 0.75rem/1.6667 Inter;
+  --typography-subheading-small-font-family: Inter;
+  --typography-subheading-small-font-size: 0.75rem;
+  --typography-subheading-small-font-weight: 500;
   --typography-subheading-small-letter-spacing: 0rem;
-  --typography-subheading-small-line-height: 1.4286;
-  --typography-body-large: 400 1rem/1.5 Public Sans;
-  --typography-body-large-font-family: Public Sans;
+  --typography-subheading-small-line-height: 1.6667;
+  --typography-body-large: 400 1rem/1.5 Inter;
+  --typography-body-large-font-family: Inter;
   --typography-body-large-font-size: 1rem;
   --typography-body-large-font-weight: 400;
   --typography-body-large-letter-spacing: 0rem;
   --typography-body-large-line-height: 1.5;
-  --typography-body-medium: 400 0.875rem/1.4286 Public Sans;
-  --typography-body-medium-font-family: Public Sans;
+  --typography-body-medium: 400 0.875rem/1.4286 Inter;
+  --typography-body-medium-font-family: Inter;
   --typography-body-medium-font-size: 0.875rem;
   --typography-body-medium-font-weight: 400;
   --typography-body-medium-letter-spacing: 0rem;
   --typography-body-medium-line-height: 1.4286;
-  --typography-body-small: 400 0.75rem/1.6667 Public Sans;
-  --typography-body-small-font-family: Public Sans;
+  --typography-body-small: 400 0.75rem/1.6667 Inter;
+  --typography-body-small-font-family: Inter;
   --typography-body-small-font-size: 0.75rem;
   --typography-body-small-font-weight: 400;
   --typography-body-small-letter-spacing: 0rem;
   --typography-body-small-line-height: 1.6667;
-  --typography-label: 700 0.875rem/1.4286 Public Sans;
-  --typography-label-font-family: Public Sans;
+  --typography-label: 700 0.875rem/1.4286 Inter;
+  --typography-label-font-family: Inter;
   --typography-label-font-size: 0.875rem;
   --typography-label-font-weight: 700;
   --typography-label-letter-spacing: 0rem;
-  --typography-label-line-height: 1.4286;
+  --typography-label-line-height: 1.4286; /** Deprecated: use title-4, which this is identical to */
   --z-index-deep: -999999; /** Deep z-index is used to stack something behind everything else. */
   --z-index-base: 0; /** Useful for creating a new stacking context. */
   --z-index-overlay: 10; /** Used for overlay elements, like button groups on canvas elements. Can be used with an alias token. */