@semcore/core 16.1.1 → 16.2.0

package/lib/theme/themes/auto.css

@@ -697,7 +697,7 @@
   --intergalactic-tag-primary-gray-hover-active: #E3E4E9;
   /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */
   --intergalactic-tag-primary-blue-normal: #D0EEFF;
-  /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath.  */
+  /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */
   --intergalactic-tag-primary-blue-hover-active: #B7E4FF;
   /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */
   --intergalactic-tag-primary-green-normal: #CFF1EA;
@@ -1060,7 +1060,7 @@
   /* Inverted version of the primary text. */
   --intergalactic-text-primary-invert: #ffffff;
   /* Inverted version of the secondary text. */
-  --intergalactic-text-secondary-Invert: rgba(255, 255, 255, 0.75);
+  --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.75);
   /* Link text. */
   --intergalactic-text-link: #8ecdff;
   /* Hover and active states for the link text. */
@@ -1093,6 +1093,7 @@
   --intergalactic-text-large-critical: #ff4953;
   /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */
   --intergalactic-text-large-critical-hover-active: #d1002f;
+  /* Advertising text. */
   --intergalactic-text-advertising: #421983;
   /* Neutral primary border. */
   --intergalactic-border-primary: #484a54;
@@ -1122,6 +1123,8 @@
   --intergalactic-border-tooltip-invert: #6c6e79;
   /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */
   --intergalactic-border-table-accent: #a9abb6;
+  /* Border color of the second period for the comparison mode in the DatePicker. */
+  --intergalactic-border-date-picker-range-comparison: #8649e1;
   /* Subtle background of the Switch control. */
   --intergalactic-control-switch-bg: #a9abb6;
   /* Background of the regular primary control. */
@@ -1148,11 +1151,11 @@
   --intergalactic-control-primary-brand-hover: #c33909;
   /* Active state of the primary brand colored control. */
   --intergalactic-control-primary-brand-active: #c33909;
-  /* Hover state of the advertising primary control. */
+  /* Background of the advertising primary control. */
   --intergalactic-control-primary-advertising: #5925ab;
-  /* Active (selected) state of the advertising primary control. */
+  /* Hover state of the advertising primary control. */
   --intergalactic-control-primary-advertising-hover: #421983;
-  /* Background of the advertising primary control. */
+  /* Active (selected) state of the advertising primary control. */
   --intergalactic-control-primary-advertising-active: #8649e1;
   /* Inverted background of the primary control. */
   --intergalactic-control-primary-invert: rgba(30, 34, 49, 1);
@@ -1204,7 +1207,7 @@
   --intergalactic-icon-primary-info: #006dca;
   /* Hover and active (selected) states of the primary link-lookalike icon. */
   --intergalactic-icon-primary-info-hover-active: #044792;
-  /* Primary successful icon. */
+  /* Primary success icon. */
   --intergalactic-icon-primary-success: #009f81;
   /* Hover and active (selected) states of the primary successful icon. */
   --intergalactic-icon-primary-success-hover-active: #007c65;
@@ -1228,7 +1231,7 @@
   --intergalactic-icon-secondary-info: #2bb3ff;
   /* Hover and active (selected) states of the secondary link-lookalike icon. */
   --intergalactic-icon-secondary-info-hover-active: #008ff8;
-  /* Secondary successful icon. */
+  /* Secondary success icon. */
   --intergalactic-icon-secondary-success: #00c192;
   /* Hover and active (selected) states of the secondary successful icon. */
   --intergalactic-icon-secondary-success-hover-active: #009f81;
@@ -1256,7 +1259,12 @@
   --intergalactic-date-picker-cell-active: #2bb3ff;
   /* Hover for the active (selected) date-picker cell background. */
   --intergalactic-date-picker-cell-active-hover: #008ff8;
-  --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.3);
+  /* Color for marking the active cell with the current date, month or year in the date-picker. */
+  --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5);
+  /* Active (selected) date-picker cell background for comparison periods. */
+  --intergalactic-date-picker-cell-comparison-active: #8649e1;
+  /* Hover for the active (selected) date-picker cell background for comparison periods. */
+  --intergalactic-date-picker-cell-comparison-active-hover: #5925ab;
   /* Default background color for the list item in the dropdown-menu. */
   --intergalactic-dropdown-menu-item: rgba(54, 56, 67, 1);
   /* Hover state of the default background color for the list item in the dropdown-menu. */
