@infomaximum/ui-kit 0.13.4 → 0.14.0

package/dist/components/Segmented/components/SegmentedItem/SegmentedItem.styles.js

@@ -0,0 +1,51 @@
+const ellipsisStyle = {
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis"
+};
+const getSegmentedItemStyle = (segmentedTokens, block, isSelected, disabled) => (theme) => ({
+  position: "relative",
+  cursor: disabled ? "not-allowed" : "pointer",
+  display: "flex",
+  justifyContent: "center",
+  flex: block ? 1 : void 0,
+  minWidth: block ? 0 : void 0,
+  paddingInline: segmentedTokens.segmentedItemPaddingHorizontal,
+  borderRadius: theme.borderRadiusM,
+  backgroundColor: isSelected ? segmentedTokens.segmentedItemBgSelected : void 0,
+  color: disabled ? segmentedTokens.segmentedItemTextDisabled : isSelected ? segmentedTokens.segmentedItemTextSelected : segmentedTokens.segmentedItemText,
+  boxShadow: isSelected ? segmentedTokens.segmentedItemShadow : void 0,
+  ":hover": {
+    color: isSelected || disabled ? void 0 : segmentedTokens.segmentedItemTextHover,
+    backgroundColor: isSelected || disabled ? void 0 : segmentedTokens.segmentedItemBgHover
+  }
+});
+const segmentedItemInputStyle = {
+  position: "absolute",
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  margin: 0
+};
+const segmentedItemLabelWrapperStyle = (segmentedTokens) => (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  columnGap: theme.spaceXS,
+  minHeight: segmentedTokens.segmentedItemHeight,
+  ...ellipsisStyle
+});
+const segmentedItemIconStyle = (theme) => ({
+  display: "flex",
+  fontSize: theme.iconM
+});
+const segmentedItemLabelStyle = {
+  ...ellipsisStyle
+};
+export {
+  getSegmentedItemStyle,
+  segmentedItemIconStyle,
+  segmentedItemInputStyle,
+  segmentedItemLabelStyle,
+  segmentedItemLabelWrapperStyle
+};

package/dist/components/Segmented/components/SegmentedItem/SegmentedItem.types.d.ts

