@teamturing/react-kit 2.21.6 → 2.21.7

package/esm/core/Tab/TabItem.js

@@ -1,4 +1,3 @@
-import typography from '../../packages/token-studio/esm/token/typography/index.js';
 import { scrollIntoView } from '../../packages/utils/esm/scrollIntoView.js';
 import { useRef, useContext } from 'react';
 import styled from 'styled-components';
@@ -77,15 +76,17 @@ const BaseTabItem = styled(UnstyledButton)(({
     outlineWidth: 2,
     outlineOffset: 2
   }
-}), () => variant({
+}), ({
+  theme
+}) => variant({
   prop: 'size',
   variants: {
     l: {
       'px': 4,
       'py': 2,
-      'fontSize': typography['s'].fontSize,
-      'fontWeight': typography['s'].fontWeight,
-      'lineHeight': typography['s'].lineHeight,
+      'fontSize': theme.fontSizes.s,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       '& svg': {
         width: 20,
         height: 20
@@ -94,9 +95,9 @@ const BaseTabItem = styled(UnstyledButton)(({
     m: {
       'px': 4,
       'py': 2,
-      'fontSize': typography['xs'].fontSize,
-      'fontWeight': typography['xs'].fontWeight,
-      'lineHeight': typography['xs'].lineHeight,
+      'fontSize': theme.fontSizes.xs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       '& svg': {
         width: 20,
         height: 20
@@ -105,9 +106,9 @@ const BaseTabItem = styled(UnstyledButton)(({
     s: {
       'px': 3,
       'py': 2,
-      'fontSize': typography['xxs'].fontSize,
-      'fontWeight': typography['xxs'].fontWeight,
-      'lineHeight': typography['xxs'].lineHeight,
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       '& svg': {
         width: 16,
         height: 16

package/esm/core/Tab/index.js

@@ -1,11 +1,9 @@
 import { createContext, useRef, useState, useEffect } from 'react';
 import SvgChevronLeft from '../../packages/icons/esm/ChevronLeft.js';
 import SvgChevronRight from '../../packages/icons/esm/ChevronRight.js';
-import elevation from '../../packages/token-studio/esm/token/elevation/index.js';
-import gradient from '../../packages/token-studio/esm/token/gradient/index.js';
-import '../../packages/token-studio/esm/token/typography/index.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import throttle from '../../node_modules/lodash.throttle/index.js';
+import { useTheme } from 'styled-components';
 import useResize from '../../hook/useResize.js';
 import IconButton from '../IconButton/index.js';
 import View from '../View/index.js';
@@ -19,6 +17,7 @@ const Tab = ({
   gap = 2,
   children
 }) => {
+  const theme = useTheme();
   const rootRef = useRef(null);
   const [isLeftButtonVisible, setIsLeftButtonVisible] = useState(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
   const [isRightButtonVisible, setIsRightButtonVisible] = useState(rootRef.current ? rootRef.current.clientWidth + rootRef.current.scrollLeft < rootRef.current.scrollWidth : false);
@@ -86,7 +85,7 @@ const Tab = ({
               bottom: 0,
               width: forcePixelValue(gradientWidth),
               height: '100%',
-              background: `linear-gradient(${gradient['overlay/floating/toright']})`,
+              background: `linear-gradient(${theme.gradients['overlay/floating/toright']})`,
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
@@ -97,7 +96,7 @@ const Tab = ({
               top: 0,
               left: 0,
               bottom: 0,
-              backgroundColor: elevation.surface
+              backgroundColor: theme.colors.surface
             },
             children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
               size: 's',
@@ -115,7 +114,7 @@ const Tab = ({
               bottom: 0,
               width: forcePixelValue(gradientWidth),
               height: '100%',
-              background: `linear-gradient(${gradient['overlay/floating/toleft']})`,
+              background: `linear-gradient(${theme.gradients['overlay/floating/toleft']})`,
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
@@ -126,7 +125,7 @@ const Tab = ({
               top: 0,
               right: 0,
               bottom: 0,
-              backgroundColor: elevation.surface
+              backgroundColor: theme.colors.surface
             },
             children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
               size: 's',

package/esm/core/Text/index.js

@@ -1,4 +1,3 @@
-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';
 import { sx, wordBreak, whiteSpace, textDecoration } from '../../utils/styled-system/index.js';
@@ -12,34 +11,136 @@ const Text = styled.span({
   '& > span': {
     display: 'inline'
   }
-}, variant({
+}, ({
+  theme
+}) => variant({
   prop: 'typography',
   variants: {
-    'display1': typography.display1,
-    'display2': typography.display2,
-    'display3': typography.display3,
-    'display4': typography.display4,
-    'xxl/regular': typography['xxl/regular'],
-    'xxl': typography['xxl'],
-    'xxl/bold': typography['xxl/bold'],
-    'xl/regular': typography['xl/regular'],
-    'xl': typography['xl'],
-    'xl/bold': typography['xl/bold'],
-    'l/regular': typography['l/regular'],
-    'l': typography['l'],
-    'l/bold': typography['l/bold'],
-    'm/regular': typography['m/regular'],
-    'm': typography['m'],
-    'm/bold': typography['m/bold'],
-    's/regular': typography['s/regular'],
-    's': typography['s'],
-    's/bold': typography['s/bold'],
-    'xs/regular': typography['xs/regular'],
-    'xs': typography['xs'],
-    'xs/bold': typography['xs/bold'],
-    'xxs/regular': typography['xxs/regular'],
-    'xxs': typography['xxs'],
-    'xxs/bold': typography['xxs/bold']
+    'display1': {
+      fontSize: theme.fontSizes.display1,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[1]
+    },
+    'display2': {
+      fontSize: theme.fontSizes.display2,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[1]
+    },
+    'display3': {
+      fontSize: theme.fontSizes.display3,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[1]
+    },
+    'display4': {
+      fontSize: theme.fontSizes.display4,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxl/regular': {
+      fontSize: theme.fontSizes.xxl,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxl': {
+      fontSize: theme.fontSizes.xxl,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxl/bold': {
+      fontSize: theme.fontSizes.xxl,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xl/regular': {
+      fontSize: theme.fontSizes.xl,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xl': {
+      fontSize: theme.fontSizes.xl,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xl/bold': {
+      fontSize: theme.fontSizes.xl,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'l/regular': {
+      fontSize: theme.fontSizes.l,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'l': {
+      fontSize: theme.fontSizes.l,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'l/bold': {
+      fontSize: theme.fontSizes.l,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'm/regular': {
+      fontSize: theme.fontSizes.m,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'm': {
+      fontSize: theme.fontSizes.m,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'm/bold': {
+      fontSize: theme.fontSizes.m,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    's/regular': {
+      fontSize: theme.fontSizes.s,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    's': {
+      fontSize: theme.fontSizes.s,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    's/bold': {
+      fontSize: theme.fontSizes.s,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xs/regular': {
+      fontSize: theme.fontSizes.xs,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xs': {
+      fontSize: theme.fontSizes.xs,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xs/bold': {
+      fontSize: theme.fontSizes.xs,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxs/regular': {
+      fontSize: theme.fontSizes.xxs,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxs': {
+      fontSize: theme.fontSizes.xxs,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxs/bold': {
+      fontSize: theme.fontSizes.xxs,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    }
   }
 }), compose(wordBreak, whiteSpace, textDecoration, fontSize, fontWeight, lineHeight, color, textAlign), sx);
 Text.defaultProps = {

package/esm/core/TextInput/index.js

@@ -1,11 +1,9 @@
-import color from '../../packages/token-studio/esm/token/color/index.js';
-import '../../packages/token-studio/esm/token/typography/index.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { isFunction } from '../../packages/utils/esm/isFunction.js';
 import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import { forwardRef, cloneElement } from 'react';
 import { r as reactIsExports } from '../../node_modules/react-is/index.js';
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
 import View from '../View/index.js';
 import TextInputTrailingAction from './TextInputTrailingAction.js';
@@ -20,6 +18,7 @@ const TextInput = ({
   trailingAction,
   ...props
 }, ref) => {
+  const theme = useTheme();
   const inputRef = useProvidedOrCreatedRef(ref);
   const focusInput = () => {
     inputRef.current?.focus();
@@ -36,12 +35,12 @@ const TextInput = ({
         'flexShrink': 0,
         'fontSize': 'xxs',
         'fontWeight': 'medium',
-        'color': color['text/neutral'],
+        'color': theme.colors['text/neutral'],
         '& > svg': {
           display: 'block',
           width: 16,
           height: 16,
-          color: color['icon/neutral/bold']
+          color: theme.colors['icon/neutral/bold']
         }
       },
       children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
@@ -61,12 +60,12 @@ const TextInput = ({
         'flexShrink': 0,
         'fontSize': 'xxs',
         'fontWeight': 'medium',
-        'color': color['text/neutral'],
+        'color': theme.colors['text/neutral'],
         '& > svg': {
           display: 'block',
           width: 16,
           height: 16,
-          color: color['icon/neutral/bold']
+          color: theme.colors['icon/neutral/bold']
         }
       },
       children: [typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, trailingAction ? /*#__PURE__*/cloneElement(trailingAction, {

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

@@ -8,9 +8,5 @@ const surfaceElevation = {
 const shadowElevation = {
   'shadow/overlay': shadow.shadowMedium
 };
-const elevation = {
-  ...surfaceElevation,
-  ...shadowElevation
-};
 
-export { elevation as default, shadowElevation, surfaceElevation };
+export { shadowElevation, surfaceElevation };

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

@@ -2,7 +2,7 @@ import fontSizes from './fontSizes.js';
 import fontWeights from './fontWeights.js';
 import lineHeights from './lineHeights.js';
 
-const typography = {
+({
   'display1': {
     fontSize: fontSizes.display1,
     fontWeight: fontWeights.bold,
@@ -128,6 +128,6 @@ const typography = {
     fontWeight: fontWeights.bold,
     lineHeight: lineHeights[2]
   }
-};
+});
 
-export { typography as default, fontSizes, fontWeights, lineHeights };
+export { fontSizes, fontWeights, lineHeights };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.21.6",
+  "version": "2.21.7",
   "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",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "75256eb184a6e69f6e8c61d6d4927ba0ee501e26"
+  "gitHead": "01d4f7727cb5dc9d953a857a50dbf66db1a0c734"
 }