@@ -1301,6 +1309,7 @@
   --intergalactic-table-th-primary-cell-active: rgba(108, 110, 121, 1);
   /* Background of the header cell in the secondary Table. */
   --intergalactic-table-th-secondary-cell: rgba(62, 64, 75, 1);
+  /* Background gradient for sorting icon that absolute positioned in the table head. */
   --intergalactic-table-th-gradient: linear-gradient(to right, rgba(224, 225, 233, 0) 0%, rgba(224, 225, 233, 1) 100%);
   /* Background of the default cell in the Table. */
   --intergalactic-table-td-cell: #191b23;
@@ -1372,18 +1381,19 @@
   --intergalactic-keyboard-focus-outline: rgba(255, 255, 255, 0.7);
   /* Color for default keyboard focus outline styles to use on the dark and color background. */
   --intergalactic-keyboard-focus-outline-invert: rgba(255, 255, 255, 0.7);
-  /* Default keyboard focus styles. */
+  /* Default keyboard focus box-shadow styles. */
   --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(255, 255, 255, 0.7);
-  /* Color of keyboard focus outline styles for elements with invalid state. */
+  /* Color for keyboard focus outline styles for elements with invalid state. */
   --intergalactic-keyboard-focus-invalid-outline: rgba(255, 73, 83, 0.8);
   /* Keyboard focus styles for elements with invalid state. */
   --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 73, 83, 0.8);
-  /* Color of keyboard focus outline styles for elements with valid state. */
+  /* Color for keyboard focus outline styles for elements with valid state. */
   --intergalactic-keyboard-focus-valid-outline: rgba(0, 159, 129, 0.8);
   /* Keyboard focus styles for elements with valid state. */
   --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(0, 159, 129, 0.8);
   /* Default keyboard focus styles for using with dark background. */
   --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.7);
+  /* Base font family. */
   --intergalactic-base: Inter;
   /* Use with font-size-800. */
   --intergalactic-lh-800: 117%;
@@ -1401,28 +1411,26 @@
   --intergalactic-lh-200: 142%;
   /* Use with font-size-100. */
   --intergalactic-lh-100: 133%;
+  /* Semi-bold font weight. */
   --intergalactic-semi-bold: 600;
+  /* Bold font weight. */
   --intergalactic-bold: 700;
+  /* Regular font weight. */
   --intergalactic-regular: 400;
+  /* Medium font weight. */
   --intergalactic-medium: 500;
   /* Use only for text in Badge component. */
   --intergalactic-fs-50: 10px;
-  /* Use with caution for text in additional messages. Always check its contrast and readability. */
+  /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */
   --intergalactic-fs-100: 12px;
-  /* Use for text in regular messages. */
   --intergalactic-fs-200: 14px;
-  /* Use for H6 with bold font-weight, and for text in regular messages. */
   --intergalactic-fs-300: 16px;
-  /* Use for H5 and subtitles. */
   --intergalactic-fs-400: 20px;
-  /* Use for H4. */
   --intergalactic-fs-500: 24px;
-  /* Use for H3. */
   --intergalactic-fs-600: 32px;
-  /* Use for H2. */
   --intergalactic-fs-700: 36px;
-  /* Use for H1. */
   --intergalactic-fs-800: 48px;
+  /* Compact letter spacing. */
   --intergalactic-compact: 0.3;
   /* Base denominator of the design system. */
   --intergalactic-scale-indent: 4px;
@@ -1458,6 +1466,7 @@
   --intergalactic-spacing-24x: 96px;
   /* 120px */
   --intergalactic-spacing-30x: 120px;
+  --intergalactic-rounded-extra-small: 2px;
   --intergalactic-rounded-small: 4px;
   --intergalactic-rounded-medium: 6px;
   --intergalactic-rounded-large: 12px;
@@ -1466,6 +1475,8 @@
   --intergalactic-addon-rounded: 4px;
   /* Use for rounding Badge. */
   --intergalactic-badge-rounded: 6px;
+  /* Use for rounding big and small charts like bar, histogram and others. */
+  --intergalactic-chart-rounded: 2px;
   /* Use for rounding Counter. */
   --intergalactic-counter-rounded: 12px;
   /* Use for rounding Tag. */