@@ -0,0 +1,6 @@
+import { ChangeEvent } from 'react';
+import { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from '../../Segmented.types';
+export interface SegmentedItemProps<T = SegmentedValue> extends SegmentedLabeledOption, Required<Pick<SegmentedProps, "name" | "block">> {
+    isSelected: boolean;
+    onChange: (value: T, event: ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/components/Segmented/index.d.ts

@@ -0,0 +1,2 @@
+export { Segmented } from './Segmented';
+export type { SegmentedProps, SegmentedLabeledOption } from './Segmented.types';

package/dist/components/Select/components/SelectOption/SelectOption.styles.d.ts

@@ -6,9 +6,9 @@ export declare const getSelectOptionStyle: (selected: boolean, disabled: boolean
         readonly boxSizing: "border-box";
         readonly transition: "background .2s, color .2s";
         readonly cursor: "pointer" | "not-allowed";
-        readonly background: "#F5F5F5" | "unset";
+        readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
         readonly ":hover, :focus, focus-visible": {
-            readonly background: "#F5F5F5" | "unset";
+            readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
             readonly outline: "none";
         };
         readonly fontFamily: "Roboto";

package/dist/components/TreeSelect/TreeSelect.tokens.d.ts

@@ -17,7 +17,7 @@ export declare const getTreeSelectTokens: (theme: Theme) => {
     treeSelectOptionText: "#262626";
     treeSelectOptionTextSelected: "#0CB3B3";
     treeSelectOptionTextDisabled: "#8C8C8C";
-    treeSelectOptionBgHover: "#F5F5F5";
+    treeSelectOptionBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
     treeSelectPaddingVertical: 4;
     treeSelectPaddingHorizontal: 12;
     treeSelectPaddingHorizontalTag: 4;

package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.styles.d.ts

@@ -45,9 +45,9 @@ export declare const getTreeSelectOptionStyle: ({ disabled, loading, selected, i
         readonly transition: "background .2s, color .2s";
         readonly cursor: "pointer" | "not-allowed";
         readonly borderRadius: 4;
-        readonly background: "#F5F5F5" | "unset";
+        readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
         readonly ":hover, :focus, focus-visible": {
-            readonly background: "#F5F5F5" | "unset";
+            readonly background: `rgba(${number}, ${number}, ${number}, 0.08)` | "unset";
             readonly outline: "none";
         };
     };

package/dist/components/Upload/Upload.tokens.d.ts

@@ -3,7 +3,7 @@ export declare const getUploadTokens: (theme: Theme) => {
     uploadText: "#262626";
     uploadTextSecondary: "#8C8C8C";
     uploadTextDisabled: "#8C8C8C";
-    uploadBgHover: "#F5F5F5";
+    uploadBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
     uploadBorder: "#D9D9D9";
     uploadDanger: "#FF4D4F";
     uploadDraggerBg: "#FAFAFA";

package/dist/components/Upload/components/UploadListItem/UploadListItem.styles.d.ts

@@ -15,7 +15,7 @@ export declare const getLiStyle: (uploadTokens: UploadTokens, listType: ListType
     padding: string;
     borderRadius: 4;
     ":hover": {
-        background: "#F5F5F5";
+        background: `rgba(${number}, ${number}, ${number}, 0.08)`;
     };
     display: string;
     columnGap: 8;
@@ -62,9 +62,9 @@ export declare const getRemoveIconWrapperStyle: (uploadTokens: UploadTokens, sta
     borderRadius: 4;
     color: "#FF4D4F" | `rgba(${number}, ${number}, ${number}, 0.3)`;
     ":hover": {
-        background: `rgba(${number}, ${number}, ${number}, 0.05)`;
+        background: `rgba(${number}, ${number}, ${number}, 0.08)`;
     };
     ":active": {
-        background: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        background: `rgba(${number}, ${number}, ${number}, 0.12)`;
     };
 };

package/dist/contexts/themeContext.d.ts

@@ -96,8 +96,8 @@ export declare const ThemeContext: import('react').Context<{
     bgComplimentary: "#FAFAFA";
     bgSecondary: "#F0F0F0";
     bgContainer: "#FFFFFF";
-    bgContainerHover: "#F5F5F5";
-    bgContainerActive: "#D9D9D9";
+    bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgContainerDisabled: "#F0F0F0";
     bgContainerDisabledContrast: "#D9D9D9";
     bgContainerComplimentary: "#FAFAFA";
@@ -106,10 +106,10 @@ export declare const ThemeContext: import('react').Context<{
     bgContainerInverseActive: "#1F1F1F";
     bgControl: "#BFBFBF";
     bgControlHover: "#8C8C8C";
-    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-    bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+    bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgFloat: "#FFFFFF";
     bgFloatContrast: "#262626";
     bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -132,27 +132,32 @@ export declare const ThemeContext: import('react').Context<{
     primaryHover: "#50CCC4";
     primaryActive: "#03888C";
     primaryBg: "#E1FAF6";
+    primaryBgHover: "#C3F4ED";
     primaryBorder: "#77D9CF";
     primaryHoverInverse: "#E1FAF6";
     primaryActiveInverse: "#A3E6DD";
     typography: {
         readonly header1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 24;
             readonly lineHeight: "32px";
         };
         readonly header2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 16;
             readonly lineHeight: "24px";
         };
         readonly subheader1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 14;
             readonly lineHeight: "20px";
         };
         readonly subheader2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 12;
             readonly lineHeight: "20px";
         };
@@ -314,6 +319,7 @@ export declare const ThemeContext: import('react').Context<{
     thrush40: "#50CCC4";
     thrush30: "#77D9CF";
     thrush20: "#A3E6DD";
+    thrush15: "#C3F4ED";
     thrush10: "#E1FAF6";
     transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -323,7 +329,9 @@ export declare const ThemeContext: import('react').Context<{
     transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -333,7 +341,9 @@ export declare const ThemeContext: import('react').Context<{
     transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     neutral130: "#000000";
     neutral120: "#141414";

package/dist/hooks/useControlledState/index.d.ts

@@ -0,0 +1 @@
+export { useControlledState } from './useControlledState';

package/dist/hooks/useControlledState/useControlledState.d.ts

@@ -0,0 +1 @@
+export declare const useControlledState: <T>(initialState: T | (() => T), value?: T) => readonly [T, import('react').Dispatch<import('react').SetStateAction<T>>];

package/dist/hooks/useControlledState/useControlledState.js

@@ -0,0 +1,16 @@
+import { useState } from "react";
+import { isUndefined } from "lodash-es";
+import { useFirstMountLayoutEffect } from "../useFirstMountLayoutEffect/useFirstMountLayoutEffect.js";
+const useControlledState = (initialState, value) => {
+  const [innerValue, setInnerValue] = useState(initialState);
+  const mergedValue = isUndefined(value) ? innerValue : value;
+  useFirstMountLayoutEffect((firstMount) => {
+    if (!firstMount) {
+      setInnerValue(value);
+    }
+  }, [value]);
+  return [mergedValue, setInnerValue];
+};
+export {
+  useControlledState
+};

package/dist/hooks/useFirstMountLayoutEffect/index.d.ts

@@ -0,0 +1 @@
+export { useFirstMountLayoutEffect } from './useFirstMountLayoutEffect';

package/dist/hooks/useFirstMountLayoutEffect/useFirstMountLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList } from 'react';
+export declare const useFirstMountLayoutEffect: (callback: (firstMount: boolean) => void, deps?: DependencyList) => void;

package/dist/hooks/useFirstMountLayoutEffect/useFirstMountLayoutEffect.js

@@ -0,0 +1,15 @@
+import { useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+const useFirstMountLayoutEffect = (callback, deps) => {
+  const firstMountRef = useRef(true);
+  useIsomorphicLayoutEffect(() => callback(firstMountRef.current), deps);
+  useIsomorphicLayoutEffect(() => {
+    firstMountRef.current = false;
+    return () => {
+      firstMountRef.current = true;
+    };
+  }, []);
+};
+export {
+  useFirstMountLayoutEffect
+};

package/dist/hooks/useIsomorphicLayoutEffect/index.d.ts

@@ -0,0 +1 @@
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -0,0 +1,5 @@
+import { useLayoutEffect, useEffect } from "react";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export {
+  useIsomorphicLayoutEffect
+};

package/dist/hooks/useTheme/useTheme.d.ts

@@ -96,8 +96,8 @@ export declare const useTheme: () => {
     bgComplimentary: "#FAFAFA";
     bgSecondary: "#F0F0F0";
     bgContainer: "#FFFFFF";
-    bgContainerHover: "#F5F5F5";
-    bgContainerActive: "#D9D9D9";
+    bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgContainerDisabled: "#F0F0F0";
     bgContainerDisabledContrast: "#D9D9D9";
     bgContainerComplimentary: "#FAFAFA";
@@ -106,10 +106,10 @@ export declare const useTheme: () => {
     bgContainerInverseActive: "#1F1F1F";
     bgControl: "#BFBFBF";
     bgControlHover: "#8C8C8C";
-    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-    bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+    bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
     bgFloat: "#FFFFFF";
     bgFloatContrast: "#262626";
     bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
@@ -132,27 +132,32 @@ export declare const useTheme: () => {
     primaryHover: "#50CCC4";
     primaryActive: "#03888C";
     primaryBg: "#E1FAF6";
+    primaryBgHover: "#C3F4ED";
     primaryBorder: "#77D9CF";
     primaryHoverInverse: "#E1FAF6";
     primaryActiveInverse: "#A3E6DD";
     typography: {
         readonly header1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 24;
             readonly lineHeight: "32px";
         };
         readonly header2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 16;
             readonly lineHeight: "24px";
         };
         readonly subheader1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 14;
             readonly lineHeight: "20px";
         };
         readonly subheader2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 12;
             readonly lineHeight: "20px";
         };
@@ -314,6 +319,7 @@ export declare const useTheme: () => {
     thrush40: "#50CCC4";
     thrush30: "#77D9CF";
     thrush20: "#A3E6DD";
+    thrush15: "#C3F4ED";
     thrush10: "#E1FAF6";
     transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -323,7 +329,9 @@ export declare const useTheme: () => {
     transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -333,7 +341,9 @@ export declare const useTheme: () => {
     transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     neutral130: "#000000";
     neutral120: "#141414";

package/dist/index.d.ts

@@ -45,4 +45,6 @@ export { type FormProps, type FormItemProps, Form } from './components/Form';
 export { type PopconfirmProps, Popconfirm } from './components/Popconfirm';
 export { TreeSelect } from './components/TreeSelect';
 export type { TreeSelectProps } from './components/TreeSelect';
+export { type EmptyProps, Empty } from './components/Empty';
+export { type SegmentedProps, type SegmentedLabeledOption, Segmented, } from './components/Segmented';
 export * from 'react-intersection-observer/test-utils';

package/dist/index.js

@@ -33,6 +33,8 @@ import { useConfig } from "./components/ConfigProvider/hooks/useConfig/useConfig
 import { Form } from "./components/Form/Form.js";
 import { Popconfirm } from "./components/Popconfirm/Popconfirm.js";
 import { TreeSelect } from "./components/TreeSelect/TreeSelect.js";
+import { Empty } from "./components/Empty/Empty.js";
+import { Segmented } from "./components/Segmented/Segmented.js";
 export {
   Alert,
   Avatar,
@@ -42,6 +44,7 @@ export {
   ConfigProvider,
   DatePicker,
   Dropdown,
+  Empty,
   Form,
   Input,
   InputNumber,
@@ -50,6 +53,7 @@ export {
   Popover,
   Progress,
   Radio,
+  Segmented,
   Select,
   Switch,
   Tabs,

package/dist/themes/baseTokens/baseColorTokens/baseColorTokens.d.ts

@@ -118,6 +118,7 @@ export declare const baseColorTokens: {
     thrush40: "#50CCC4";
     thrush30: "#77D9CF";
     thrush20: "#A3E6DD";
+    thrush15: "#C3F4ED";
     thrush10: "#E1FAF6";
     transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -127,7 +128,9 @@ export declare const baseColorTokens: {
     transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
     transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
@@ -137,7 +140,9 @@ export declare const baseColorTokens: {
     transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
     neutral130: "#000000";
     neutral120: "#141414";

package/dist/themes/baseTokens/baseColorTokens/colorGroups/thrushColor.d.ts

@@ -8,5 +8,6 @@ export declare const thrushColors: {
     readonly thrush40: "#50CCC4";
     readonly thrush30: "#77D9CF";
     readonly thrush20: "#A3E6DD";
+    readonly thrush15: "#C3F4ED";
     readonly thrush10: "#E1FAF6";
 };

package/dist/themes/baseTokens/baseColorTokens/colorGroups/thrushColor.js

@@ -8,6 +8,7 @@ const thrushColors = {
   thrush40: "#50CCC4",
   thrush30: "#77D9CF",
   thrush20: "#A3E6DD",
+  thrush15: "#C3F4ED",
   thrush10: "#E1FAF6"
 };
 export {

package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentBlackColors.d.ts

@@ -7,6 +7,8 @@ export declare const transparentBlackColors: {
     readonly transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     readonly transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     readonly transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    readonly transparentBlack12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     readonly transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    readonly transparentBlack8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     readonly transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
 };

package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentBlackColors.js

@@ -8,7 +8,9 @@ const transparentBlackColors = {
   transparentBlack40: black2Rgba(0.4),
   transparentBlack30: black2Rgba(0.3),
   transparentBlack20: black2Rgba(0.2),
+  transparentBlack12: black2Rgba(0.12),
   transparentBlack10: black2Rgba(0.1),
+  transparentBlack8: black2Rgba(0.08),
   transparentBlack5: black2Rgba(0.05)
 };
 export {

package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentWhiteColors.d.ts

@@ -7,6 +7,8 @@ export declare const transparentWhiteColors: {
     readonly transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
     readonly transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
     readonly transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    readonly transparentWhite12: `rgba(${number}, ${number}, ${number}, 0.12)`;
     readonly transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    readonly transparentWhite8: `rgba(${number}, ${number}, ${number}, 0.08)`;
     readonly transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
 };

package/dist/themes/baseTokens/baseColorTokens/colorGroups/transparentWhiteColors.js

@@ -8,7 +8,9 @@ const transparentWhiteColors = {
   transparentWhite40: white2Rgba(0.4),
   transparentWhite30: white2Rgba(0.3),
   transparentWhite20: white2Rgba(0.2),
+  transparentWhite12: white2Rgba(0.12),
   transparentWhite10: white2Rgba(0.1),
+  transparentWhite8: white2Rgba(0.08),
   transparentWhite5: white2Rgba(0.05)
 };
 export {

package/dist/themes/baseTokens/baseTypographyTokens/baseTypographyTokens.d.ts

@@ -1,21 +1,25 @@
 export declare const baseTypographyTokens: {
     readonly header1: {
         readonly fontFamily: "Roboto";
+        readonly fontWeight: 500;
         readonly fontSize: 24;
         readonly lineHeight: "32px";
     };
     readonly header2: {
         readonly fontFamily: "Roboto";
+        readonly fontWeight: 500;
         readonly fontSize: 16;
         readonly lineHeight: "24px";
     };
     readonly subheader1: {
         readonly fontFamily: "Roboto";
+        readonly fontWeight: 500;
         readonly fontSize: 14;
         readonly lineHeight: "20px";
     };
     readonly subheader2: {
         readonly fontFamily: "Roboto";
+        readonly fontWeight: 500;
         readonly fontSize: 12;
         readonly lineHeight: "20px";
     };

package/dist/themes/baseTokens/baseTypographyTokens/baseTypographyTokens.js

@@ -5,21 +5,25 @@ const fonts = {
 const baseTypographyTokens = {
   header1: {
     fontFamily: fonts.mainFontFamily,
+    fontWeight: 500,
     fontSize: 24,
     lineHeight: "32px"
   },
   header2: {
     fontFamily: fonts.mainFontFamily,
+    fontWeight: 500,
     fontSize: 16,
     lineHeight: "24px"
   },
   subheader1: {
     fontFamily: fonts.mainFontFamily,
+    fontWeight: 500,
     fontSize: 14,
     lineHeight: "20px"
   },
   subheader2: {
     fontFamily: fonts.mainFontFamily,
+    fontWeight: 500,
     fontSize: 12,
     lineHeight: "20px"
   },

package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/backgroundColorTokens.d.ts

@@ -4,8 +4,8 @@ export declare const backgroundColorTokens: {
         bgComplimentary: "#FAFAFA";
         bgSecondary: "#F0F0F0";
         bgContainer: "#FFFFFF";
-        bgContainerHover: "#F5F5F5";
-        bgContainerActive: "#D9D9D9";
+        bgContainerHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgContainerActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
         bgContainerDisabled: "#F0F0F0";
         bgContainerDisabledContrast: "#D9D9D9";
         bgContainerComplimentary: "#FAFAFA";
@@ -14,10 +14,10 @@ export declare const backgroundColorTokens: {
         bgContainerInverseActive: "#1F1F1F";
         bgControl: "#BFBFBF";
         bgControlHover: "#8C8C8C";
-        bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
-        bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
-        bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
-        bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        bgIconHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgIconActive: `rgba(${number}, ${number}, ${number}, 0.12)`;
+        bgRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+        bgRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
         bgFloat: "#FFFFFF";
         bgFloatContrast: "#262626";
         bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;

package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/backgroundColorTokens.js

@@ -5,8 +5,8 @@ const backgroundColorTokens = {
     bgComplimentary: baseColorTokens.neutral20,
     bgSecondary: baseColorTokens.neutral40,
     bgContainer: baseColorTokens.neutral10,
-    bgContainerHover: baseColorTokens.neutral30,
-    bgContainerActive: baseColorTokens.neutral50,
+    bgContainerHover: baseColorTokens.transparentBlack8,
+    bgContainerActive: baseColorTokens.transparentBlack12,
     bgContainerDisabled: baseColorTokens.neutral40,
     bgContainerDisabledContrast: baseColorTokens.neutral50,
     bgContainerComplimentary: baseColorTokens.neutral20,
@@ -15,10 +15,10 @@ const backgroundColorTokens = {
     bgContainerInverseActive: baseColorTokens.neutral110,
     bgControl: baseColorTokens.neutral60,
     bgControlHover: baseColorTokens.neutral70,
-    bgIconHover: baseColorTokens.transparentBlack5,
-    bgIconActive: baseColorTokens.transparentBlack10,
-    bgRail: baseColorTokens.transparentBlack5,
-    bgRailHover: baseColorTokens.transparentBlack10,
+    bgIconHover: baseColorTokens.transparentBlack8,
+    bgIconActive: baseColorTokens.transparentBlack12,
+    bgRail: baseColorTokens.transparentBlack8,
+    bgRailHover: baseColorTokens.transparentBlack12,
     bgFloat: baseColorTokens.neutral10,
     bgFloatContrast: baseColorTokens.neutral100,
     bgMask: baseColorTokens.transparentBlack30

package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/primaryColorTokens.d.ts

@@ -4,6 +4,7 @@ export declare const primaryColorTokens: {
         primaryHover: "#50CCC4";
         primaryActive: "#03888C";
         primaryBg: "#E1FAF6";
+        primaryBgHover: "#C3F4ED";
         primaryBorder: "#77D9CF";
         primaryHoverInverse: "#E1FAF6";
         primaryActiveInverse: "#A3E6DD";

package/dist/themes/semanticTokens/colorSemanticTokens/semanticBlocks/primaryColorTokens.js

@@ -5,6 +5,7 @@ const primaryColorTokens = {
     primaryHover: baseColorTokens.thrush40,
     primaryActive: baseColorTokens.thrush70,
     primaryBg: baseColorTokens.thrush10,
+    primaryBgHover: baseColorTokens.thrush15,
     primaryBorder: baseColorTokens.thrush30,
     primaryHoverInverse: baseColorTokens.thrush10,
     primaryActiveInverse: baseColorTokens.thrush20