@teamturing/react-kit 2.0.1 → 2.1.0

package/dist/core/ThemeProvider/index.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+type Theme = {
+    [key in string]: any;
+};
+type Props = {
+    theme?: Theme;
+};
+declare const ThemeProvider: ({ theme: propTheme, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default ThemeProvider;

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export { default as StyledIcon } from './core/StyledIcon';
 export type { StyledIconProps } from './core/StyledIcon';
 export { default as Text } from './core/Text';
 export type { TextProps } from './core/Text';
+export { default as ThemeProvider } from './core/ThemeProvider';
 export { default as View } from './core/View';
 export type { ViewProps } from './core/View';
 export { default as UnstyledButton } from './core/_UnstyledButton';
@@ -43,3 +44,7 @@ export { default as useOutsideClick } from './hook/useOutsideClick';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef';
 export { default as useResize } from './hook/useResize';
 export { default as useToggleHandler } from './hook/useToggleHandler';
+/**
+ * theme
+ */
+export { default as theme } from './theme';

package/dist/index.js

@@ -262,6 +262,65 @@ const color$1 = {
   ...scaleColor
 };
 
+const shadow$1 = {
+  shadowMedium: '0px 0px 1px 0px rgba(0, 0, 0, 0.06), 0px 8px 24px 0px rgba(0, 0, 0, 0.12)'
+};
+
+const surfaceElevation = {
+  'surface': palette.white,
+  'surface/overlay': palette.white
+};
+const shadowElevation = {
+  'shadow/overlay': shadow$1.shadowMedium
+};
+({
+  ...surfaceElevation,
+  ...shadowElevation
+});
+
+const colorStopList = {
+  colorStopListVioletPink: '#8E6CF0, #CF75F3',
+  colorStopListBlackGray: '#0F0E0F, #595959',
+  colorStopListWhite: '#FFFFFF, #FFFFFF00',
+  colorStopListBlack: '#000000, #00000000'
+};
+
+const direction = {
+  directionToRight: 'to right',
+  directionToLeft: 'to left',
+  directionToRightBottom: 'to right bottom',
+  directionToTop: 'to top'
+};
+
+const generateGradientTokenValue = (direction$1, colorStopList$1) => `${direction[direction$1]}, ${colorStopList[colorStopList$1]}`;
+const textGradient = {
+  'text/accent': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+};
+const bgGradient = {
+  'bg/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink'),
+  'bg/accent/neutral': generateGradientTokenValue('directionToRightBottom', 'colorStopListBlackGray')
+};
+const borderGradient = {
+  'border/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+};
+const overlayGradient = {
+  'overlay/subtlest/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
+  'overlay/subtlest/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
+  'overlay/subtlest/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/floating/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
+  'overlay/floating/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
+  'overlay/floating/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/bold/toright': generateGradientTokenValue('directionToRight', 'colorStopListBlack'),
+  'overlay/bold/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListBlack'),
+  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack')
+};
+const gradient = {
+  ...textGradient,
+  ...bgGradient,
+  ...borderGradient,
+  ...overlayGradient
+};
+
 const rounding = {
   rounding0: 0,
   rounding4: 4,
@@ -3015,13 +3074,13 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/inverse']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/primary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/primary/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3041,13 +3100,13 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/primary']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/secondary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/secondary/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3067,13 +3126,13 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/accent/gray']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3093,7 +3152,7 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/neutral/bolder']
       },
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,
@@ -3106,13 +3165,13 @@ const BaseButton = styled__default.default(UnstyledButton)(({
         borderRadius: radii.full,
         boxSizing: 'border-box'
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/subtler/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/subtler/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3124,7 +3183,7 @@ const BaseButton = styled__default.default(UnstyledButton)(({
         '& svg': {
           color: color$1['icon/disabled']
         },
-        ':after': {
+        '&:after': {
           display: 'none'
         }
       } : {})
@@ -3135,19 +3194,19 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/neutral/bolder']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         'color': color$1['text/neutral'],
         '& svg': {
           color: color$1['icon/accent/gray']
         }
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         'color': color$1['text/neutral'],
         '& svg': {
           color: color$1['icon/accent/gray']
         }
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3167,13 +3226,13 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/inverse']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/danger/bold/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/danger/bold/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3321,7 +3380,7 @@ const BaseChip = styled__default.default.span({
       '& svg': {
         color: color$1['icon/primary']
       },
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,
@@ -3341,7 +3400,7 @@ const BaseChip = styled__default.default.span({
       '& svg': {
         color: color$1['icon/neutral/bolder']
       },
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,
@@ -3595,7 +3654,7 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     pointerEvents: 'none'
   },
   'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
-  ':focus-visible': {
+  '&:focus-visible': {
     outlineColor: color$1['border/focused'],
     outlineStyle: 'solid',
     outlineWidth: 2,
@@ -3634,10 +3693,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'primary': {
       'backgroundColor': color$1['bg/primary'],
       'color': color$1['icon/inverse'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/primary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/primary/pressed']
       },
       ...($disabled ? {
@@ -3648,10 +3707,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'secondary': {
       'backgroundColor': color$1['bg/secondary'],
       'color': color$1['icon/primary'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/secondary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/secondary/pressed']
       },
       ...($disabled ? {
@@ -3662,10 +3721,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'tertiary': {
       'backgroundColor': color$1['bg/neutral'],
       'color': color$1['icon/accent/gray'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/pressed']
       },
       ...($disabled ? {
@@ -3676,7 +3735,7 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'outlined': {
       'backgroundColor': color$1['bg/neutral/subtler'],
       'color': color$1['icon/neutral/bolder'],
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,
@@ -3689,16 +3748,16 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
         borderRadius: radii.full,
         boxSizing: 'border-box'
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/subtler/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/subtler/pressed']
       },
       ...($disabled ? {
         'backgroundColor': color$1['bg/disabled'],
         'color': color$1['icon/disabled'],
-        ':after': {
+        '&:after': {
           display: 'none'
         }
       } : {})
@@ -3706,10 +3765,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'plain-bold': {
       'backgroundColor': color$1['bg/neutral/subtler'],
       'color': color$1['icon/neutral/bolder'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         color: color$1['icon/accent/gray']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         color: color$1['icon/accent/gray']
       },
       ...($disabled ? {
@@ -3720,10 +3779,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'plain': {
       'backgroundColor': color$1['bg/neutral/subtler'],
       'color': color$1['icon/neutral/bold'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         color: color$1['icon/neutral/bolder']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         color: color$1['icon/neutral/bolder']
       },
       ...($disabled ? {
@@ -3734,10 +3793,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'plain-subtle': {
       'backgroundColor': color$1['bg/neutral/subtler'],
       'color': color$1['icon/neutral'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         color: color$1['icon/neutral/bold']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         color: color$1['icon/neutral/bold']
       },
       ...($disabled ? {
@@ -3748,10 +3807,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'danger': {
       'backgroundColor': color$1['bg/danger/bold'],
       'color': color$1['icon/inverse'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/danger/bold/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/danger/bold/pressed']
       },
       ...($disabled ? {
@@ -3794,7 +3853,7 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
     display: 'block'
   },
   'cursor': $disabled ? 'not-allowed' : 'pointer',
-  ':focus-visible': {
+  '&:focus-visible': {
     outlineColor: color$1['border/focused'],
     outlineStyle: 'solid',
     outlineWidth: 2,
@@ -3952,6 +4011,34 @@ const StyledIcon = ({
   children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
 });
 
+const theme = {
+  breakpoints,
+  space: space$1,
+  fontWeights,
+  fontSizes,
+  lineHeights,
+  radii,
+  colors: {
+    ...color$1,
+    surfaceElevation
+  },
+  gradients: gradient,
+  shadows: {
+    ...shadowElevation
+  }
+};
+
+const ThemeProvider = ({
+  theme: propTheme,
+  ...props
+}) => {
+  const theme$1 = propTheme ?? theme;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(styled.ThemeProvider, {
+    theme: theme$1,
+    ...props
+  });
+};
+
 const useMediaQuery = query => {
   const getMatches = query => {
     /**
@@ -4588,8 +4675,10 @@ exports.Spinner = Spinner;
 exports.Stack = index;
 exports.StyledIcon = StyledIcon;
 exports.Text = Text;
+exports.ThemeProvider = ThemeProvider;
 exports.UnstyledButton = UnstyledButton;
 exports.View = View;
+exports.theme = theme;
 exports.useDevice = useDevice;
 exports.useOutsideClick = useOutsideClick;
 exports.useProvidedOrCreatedRef = useProvidedOrCreatedRef;

package/dist/theme/index.d.ts

@@ -0,0 +1,226 @@
+declare const theme: {
+    breakpoints: string[];
+    space: {
+        readonly '-80': number;
+        readonly '-50': number;
+        readonly '-48': number;
+        readonly '-40': number;
+        readonly '-32': number;
+        readonly '-30': number;
+        readonly '-28': number;
+        readonly '-24': number;
+        readonly '-20': number;
+        readonly '-18': number;
+        readonly '-16': number;
+        readonly '-14': number;
+        readonly '-12': number;
+        readonly '-10': number;
+        readonly '-8': number;
+        readonly '-7': number;
+        readonly '-6': number;
+        readonly '-5': number;
+        readonly '-4': number;
+        readonly '-3': number;
+        readonly '-2': number;
+        readonly '-1': number;
+        readonly '-0.5': number;
+        readonly '-0.25': number;
+        readonly 0: number;
+        readonly 0.25: number;
+        readonly 0.5: number;
+        readonly 1: number;
+        readonly 2: number;
+        readonly 3: number;
+        readonly 4: number;
+        readonly 5: number;
+        readonly 6: number;
+        readonly 7: number;
+        readonly 8: number;
+        readonly 10: number;
+        readonly 12: number;
+        readonly 14: number;
+        readonly 16: number;
+        readonly 18: number;
+        readonly 20: number;
+        readonly 24: number;
+        readonly 28: number;
+        readonly 30: number;
+        readonly 32: number;
+        readonly 40: number;
+        readonly 48: number;
+        readonly 50: number;
+        readonly 80: number;
+    };
+    fontWeights: {
+        readonly regular: number;
+        readonly medium: number;
+        readonly bold: number;
+    };
+    fontSizes: {
+        xxs: number;
+        xs: number;
+        s: number;
+        m: number;
+        l: number;
+        xl: number;
+        xxl: number;
+        display4: number;
+        display3: number;
+        display2: number;
+        display1: number;
+    };
+    lineHeights: {
+        readonly 1: number;
+        readonly 2: number;
+    };
+    radii: {
+        readonly none: number;
+        readonly xxs: number;
+        readonly xs: number;
+        readonly s: number;
+        readonly m: number;
+        readonly l: number;
+        readonly xl: number;
+        readonly xxl: number;
+        readonly full: number;
+    };
+    colors: {
+        surfaceElevation: {
+            readonly surface: "#FFFFFF";
+            readonly 'surface/overlay': "#FFFFFF";
+        };
+        'scale/violet/0': "#F3EFFD";
+        'scale/violet/1': "#E8E1FB";
+        'scale/violet/2': "#D9CDF9";
+        'scale/violet/3': "#C6B5F6";
+        'scale/violet/4': "#9C7EEF";
+        'scale/violet/5': "#835EEB";
+        'scale/violet/6': "#7756D6";
+        'scale/violet/7': "#5D43A7";
+        'scale/violet/8': "#483481";
+        'scale/violet/9': "#372763";
+        dim: "#00000099";
+        link: "#4880ee";
+        'link/hovered': "#335ba9";
+        'link/pressed': "#335ba9";
+        'link/neutral': "#7A828D";
+        'link/neutral/hovered': "#575C64";
+        'link/neutral/pressed': "#575C64";
+        'link/neutral/bold': "#575C64";
+        'link/neutral/bold/hovered': "#33373B";
+        'link/neutral/bold/pressed': "#33373B";
+        'link/disabled': "#575C64";
+        'icon/neutral': "#D1D5DB";
+        'icon/neutral/bold': "#8D94A0";
+        'icon/neutral/bolder': "#575C64";
+        'icon/accent/gray': "#33373B";
+        'icon/accent/blue': "#4880ee";
+        'icon/accent/blue/bold': "#335ba9";
+        'icon/accent/green': "#1FCCA1";
+        'icon/accent/yellow': "#FFC107";
+        'icon/accent/red': "#F22735";
+        'icon/inverse': "#FFFFFF";
+        'icon/disabled': "#D1D5DB";
+        'icon/disabled/subtler': "#E5E7EB";
+        'icon/selected/violet': "#835EEB";
+        'icon/selected': "#33373B";
+        'icon/primary/subtle': "#C6B5F6";
+        'icon/primary': "#835EEB";
+        'icon/primary/bold': "#5D43A7";
+        'icon/success': "#1FCCA1";
+        'icon/warning': "#FFC107";
+        'icon/danger': "#F22735";
+        'border/neutral/subtle': "#F3F4F6";
+        'border/neutral': "#E5E7EB";
+        'border/neutral/bolder': "#D1D5DB";
+        'border/input': "#E5E7EB";
+        'border/inverse': "#FFFFFF1A";
+        'border/selected': "#33373B";
+        'border/disabled': "#F3F4F6";
+        'border/primary': "#835EEB";
+        'border/hovered': "#84aaf4";
+        'border/focused': "#4880ee";
+        'border/danger': "#F22735";
+        'border/success': "#1FCCA1";
+        'bg/secondary': "#F3EFFD";
+        'bg/secondary/hovered': "#D9CDF9";
+        'bg/secondary/pressed': "#D9CDF9";
+        'bg/primary': "#835EEB";
+        'bg/primary/hovered': "#5D43A7";
+        'bg/primary/pressed': "#5D43A7";
+        'bg/neutral/subtler': "#FFFFFF00";
+        'bg/neutral/subtler/hovered': "#F3F4F6";
+        'bg/neutral/subtler/pressed': "#F3F4F6";
+        'bg/neutral/subtle': "#F9FAFB";
+        'bg/neutral/subtle/hovered': "#E5E7EB";
+        'bg/neutral/subtle/pressed': "#E5E7EB";
+        'bg/neutral': "#F3F4F6";
+        'bg/neutral/hovered': "#D1D5DB";
+        'bg/neutral/pressed': "#D1D5DB";
+        'bg/neutral/bold': "#575C64";
+        'bg/neutral/bold/hovered': "#33373B";
+        'bg/neutral/bold/pressed': "#33373B";
+        'bg/neutral/bolder': "#33373B";
+        'bg/neutral/bolder/hovered': "#000000";
+        'bg/neutral/bolder/pressed': "#000000";
+        'bg/disabled': "#F3F4F6";
+        'bg/disabled/subtlest': "#FFFFFF00";
+        'bg/input': "#FFFFFF";
+        'bg/accent/blue/subtlest': "#edf2fd";
+        'bg/accent/green/subtlest': "#E9FAF6";
+        'bg/accent/yellow/subtlest': "#FFF9E6";
+        'bg/accent/red/subtlest': "#FEE9EB";
+        'bg/accent/red/subtle': "#F5525D";
+        'bg/accent/red': "#F22735";
+        'bg/accent/gray/subtlest': "#E5E7EB";
+        'bg/selected/violet': "#835EEB";
+        'bg/selected': "#33373B";
+        'bg/selected/subtle': "#F3F4F6";
+        'bg/inverse': "#000000";
+        'bg/inverse/subtlest': "#FFFFFF1A";
+        'bg/success': "#E9FAF6";
+        'bg/success/bold': "#1FCCA1";
+        'bg/warning': "#FFF9E6";
+        'bg/warning/bold': "#FFC107";
+        'bg/danger': "#FEE9EB";
+        'bg/danger/bold': "#F5525D";
+        'bg/danger/bold/hovered': "#DC2330";
+        'bg/danger/bold/pressed': "#DC2330";
+        'text/primary': "#835EEB";
+        'text/accent/blue': "#4880ee";
+        'text/accent/green': "#1FCCA1";
+        'text/accent/yellow': "#FFC107";
+        'text/accent/red': "#F22735";
+        'text/neutral/subtlest': "#8D94A0";
+        'text/neutral/subtler': "#7A828D";
+        'text/neutral/subtle': "#575C64";
+        'text/neutral': "#33373B";
+        'text/inverse': "#FFFFFF";
+        'text/inverse/subtle': "#E5E7EB";
+        'text/inverse/subtler': "#D1D5DB";
+        'text/disabled': "#8D94A0";
+        'text/success': "#1FCCA1";
+        'text/warning': "#FFC107";
+        'text/danger': "#F22735";
+        'text/selected': "#33373B";
+    };
+    gradients: {
+        readonly 'overlay/subtlest/toright': string;
+        readonly 'overlay/subtlest/toleft': string;
+        readonly 'overlay/subtlest/totop': string;
+        readonly 'overlay/floating/toright': string;
+        readonly 'overlay/floating/toleft': string;
+        readonly 'overlay/floating/totop': string;
+        readonly 'overlay/bold/toright': string;
+        readonly 'overlay/bold/toleft': string;
+        readonly 'overlay/bold/totop': string;
+        readonly 'border/accent/violet': string;
+        readonly 'bg/accent/violet': string;
+        readonly 'bg/accent/neutral': string;
+        readonly 'text/accent': string;
+    };
+    shadows: {
+        'shadow/overlay': string;
+    };
+};
+export default theme;

package/esm/core/Button/index.js

@@ -1,4 +1,5 @@
 import color from '../../packages/token-studio/esm/token/color/index.js';
+import '../../packages/token-studio/esm/token/elevation/index.js';
 import radii from '../../packages/token-studio/esm/token/radii/index.js';
 import typography from '../../packages/token-studio/esm/token/typography/index.js';
 import { forwardRef } from 'react';
@@ -134,13 +135,13 @@ const BaseButton = styled(UnstyledButton)(({
       '& svg': {
         color: color['icon/inverse']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color['bg/primary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color['bg/primary/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -160,13 +161,13 @@ const BaseButton = styled(UnstyledButton)(({
       '& svg': {
         color: color['icon/primary']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color['bg/secondary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color['bg/secondary/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -186,13 +187,13 @@ const BaseButton = styled(UnstyledButton)(({
       '& svg': {
         color: color['icon/accent/gray']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color['bg/neutral/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color['bg/neutral/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -212,7 +213,7 @@ const BaseButton = styled(UnstyledButton)(({
       '& svg': {
         color: color['icon/neutral/bolder']
       },
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,
@@ -225,13 +226,13 @@ const BaseButton = styled(UnstyledButton)(({
         borderRadius: radii.full,
         boxSizing: 'border-box'
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color['bg/neutral/subtler/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color['bg/neutral/subtler/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -243,7 +244,7 @@ const BaseButton = styled(UnstyledButton)(({
         '& svg': {
           color: color['icon/disabled']
         },
-        ':after': {
+        '&:after': {
           display: 'none'
         }
       } : {})
@@ -254,19 +255,19 @@ const BaseButton = styled(UnstyledButton)(({
       '& svg': {
         color: color['icon/neutral/bolder']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         'color': color['text/neutral'],
         '& svg': {
           color: color['icon/accent/gray']
         }
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         'color': color['text/neutral'],
         '& svg': {
           color: color['icon/accent/gray']
         }
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -286,13 +287,13 @@ const BaseButton = styled(UnstyledButton)(({
       '& svg': {
         color: color['icon/inverse']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color['bg/danger/bold/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color['bg/danger/bold/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,

package/esm/core/Chip/index.js

@@ -1,4 +1,5 @@
 import color from '../../packages/token-studio/esm/token/color/index.js';
+import '../../packages/token-studio/esm/token/elevation/index.js';
 import radii from '../../packages/token-studio/esm/token/radii/index.js';
 import typography from '../../packages/token-studio/esm/token/typography/index.js';
 import styled from 'styled-components';
@@ -99,7 +100,7 @@ const BaseChip = styled.span({
       '& svg': {
         color: color['icon/primary']
       },
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,
@@ -119,7 +120,7 @@ const BaseChip = styled.span({
       '& svg': {
         color: color['icon/neutral/bolder']
       },
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,

package/esm/core/Grid/index.js

@@ -1,4 +1,6 @@
+import '../../packages/token-studio/esm/token/elevation/index.js';
 import space from '../../packages/token-studio/esm/token/space/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';

package/esm/core/IconButton/index.js

@@ -1,5 +1,7 @@
 import color from '../../packages/token-studio/esm/token/color/index.js';
+import '../../packages/token-studio/esm/token/elevation/index.js';
 import radii from '../../packages/token-studio/esm/token/radii/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
@@ -44,7 +46,7 @@ const BaseIconButton = styled(UnstyledButton)(({
     pointerEvents: 'none'
   },
   'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
-  ':focus-visible': {
+  '&:focus-visible': {
     outlineColor: color['border/focused'],
     outlineStyle: 'solid',
     outlineWidth: 2,
@@ -83,10 +85,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'primary': {
       'backgroundColor': color['bg/primary'],
       'color': color['icon/inverse'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color['bg/primary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color['bg/primary/pressed']
       },
       ...($disabled ? {
@@ -97,10 +99,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'secondary': {
       'backgroundColor': color['bg/secondary'],
       'color': color['icon/primary'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color['bg/secondary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color['bg/secondary/pressed']
       },
       ...($disabled ? {
@@ -111,10 +113,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'tertiary': {
       'backgroundColor': color['bg/neutral'],
       'color': color['icon/accent/gray'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color['bg/neutral/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color['bg/neutral/pressed']
       },
       ...($disabled ? {
@@ -125,7 +127,7 @@ const BaseIconButton = styled(UnstyledButton)(({
     'outlined': {
       'backgroundColor': color['bg/neutral/subtler'],
       'color': color['icon/neutral/bolder'],
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,
@@ -138,16 +140,16 @@ const BaseIconButton = styled(UnstyledButton)(({
         borderRadius: radii.full,
         boxSizing: 'border-box'
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color['bg/neutral/subtler/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color['bg/neutral/subtler/pressed']
       },
       ...($disabled ? {
         'backgroundColor': color['bg/disabled'],
         'color': color['icon/disabled'],
-        ':after': {
+        '&:after': {
           display: 'none'
         }
       } : {})
@@ -155,10 +157,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'plain-bold': {
       'backgroundColor': color['bg/neutral/subtler'],
       'color': color['icon/neutral/bolder'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         color: color['icon/accent/gray']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         color: color['icon/accent/gray']
       },
       ...($disabled ? {
@@ -169,10 +171,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'plain': {
       'backgroundColor': color['bg/neutral/subtler'],
       'color': color['icon/neutral/bold'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         color: color['icon/neutral/bolder']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         color: color['icon/neutral/bolder']
       },
       ...($disabled ? {
@@ -183,10 +185,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'plain-subtle': {
       'backgroundColor': color['bg/neutral/subtler'],
       'color': color['icon/neutral'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         color: color['icon/neutral/bold']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         color: color['icon/neutral/bold']
       },
       ...($disabled ? {
@@ -197,10 +199,10 @@ const BaseIconButton = styled(UnstyledButton)(({
     'danger': {
       'backgroundColor': color['bg/danger/bold'],
       'color': color['icon/inverse'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color['bg/danger/bold/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color['bg/danger/bold/pressed']
       },
       ...($disabled ? {

package/esm/core/IconToggleButton/index.js

@@ -1,5 +1,7 @@
 import color from '../../packages/token-studio/esm/token/color/index.js';
+import '../../packages/token-studio/esm/token/elevation/index.js';
 import radii from '../../packages/token-studio/esm/token/radii/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
@@ -39,7 +41,7 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
     display: 'block'
   },
   'cursor': $disabled ? 'not-allowed' : 'pointer',
-  ':focus-visible': {
+  '&:focus-visible': {
     outlineColor: color['border/focused'],
     outlineStyle: 'solid',
     outlineWidth: 2,

package/esm/core/Spinner/index.js

@@ -1,6 +1,8 @@
 import 'react';
 import SvgProgressGradient from '../../packages/icons/esm/ProgressGradient.js';
 import color from '../../packages/token-studio/esm/token/color/index.js';
+import '../../packages/token-studio/esm/token/elevation/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
 import styled, { keyframes } from 'styled-components';
 
 const spin = keyframes`

package/esm/core/Stack/index.js

@@ -1,4 +1,6 @@
+import '../../packages/token-studio/esm/token/elevation/index.js';
 import space from '../../packages/token-studio/esm/token/space/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';

package/esm/core/Text/index.js

@@ -1,3 +1,4 @@
+import '../../packages/token-studio/esm/token/elevation/index.js';
 import typography from '../../packages/token-studio/esm/token/typography/index.js';
 import styled from 'styled-components';
 import { fontSize, fontWeight, lineHeight, textAlign } from '../../node_modules/styled-system/dist/index.esm.js';

package/esm/core/ThemeProvider/index.js

@@ -0,0 +1,16 @@
+import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import theme from '../../theme/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const ThemeProvider = ({
+  theme: propTheme,
+  ...props
+}) => {
+  const theme$1 = propTheme ?? theme;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, {
+    theme: theme$1,
+    ...props
+  });
+};
+
+export { ThemeProvider as default };

package/esm/enigma/EnigmaUI/index.js

@@ -1,4 +1,6 @@
 import breakpoints from '../../packages/token-studio/esm/token/breakpoints/index.js';
+import '../../packages/token-studio/esm/token/elevation/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
 import useMediaQuery from '../../hook/useMediaQuery.js';
 import SingleColumnLayout from '../Layout/SingleColumnLayout/index.js';
 import ImageView from '../View/ImageView/index.js';

package/esm/index.js

@@ -11,6 +11,7 @@ export { default as Spinner } from './core/Spinner/index.js';
 export { default as Stack } from './core/Stack/index.js';
 export { default as StyledIcon } from './core/StyledIcon/index.js';
 export { default as Text } from './core/Text/index.js';
+export { default as ThemeProvider } from './core/ThemeProvider/index.js';
 export { default as View } from './core/View/index.js';
 export { default as UnstyledButton } from './core/_UnstyledButton.js';
 export { default as EnigmaUI } from './enigma/EnigmaUI/index.js';
@@ -19,3 +20,4 @@ export { default as useOutsideClick } from './hook/useOutsideClick.js';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef.js';
 export { default as useResize } from './hook/useResize.js';
 export { default as useToggleHandler } from './hook/useToggleHandler.js';
+export { default as theme } from './theme/index.js';

package/esm/packages/token-studio/esm/foundation/gradient/colorStopList/index.js

@@ -0,0 +1,8 @@
+const colorStopList = {
+  colorStopListVioletPink: '#8E6CF0, #CF75F3',
+  colorStopListBlackGray: '#0F0E0F, #595959',
+  colorStopListWhite: '#FFFFFF, #FFFFFF00',
+  colorStopListBlack: '#000000, #00000000'
+};
+
+export { colorStopList as default };

package/esm/packages/token-studio/esm/foundation/gradient/direction/index.js

@@ -0,0 +1,8 @@
+const direction = {
+  directionToRight: 'to right',
+  directionToLeft: 'to left',
+  directionToRightBottom: 'to right bottom',
+  directionToTop: 'to top'
+};
+
+export { direction as default };

package/esm/packages/token-studio/esm/foundation/shadow/index.js

@@ -0,0 +1,5 @@
+const shadow = {
+  shadowMedium: '0px 0px 1px 0px rgba(0, 0, 0, 0.06), 0px 8px 24px 0px rgba(0, 0, 0, 0.12)'
+};
+
+export { shadow as default };

package/esm/packages/token-studio/esm/token/elevation/index.js

@@ -0,0 +1,16 @@
+import palette from '../../foundation/palette/index.js';
+import shadow from '../../foundation/shadow/index.js';
+
+const surfaceElevation = {
+  'surface': palette.white,
+  'surface/overlay': palette.white
+};
+const shadowElevation = {
+  'shadow/overlay': shadow.shadowMedium
+};
+({
+  ...surfaceElevation,
+  ...shadowElevation
+});
+
+export { shadowElevation, surfaceElevation };

package/esm/packages/token-studio/esm/token/gradient/index.js

@@ -0,0 +1,33 @@
+import colorStopList from '../../foundation/gradient/colorStopList/index.js';
+import direction from '../../foundation/gradient/direction/index.js';
+
+const generateGradientTokenValue = (direction$1, colorStopList$1) => `${direction[direction$1]}, ${colorStopList[colorStopList$1]}`;
+const textGradient = {
+  'text/accent': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+};
+const bgGradient = {
+  'bg/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink'),
+  'bg/accent/neutral': generateGradientTokenValue('directionToRightBottom', 'colorStopListBlackGray')
+};
+const borderGradient = {
+  'border/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+};
+const overlayGradient = {
+  'overlay/subtlest/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
+  'overlay/subtlest/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
+  'overlay/subtlest/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/floating/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
+  'overlay/floating/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
+  'overlay/floating/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/bold/toright': generateGradientTokenValue('directionToRight', 'colorStopListBlack'),
+  'overlay/bold/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListBlack'),
+  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack')
+};
+const gradient = {
+  ...textGradient,
+  ...bgGradient,
+  ...borderGradient,
+  ...overlayGradient
+};
+
+export { bgGradient, borderGradient, gradient as default, overlayGradient, textGradient };

package/esm/theme/index.js

@@ -0,0 +1,29 @@
+import breakpoints from '../packages/token-studio/esm/token/breakpoints/index.js';
+import color from '../packages/token-studio/esm/token/color/index.js';
+import { surfaceElevation, shadowElevation } from '../packages/token-studio/esm/token/elevation/index.js';
+import gradient from '../packages/token-studio/esm/token/gradient/index.js';
+import radii from '../packages/token-studio/esm/token/radii/index.js';
+import space from '../packages/token-studio/esm/token/space/index.js';
+import '../packages/token-studio/esm/token/typography/index.js';
+import fontSizes from '../packages/token-studio/esm/token/typography/fontSizes.js';
+import fontWeights from '../packages/token-studio/esm/token/typography/fontWeights.js';
+import lineHeights from '../packages/token-studio/esm/token/typography/lineHeights.js';
+
+const theme = {
+  breakpoints,
+  space,
+  fontWeights,
+  fontSizes,
+  lineHeights,
+  radii,
+  colors: {
+    ...color,
+    surfaceElevation
+  },
+  gradients: gradient,
+  shadows: {
+    ...shadowElevation
+  }
+};
+
+export { theme as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -55,5 +55,5 @@
     "lodash.throttle": "^4.1.1",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "f109beda81cc597a7c045964c71a1c0f209a30ec"
+  "gitHead": "ff56ac7dc09f3aa5318b939a50aae9d0fdbc522c"
 }