@@ -1535,33 +1546,33 @@
   --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(43, 46, 56, 1) 34.38%, rgba(54, 56, 67, 0) 100%);
   /* Background color for ScrollBar. */
   --intergalactic-scroll-bar-background: rgba(25, 27, 35, 0.3);
-  /* Primary gray tag. */
+  /* Gray background color for the primary tag. */
   --intergalactic-tag-primary-gray-normal: rgba(69, 70, 81, 1);
-  /* Hover and active (selected) state of the primary gray tag. */
+  /* Gray background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-gray-hover-active: #e0e1e9;
-  /* Primary blue tag. */
+  /* Blue background color for primary tag. */
   --intergalactic-tag-primary-blue-normal: rgba(7, 77, 141, 1);
-  /* Hover and active (selected) state of the primary blue tag. */
+  /* Blue background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-blue-hover-active: #c4e5fe;
-  /* Primary green tag. */
+  /* Green background color for the primary tag. */
   --intergalactic-tag-primary-green-normal: rgba(9, 99, 82, 1);
-  /* Hover and active (selected) state of the primary green tag. */
+  /* Green background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-green-hover-active: #9ef2c9;
-  /* Primary orange tag. */
+  /* Orange background color for the primary tag. */
   --intergalactic-tag-primary-orange-normal: rgba(156, 49, 11, 1);
-  /* Hover and active (selected) state of the primary orange tag. */
+  /* Orange background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-orange-hover-active: #ffdca2;
-  /* Primary red tag. */
+  /* Red background color for the primary tag. */
   --intergalactic-tag-primary-red-normal: rgba(160, 13, 42, 1);
-  /* Hover and active (selected) state of the primary red tag. */
+  /* Red background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-red-hover-active: #ffd7df;
-  /* Primary violet tag. */
+  /* Violet background color for the primary tag. */
   --intergalactic-tag-primary-violet-normal: rgba(95, 62, 157, 1);
-  /* Hover and active (selected) state of the primary violet tag. */
+  /* Violet background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-violet-hover-active: #edd9ff;
-  /* Primary yellow tag. */
+  /* Yellow background color for the primary tag. */
   --intergalactic-tag-primary-yellow-normal: rgba(252, 224, 129, 0.5);
-  /* Hover and active (selected) state of the primary yellow tag. */
+  /* Yellow background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-yellow-hover-active: #fce081;
   /* Primary white tag. */
   --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15);
@@ -1661,8 +1672,10 @@
   --intergalactic-chart-grid-bar-chart-hover: rgba(196, 199, 207, 0.3);
   /* Default background color of a bar in the BarChart. */
   --intergalactic-chart-grid-bar-chart-base-bg: #e0e1e9;
-  /* Use for highlighting the period on the chart grid. */
+  /* Use for highlighting a period on the chart grid. */
   --intergalactic-chart-grid-period-bg: rgba(196, 199, 207, 0.2);
+  /* Stripe color for diagonal pattern background. */
+  --intergalactic-chart-grid-period-pattern: rgba(25, 27, 35, 0.15);
   /* Border for distinguishing data sets and chart dots on the chart grid. */
   --intergalactic-chart-grid-border: #191b23;
   /* Background color for the clickable date on the X-axis of the chart grid. */

package/lib/theme/themes/dark.css

@@ -199,7 +199,7 @@
   /* Inverted version of the primary text. */
   --intergalactic-text-primary-invert: #ffffff;
   /* Inverted version of the secondary text. */
-  --intergalactic-text-secondary-Invert: rgba(255, 255, 255, 0.75);
+  --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.75);
   /* Link text. */
   --intergalactic-text-link: #8ecdff;
   /* Hover and active states for the link text. */
@@ -232,6 +232,7 @@
   --intergalactic-text-large-critical: #ff4953;
   /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */
   --intergalactic-text-large-critical-hover-active: #d1002f;
+  /* Advertising text. */
   --intergalactic-text-advertising: #421983;
   /* Neutral primary border. */
   --intergalactic-border-primary: #484a54;
@@ -261,6 +262,8 @@
   --intergalactic-border-tooltip-invert: #6c6e79;
   /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */
   --intergalactic-border-table-accent: #a9abb6;
