feat(ui-breadcrumb): wip

Author: git-nandor

packages/ui-breadcrumb/src/Breadcrumb/styles.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { BreadcrumbProps, BreadcrumbStyle } from './props'
 
 type StyleParams = {
@@ -41,46 +41,45 @@ type StyleParams = {
  */
 const generateStyle = (
   componentTheme: NewComponentTypes['Breadcrumb'],
-  params: StyleParams,
-  _sharedTokens: SharedTokens
+  params: StyleParams
 ): BreadcrumbStyle => {
   const { size } = params
 
   const crumbSizeVariants = {
-    // TODO padding calculations
+    // TODO fix padding calculations or gap tokens after View rework
     small: {
       fontSize: '0.875rem', // oldComponentTheme.smallFontSize,
-      paddingInlineEnd: `calc(0.5rem + ${componentTheme.gapSm})`, // `calc(${componentTheme.smallSeparatorFontSize} * 2)`,
+      paddingInlineEnd: componentTheme.gapSm, // `calc(${oldComponentTheme.smallSeparatorFontSize} * 2)`,
       paddingInlineStart: 0
     },
     medium: {
       fontSize: '1rem', // oldComponentTheme.mediumFontSize,
-      paddingInlineEnd: `calc(0.75rem + ${componentTheme.gapMd})`, // `calc(${componentTheme.mediumSeparatorFontSize} * 2)`,
+      paddingInlineEnd: componentTheme.gapMd, // `calc(${oldComponentTheme.mediumSeparatorFontSize} * 2)`,
       paddingInlineStart: 0
     },
     large: {
       fontSize: '1.375rem', // oldComponentTheme.largeFontSize,
-      paddingInlineEnd: `calc(1rem + ${componentTheme.gapLg})`, // `calc(${componentTheme.largeSeparatorFontSize} * 2)`,
+      paddingInlineEnd: componentTheme.gapLg, // `calc(${oldComponentTheme.largeSeparatorFontSize} * 2)`,
       paddingInlineStart: 0
     }
   }
 
   const separatorSizeVariants = {
     small: {
       fontSize: '0.5rem', // oldComponentTheme.smallSeparatorFontSize,
-      insetInlineEnd: `calc(0.5rem + ${componentTheme.gapSm})`, // separator size + gap
+      insetInlineEnd: `calc(0.5rem + ${componentTheme.gapSm})`, // `calc(${oldComponentTheme.smallSeparatorFontSize} / 2)`
       insetInlineStart: 'auto',
       marginTop: `calc(-1 * (0.5rem / 2))` // `calc(-1 * (${oldComponentTheme.smallSeparatorFontSize} / 2))`
     },
     medium: {
       fontSize: '0.75rem', // oldComponentTheme.mediumSeparatorFontSize,
-      insetInlineEnd: `calc(0.75rem + ${componentTheme.gapMd})`, // separator size + gap
+      insetInlineEnd: `calc(0.75rem + ${componentTheme.gapMd})`, // `calc(${oldComponentTheme.mediumSeparatorFontSize} / 2)`
       insetInlineStart: 'auto',
       marginTop: `calc(-1 * (0.75rem / 2))` // `calc(-1 * (${oldComponentTheme.mediumSeparatorFontSize} / 2))`
     },
     large: {
       fontSize: '1rem', // oldComponentTheme.largeSeparatorFontSize,
-      insetInlineEnd: `calc(1rem + ${componentTheme.gapLg})`, // separator size + gap
+      insetInlineEnd: `calc(1rem + ${componentTheme.gapLg})`, // `calc(${oldComponentTheme.largeSeparatorFontSize} / 2)`
       insetInlineStart: 'auto',
       marginTop: `calc(-1 * (1rem / 2))` // `calc(-1 * (${oldComponentTheme.largeSeparatorFontSize} / 2))`
     }