+  /* Border color of the second period for the comparison mode in the DatePicker. */
+  --intergalactic-border-date-picker-range-comparison: #8649e1;
   /* Subtle background of the Switch control. */
   --intergalactic-control-switch-bg: #a9abb6;
   /* Background of the regular primary control. */
@@ -287,11 +290,11 @@
   --intergalactic-control-primary-brand-hover: #c33909;
   /* Active state of the primary brand colored control. */
   --intergalactic-control-primary-brand-active: #c33909;
-  /* Hover state of the advertising primary control. */
+  /* Background of the advertising primary control. */
   --intergalactic-control-primary-advertising: #5925ab;
-  /* Active (selected) state of the advertising primary control. */
+  /* Hover state of the advertising primary control. */
   --intergalactic-control-primary-advertising-hover: #421983;
-  /* Background of the advertising primary control. */
+  /* Active (selected) state of the advertising primary control. */
   --intergalactic-control-primary-advertising-active: #8649e1;
   /* Inverted background of the primary control. */
   --intergalactic-control-primary-invert: rgba(30, 34, 49, 1);
@@ -343,7 +346,7 @@
   --intergalactic-icon-primary-info: #006dca;
   /* Hover and active (selected) states of the primary link-lookalike icon. */
   --intergalactic-icon-primary-info-hover-active: #044792;
-  /* Primary successful icon. */
+  /* Primary success icon. */
   --intergalactic-icon-primary-success: #009f81;
   /* Hover and active (selected) states of the primary successful icon. */
   --intergalactic-icon-primary-success-hover-active: #007c65;
@@ -367,7 +370,7 @@
   --intergalactic-icon-secondary-info: #2bb3ff;
   /* Hover and active (selected) states of the secondary link-lookalike icon. */
   --intergalactic-icon-secondary-info-hover-active: #008ff8;
-  /* Secondary successful icon. */
+  /* Secondary success icon. */
   --intergalactic-icon-secondary-success: #00c192;
   /* Hover and active (selected) states of the secondary successful icon. */
   --intergalactic-icon-secondary-success-hover-active: #009f81;
@@ -395,7 +398,12 @@
   --intergalactic-date-picker-cell-active: #2bb3ff;
   /* Hover for the active (selected) date-picker cell background. */
   --intergalactic-date-picker-cell-active-hover: #008ff8;
-  --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.3);
+  /* Color for marking the active cell with the current date, month or year in the date-picker. */
+  --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5);
+  /* Active (selected) date-picker cell background for comparison periods. */
+  --intergalactic-date-picker-cell-comparison-active: #8649e1;
+  /* Hover for the active (selected) date-picker cell background for comparison periods. */
+  --intergalactic-date-picker-cell-comparison-active-hover: #5925ab;
   /* Default background color for the list item in the dropdown-menu. */
   --intergalactic-dropdown-menu-item: rgba(54, 56, 67, 1);
   /* Hover state of the default background color for the list item in the dropdown-menu. */
@@ -440,6 +448,7 @@
   --intergalactic-table-th-primary-cell-active: rgba(108, 110, 121, 1);
   /* Background of the header cell in the secondary Table. */
   --intergalactic-table-th-secondary-cell: rgba(62, 64, 75, 1);
+  /* Background gradient for sorting icon that absolute positioned in the table head. */
   --intergalactic-table-th-gradient: linear-gradient(to right, rgba(224, 225, 233, 0) 0%, rgba(224, 225, 233, 1) 100%);
   /* Background of the default cell in the Table. */
   --intergalactic-table-td-cell: #191b23;
@@ -511,18 +520,19 @@
   --intergalactic-keyboard-focus-outline: rgba(255, 255, 255, 0.7);
   /* Color for default keyboard focus outline styles to use on the dark and color background. */
   --intergalactic-keyboard-focus-outline-invert: rgba(255, 255, 255, 0.7);
-  /* Default keyboard focus styles. */
+  /* Default keyboard focus box-shadow styles. */
   --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(255, 255, 255, 0.7);
-  /* Color of keyboard focus outline styles for elements with invalid state. */
+  /* Color for keyboard focus outline styles for elements with invalid state. */
   --intergalactic-keyboard-focus-invalid-outline: rgba(255, 73, 83, 0.8);
   /* Keyboard focus styles for elements with invalid state. */
   --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 73, 83, 0.8);
-  /* Color of keyboard focus outline styles for elements with valid state. */
+  /* Color for keyboard focus outline styles for elements with valid state. */
   --intergalactic-keyboard-focus-valid-outline: rgba(0, 159, 129, 0.8);
   /* Keyboard focus styles for elements with valid state. */
   --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(0, 159, 129, 0.8);
   /* Default keyboard focus styles for using with dark background. */
   --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.7);
+  /* Base font family. */
   --intergalactic-base: Inter;
   /* Use with font-size-800. */
   --intergalactic-lh-800: 117%;
@@ -540,28 +550,26 @@
   --intergalactic-lh-200: 142%;
   /* Use with font-size-100. */
   --intergalactic-lh-100: 133%;
+  /* Semi-bold font weight. */
   --intergalactic-semi-bold: 600;
+  /* Bold font weight. */
   --intergalactic-bold: 700;
+  /* Regular font weight. */
   --intergalactic-regular: 400;
+  /* Medium font weight. */
   --intergalactic-medium: 500;
   /* Use only for text in Badge component. */
   --intergalactic-fs-50: 10px;
-  /* Use with caution for text in additional messages. Always check its contrast and readability. */
+  /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */
   --intergalactic-fs-100: 12px;
-  /* Use for text in regular messages. */
   --intergalactic-fs-200: 14px;
-  /* Use for H6 with bold font-weight, and for text in regular messages. */
   --intergalactic-fs-300: 16px;
-  /* Use for H5 and subtitles. */
   --intergalactic-fs-400: 20px;
-  /* Use for H4. */
   --intergalactic-fs-500: 24px;
-  /* Use for H3. */
   --intergalactic-fs-600: 32px;
-  /* Use for H2. */
   --intergalactic-fs-700: 36px;
-  /* Use for H1. */
   --intergalactic-fs-800: 48px;
+  /* Compact letter spacing. */
   --intergalactic-compact: 0.3;
   /* Base denominator of the design system. */
   --intergalactic-scale-indent: 4px;
@@ -597,6 +605,7 @@
   --intergalactic-spacing-24x: 96px;
   /* 120px */
   --intergalactic-spacing-30x: 120px;
+  --intergalactic-rounded-extra-small: 2px;
   --intergalactic-rounded-small: 4px;
   --intergalactic-rounded-medium: 6px;
   --intergalactic-rounded-large: 12px;
@@ -605,6 +614,8 @@
   --intergalactic-addon-rounded: 4px;
   /* Use for rounding Badge. */
   --intergalactic-badge-rounded: 6px;
+  /* Use for rounding big and small charts like bar, histogram and others. */
+  --intergalactic-chart-rounded: 2px;
   /* Use for rounding Counter. */
   --intergalactic-counter-rounded: 12px;
   /* Use for rounding Tag. */
@@ -674,33 +685,33 @@
   --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(43, 46, 56, 1) 34.38%, rgba(54, 56, 67, 0) 100%);
   /* Background color for ScrollBar. */
   --intergalactic-scroll-bar-background: rgba(25, 27, 35, 0.3);
-  /* Primary gray tag. */
+  /* Gray background color for the primary tag. */
   --intergalactic-tag-primary-gray-normal: rgba(69, 70, 81, 1);
-  /* Hover and active (selected) state of the primary gray tag. */
+  /* Gray background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-gray-hover-active: #e0e1e9;
-  /* Primary blue tag. */
+  /* Blue background color for primary tag. */
   --intergalactic-tag-primary-blue-normal: rgba(7, 77, 141, 1);
-  /* Hover and active (selected) state of the primary blue tag. */
+  /* Blue background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-blue-hover-active: #c4e5fe;
-  /* Primary green tag. */
+  /* Green background color for the primary tag. */
   --intergalactic-tag-primary-green-normal: rgba(9, 99, 82, 1);
-  /* Hover and active (selected) state of the primary green tag. */
+  /* Green background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-green-hover-active: #9ef2c9;
-  /* Primary orange tag. */
+  /* Orange background color for the primary tag. */
   --intergalactic-tag-primary-orange-normal: rgba(156, 49, 11, 1);
-  /* Hover and active (selected) state of the primary orange tag. */
+  /* Orange background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-orange-hover-active: #ffdca2;
-  /* Primary red tag. */
+  /* Red background color for the primary tag. */
   --intergalactic-tag-primary-red-normal: rgba(160, 13, 42, 1);
-  /* Hover and active (selected) state of the primary red tag. */
+  /* Red background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-red-hover-active: #ffd7df;
-  /* Primary violet tag. */
+  /* Violet background color for the primary tag. */
   --intergalactic-tag-primary-violet-normal: rgba(95, 62, 157, 1);
-  /* Hover and active (selected) state of the primary violet tag. */
+  /* Violet background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-violet-hover-active: #edd9ff;
-  /* Primary yellow tag. */
+  /* Yellow background color for the primary tag. */
   --intergalactic-tag-primary-yellow-normal: rgba(252, 224, 129, 0.5);
-  /* Hover and active (selected) state of the primary yellow tag. */
+  /* Yellow background color for the hover and active states of the primary tag. */
   --intergalactic-tag-primary-yellow-hover-active: #fce081;
   /* Primary white tag. */
   --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15);
@@ -800,8 +811,10 @@
   --intergalactic-chart-grid-bar-chart-hover: rgba(196, 199, 207, 0.3);
   /* Default background color of a bar in the BarChart. */
   --intergalactic-chart-grid-bar-chart-base-bg: #e0e1e9;
-  /* Use for highlighting the period on the chart grid. */
+  /* Use for highlighting a period on the chart grid. */
   --intergalactic-chart-grid-period-bg: rgba(196, 199, 207, 0.2);
+  /* Stripe color for diagonal pattern background. */
+  --intergalactic-chart-grid-period-pattern: rgba(25, 27, 35, 0.15);
   /* Border for distinguishing data sets and chart dots on the chart grid. */
   --intergalactic-chart-grid-border: #191b23;
   /* Background color for the clickable date on the X-axis of the chart grid. */

package/lib/theme/themes/dark.d.ts

@@ -134,7 +134,7 @@ declare const _default: {
     '--intergalactic-text-critical': string;
     '--intergalactic-text-critical-hover-active': string;
     '--intergalactic-text-primary-invert': string;
-    '--intergalactic-text-secondary-Invert': string;
+    '--intergalactic-text-secondary-invert': string;
     '--intergalactic-text-link': string;
     '--intergalactic-text-link-hover-active': string;
     '--intergalactic-text-link-invert': string;
@@ -166,6 +166,7 @@ declare const _default: {
     '--intergalactic-border-secondary-invert': string;
     '--intergalactic-border-tooltip-invert': string;
     '--intergalactic-border-table-accent': string;
+    '--intergalactic-border-date-picker-range-comparison': string;
     '--intergalactic-control-switch-bg': string;
     '--intergalactic-control-primary-info': string;
     '--intergalactic-control-primary-info-hover': string;
@@ -234,6 +235,8 @@ declare const _default: {
     '--intergalactic-date-picker-cell-active': string;
     '--intergalactic-date-picker-cell-active-hover': string;
     '--intergalactic-date-picker-cell-current-invert': string;
+    '--intergalactic-date-picker-cell-comparison-active': string;
+    '--intergalactic-date-picker-cell-comparison-active-hover': string;
     '--intergalactic-dropdown-menu-item': string;
     '--intergalactic-dropdown-menu-item-hover': string;
     '--intergalactic-dropdown-menu-item-selected': string;
@@ -338,12 +341,14 @@ declare const _default: {
     '--intergalactic-spacing-20x': string;
     '--intergalactic-spacing-24x': string;
     '--intergalactic-spacing-30x': string;
+    '--intergalactic-rounded-extra-small': string;
     '--intergalactic-rounded-small': string;
     '--intergalactic-rounded-medium': string;
     '--intergalactic-rounded-large': string;
     '--intergalactic-rounded-extra-large': string;
     '--intergalactic-addon-rounded': string;
     '--intergalactic-badge-rounded': string;
+    '--intergalactic-chart-rounded': string;
     '--intergalactic-counter-rounded': string;
     '--intergalactic-tag-rounded': string;
     '--intergalactic-switch-rounded': string;
@@ -446,6 +451,7 @@ declare const _default: {
     '--intergalactic-chart-grid-bar-chart-hover': string;
     '--intergalactic-chart-grid-bar-chart-base-bg': string;
     '--intergalactic-chart-grid-period-bg': string;
+    '--intergalactic-chart-grid-period-pattern': string;
     '--intergalactic-chart-grid-border': string;
     '--intergalactic-chart-x-axis-accent-period-active': string;
     '--intergalactic-chart-x-axis-accent-data-start-tracking': string;

package/lib/theme/themes/dark.js

@@ -140,7 +140,7 @@ var _default = exports["default"] = {
   '--intergalactic-text-critical': 'rgba(255, 155, 148, 1)',
   '--intergalactic-text-critical-hover-active': '#8e0016',
   '--intergalactic-text-primary-invert': '#ffffff',
-  '--intergalactic-text-secondary-Invert': 'rgba(255, 255, 255, 0.75)',
+  '--intergalactic-text-secondary-invert': 'rgba(255, 255, 255, 0.75)',
   '--intergalactic-text-link': '#8ecdff',
   '--intergalactic-text-link-hover-active': '#2bb3ff',
   '--intergalactic-text-link-invert': '#8ecdff',
@@ -172,6 +172,7 @@ var _default = exports["default"] = {
   '--intergalactic-border-secondary-invert': 'rgba(255, 255, 255, 0.3)',
   '--intergalactic-border-tooltip-invert': '#6c6e79',
   '--intergalactic-border-table-accent': '#a9abb6',
+  '--intergalactic-border-date-picker-range-comparison': '#8649e1',
   '--intergalactic-control-switch-bg': '#a9abb6',
   '--intergalactic-control-primary-info': '#008ff8',
   '--intergalactic-control-primary-info-hover': '#006dca',
@@ -239,7 +240,9 @@ var _default = exports["default"] = {
   '--intergalactic-date-picker-cell-range-hover': '#044792',
   '--intergalactic-date-picker-cell-active': '#2bb3ff',
   '--intergalactic-date-picker-cell-active-hover': '#008ff8',
-  '--intergalactic-date-picker-cell-current-invert': 'rgba(255, 255, 255, 0.3)',
+  '--intergalactic-date-picker-cell-current-invert': 'rgba(255, 255, 255, 0.5)',
+  '--intergalactic-date-picker-cell-comparison-active': '#8649e1',
+  '--intergalactic-date-picker-cell-comparison-active-hover': '#5925ab',
   '--intergalactic-dropdown-menu-item': 'rgba(54, 56, 67, 1)',
   '--intergalactic-dropdown-menu-item-hover': 'rgba(79, 82, 93, 1)',
   '--intergalactic-dropdown-menu-item-selected': 'rgba(66, 103, 123, 1)',
@@ -344,12 +347,14 @@ var _default = exports["default"] = {
   '--intergalactic-spacing-20x': '80px',
   '--intergalactic-spacing-24x': '96px',
   '--intergalactic-spacing-30x': '120px',
+  '--intergalactic-rounded-extra-small': '2px',
   '--intergalactic-rounded-small': '4px',
   '--intergalactic-rounded-medium': '6px',
   '--intergalactic-rounded-large': '12px',
   '--intergalactic-rounded-extra-large': '24px',
   '--intergalactic-addon-rounded': '4px',
   '--intergalactic-badge-rounded': '6px',
+  '--intergalactic-chart-rounded': '2px',
   '--intergalactic-counter-rounded': '12px',
   '--intergalactic-tag-rounded': '24px',
   '--intergalactic-switch-rounded': '24px',
@@ -452,6 +457,7 @@ var _default = exports["default"] = {
   '--intergalactic-chart-grid-bar-chart-hover': 'rgba(196, 199, 207, 0.3)',
   '--intergalactic-chart-grid-bar-chart-base-bg': '#e0e1e9',
   '--intergalactic-chart-grid-period-bg': 'rgba(196, 199, 207, 0.2)',
+  '--intergalactic-chart-grid-period-pattern': 'rgba(25, 27, 35, 0.15)',
   '--intergalactic-chart-grid-border': '#191b23',
   '--intergalactic-chart-x-axis-accent-period-active': '#8a8e9b',
   '--intergalactic-chart-x-axis-accent-data-start-tracking': 'rgba(0, 159, 129, 0.2)',