@ebrains/react 0.9.1-beta → 0.9.2-beta

package/token-list_3.entry.esm.js

@@ -1,385 +0,0 @@
-import { r as registerInstance, h } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const colors = {
-  tokens: {
-    // grey
-    'grey-100': '#f8f8f8',
-    'grey-200': '#f2f2f2',
-    'grey-300': '#e6e6e6',
-    'grey-400': '#d8d8d8',
-    'grey-500': '#8c8c8c',
-    'grey-600': '#6e6e6e',
-    'grey-700': '#666666',
-    'grey-800': '#4d4d4d',
-    'grey-900': '#242424',
-    // green
-    'green-100': '#eaffee',
-    'green-200': '#d3ffdc',
-    'green-300': '#9dffb4',
-    'green-400': '#63fb92',
-    'green-500': '#00e766',
-    'green-600': '#00c959',
-    'green-700': '#009d45',
-    'green-800': '#007734',
-    'green-900': '#004f23',
-    // yellow
-    'yellow-100': '#fefee5',
-    'yellow-200': '#ffffcb',
-    'yellow-300': '#fdfdaa',
-    'yellow-400': '#ffff8b',
-    'yellow-500': '#ffff51',
-    'yellow-600': '#f3f30a',
-    'yellow-700': '#d7d72b',
-    'yellow-800': '#9a9a1e',
-    'yellow-900': '#636313',
-    // orange
-    'orange-100': '#fff4ee',
-    'orange-200': '#ffeade',
-    'orange-300': '#ffdcc5',
-    'orange-400': '#ffcca9',
-    'orange-500': '#ffb87e',
-    'orange-600': '#ffa543',
-    'orange-700': '#cb7f28',
-    'orange-800': '#995f1e',
-    'orange-900': '#653f14',
-    // red
-    'red-100': '#feefef',
-    'red-200': '#ffe0e1',
-    'red-300': '#ffc7c9',
-    'red-400': '#ff9ea2',
-    'red-500': '#ff7a7f',
-    'red-600': '#ff4d68',
-    'red-700': '#d01111',
-    'red-800': '#a3001a',
-    'red-900': '#6f0011',
-    // purple
-    'purple-100': '#f9f3ff',
-    'purple-200': '#f4e8ff',
-    'purple-300': '#e9ceff',
-    'purple-400': '#ddb1ff',
-    'purple-500': '#d18fff',
-    'purple-600': '#c461ff',
-    'purple-700': '#af56e4',
-    'purple-800': '#8337b1',
-    'purple-900': '#3d1e4f',
-    // blue
-    'blue-100': '#eff0ff',
-    'blue-200': '#dee0ff',
-    'blue-300': '#caceff',
-    'blue-400': '#b2b8ff',
-    'blue-500': '#7a89f5',
-    'blue-600': '#2b69fc',
-    'blue-700': '#0034cb',
-    'blue-800': '#002799',
-    'blue-900': '#001a65',
-    // cyan
-    'cyan-100': '#E0EEFF',
-    'cyan-200': '#D3E6FF',
-    'cyan-300': '#B5D8FF',
-    'cyan-400': '#92C8FF',
-    'cyan-500': '#6CBFFE',
-    'cyan-600': '#3FA9F5',
-    'cyan-700': '#267FBE',
-    'cyan-800': '#1F689B',
-    'cyan-900': '#15496D',
-    // Generics
-    black: '#000000',
-    white: '#ffffff',
-    transparent: 'transparent',
-    current: 'currentColor'
-  },
-  border: {
-    default: 'black',
-    inverse: 'white',
-    'inverse-soft': 'rgba(255, 255, 255, 0.3)',
-    'inverse-softer': 'rgba(255, 255, 255, 0.15)',
-    soft: 'rgba(0, 0, 0, .15 )',
-    softer: 'rgba(0, 0, 0, .1 )',
-    softest: 'rgba(0, 0, 0, .05 )',
-    accent: 'green-500',
-    error: 'red-700',
-    current: 'currentColor',
-    transparent: 'transparent'
-  },
-  text: {
-    inverse: 'white',
-    default: 'black',
-    current: 'currentColor',
-    transparent: 'transparent',
-    light: 'grey-700',
-    lighter: 'grey-600',
-    lightest: 'grey-500',
-    'extra-light': 'grey-300',
-    success: 'green-800',
-    warning: 'yellow-900',
-    error: 'red-700',
-    accent: 'green-500',
-    'on-gradient': 'rgba(0, 0, 0, 0.55)'
-  },
-  background: {
-    default: 'grey-200',
-    inverse: 'white',
-    'inverse-soft': 'rgba(255, 255, 255, .2)',
-    'inverse-softer': 'rgba(255, 255, 255, .15)',
-    dark: 'grey-300',
-    darker: 'grey-400',
-    strong: 'grey-700',
-    'strong-dark': 'grey-800',
-    stronger: 'grey-900',
-    strongest: 'black',
-    'strongest-soft': 'rgba(0, 0, 0, .05)',
-    accent: 'green-500',
-    'accent-dark': 'green-600',
-    'accent-darker': 'green-800',
-    success: 'green-200',
-    warning: 'yellow-200',
-    error: 'red-200',
-    current: 'currentColor',
-    transparent: 'transparent',
-    overlay: 'rgba(0, 0, 0, 0.25)',
-    'on-gradient': 'rgba(0, 0, 0, 0.1)',
-    'on-dark': 'rgba(255, 255, 255, 0.2)'
-  },
-  underline: {
-    accent: 'green-500',
-    light: 'grey-700',
-    lighter: 'grey-600',
-    lightest: 'grey-500',
-    'extra-light': 'grey-300'
-  },
-  outline: {
-    default: 'black',
-    accent: 'green-500'
-  },
-  /**
-   * Gradients token are created manually inside gradients.css utility file.
-   * This mapping is here to generate gradients view inside storybook
-   * @file: ui-components/src/assets/styles/utilities/gradient.css
-   */
-  gradients: {
-    'gradient-01-top': 'gradient-01-top',
-    'gradient-02-top': 'gradient-02-top',
-    'gradient-03-top': 'gradient-03-top',
-    'gradient-04-top': 'gradient-04-top',
-    'gradient-01-bottom': 'gradient-01-bottom',
-    'gradient-02-bottom': 'gradient-02-bottom',
-    'gradient-03-bottom': 'gradient-03-bottom',
-    'gradient-04-bottom': 'gradient-04-bottom'
-  }
-};
-const TokenList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.show = undefined;
-  }
-  getTextColor(value) {
-    if (value.startsWith('rgba') || value.startsWith('rgb')) {
-      const rgba = value.replace(/rgba?\(/, '').replace(')', '').split(',').map(v => parseFloat(v.trim()));
-      const r = rgba[0];
-      const g = rgba[1];
-      const b = rgba[2];
-      const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-      return brightness > 0.5 ? 'text-default' : 'text-inverse';
-    } else if (value.startsWith('#')) {
-      const color = value.replace('#', '');
-      const r = parseInt(color.substring(0, 2), 16);
-      const g = parseInt(color.substring(2, 4), 16);
-      const b = parseInt(color.substring(4, 6), 16);
-      const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-      return brightness > 0.5 ? 'text-default' : 'text-inverse';
-    }
-    return 'text-default';
-  }
-  resolveColor(value) {
-    if (colors.tokens[value]) {
-      return colors.tokens[value];
-    }
-    return value;
-  }
-  renderSection(sectionName, sectionContent) {
-    if (sectionName === 'tokens') {
-      const groupedTokens = this.groupTokensByCategory(sectionContent);
-      return Object.entries(groupedTokens).map(([, tokens]) => h("ul", {
-        class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
-      }, tokens.map(token => {
-        const tokenName = Object.keys(token)[0];
-        const tokenValue = this.resolveColor(token[tokenName]);
-        const textColorClass = this.getTextColor(tokenValue);
-        return h("li", {
-          class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
-        }, h("div", {
-          class: "effect-height items-center justify-between p-16 hidden lg:flex",
-          style: {
-            backgroundColor: tokenValue
-          }
-        }, h("span", {
-          class: `${textColorClass} f-body-02`
-        }, tokenName), h("div", {
-          class: "inline-flex"
-        }, h("eds-code-block", {
-          code: tokenValue,
-          language: "hex",
-          class: "min-w-[210px] mr-4"
-        }), h("eds-code-block", {
-          language: "css",
-          code: `var(--${tokenName})`,
-          class: "min-w-[210px]"
-        }))), h("div", {
-          class: "effect-height items-center justify-between p-16 block lg:hidden",
-          style: {
-            backgroundColor: tokenValue
-          }
-        }, h("span", {
-          class: `${textColorClass} f-body-02`
-        }, tokenName), h("div", {
-          class: "inline block"
-        }, h("eds-code-block", {
-          code: tokenValue,
-          class: "min-w-[210px] mb-4"
-        }), h("eds-code-block", {
-          code: `var(--${tokenName})`,
-          class: "min-w-[210px]"
-        }))));
-      })));
-    }
-    return h("ul", {
-      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
-    }, Object.entries(sectionContent).map(([key, value]) => {
-      const resolvedValue = this.resolveColor(value);
-      const textColorClass = this.getTextColor(resolvedValue);
-      const style = resolvedValue.startsWith('#') || resolvedValue.startsWith('rgb') ? {
-        backgroundColor: resolvedValue
-      } : {
-        border: `2px solid ${resolvedValue}`
-      };
-      return h("li", {
-        class: "grid-col-span-12 md:grid-col-span-4 flex flex-col"
-      }, h("div", {
-        class: "effect-height block lg:flex items-center justify-between p-16",
-        style: style
-      }, h("div", {
-        class: "w-full flex"
-      }, h("span", {
-        class: `${textColorClass} mr-auto font-bold`
-      }, key), h("span", {
-        class: `${textColorClass} ml-auto  mr-4 font-bold`
-      }, value)), h("span", {
-        class: `${textColorClass}`
-      }, sectionName === 'background' ? h("eds-code-block", {
-        code: `bg-${key}`,
-        class: "min-w-[210px] mr-4"
-      }) : h("eds-code-block", {
-        code: `${sectionName}-${key}`,
-        class: sectionName === 'border' ? 'min-w-[250px] mr-4' : 'min-w-[210px] mr-4'
-      }))));
-    }));
-  }
-  groupTokensByCategory(tokens) {
-    const grouped = {};
-    Object.entries(tokens).forEach(([key, value]) => {
-      const category = key.split('-')[0];
-      if (!grouped[category]) {
-        grouped[category] = [];
-      }
-      grouped[category].push({
-        [key]: value
-      });
-    });
-    return grouped;
-  }
-  render() {
-    // Check if `show` prop is provided; if not, display all sections
-    const sectionsToDisplay = this.show ? {
-      [this.show]: colors[this.show]
-    } : colors;
-    return h("section", {
-      key: '8b81b207da80d0006bd14157e527932ca5305a93',
-      class: "w-full mt-28"
-    }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) =>
-    // Only render sections that exist in `colors`
-    sectionContent ? this.renderSection(sectionName, sectionContent) : null));
-  }
-};
-const radii = {
-  xxs: '2px',
-  xs: '4px',
-  sm: '8px',
-  md: '12px',
-  lg: '16px',
-  pill: '100px'
-};
-const TokenRadii = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return h("section", {
-      key: '912af038957cf8b00443e72529d4929b7a508a0a',
-      class: "w-full mt-28"
-    }, h("ul", {
-      key: 'ffffacd1e6006a05a27d5e1248ce626c36abc73e',
-      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
-    }, Object.entries(radii).map(([key, value]) => h("li", {
-      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
-    }, h("div", {
-      class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}`
-    }, h("eds-code-block", {
-      language: "Utility Class",
-      code: `rounded-${key}`,
-      class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto"
-    }), h("eds-code-block", {
-      code: `border-radius:${value}`,
-      language: "css",
-      class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto"
-    }))))));
-  }
-};
-const shadows = {
-  small: '0px 1.5px 2px rgba(0, 0, 0, 0.1)',
-  hover: '0px 0px 16px rgba(0, 0, 0, 0.2)',
-  accent: '0px 0px 12px rgba(0, 201, 89, 0.6)',
-  podium: '0px 0px 8px 8px rgb(0 0 0 / 25%);',
-  border: '0 10px 10px rgba(0, 0, 0, 0.15);',
-  'border-top': '0 -10px 10px rgba(0, 0, 0, 0.15);'
-};
-const dropShadows = {
-  small: '0px 0px 16px rgba(0, 0, 0, 0.3)'
-};
-const shadowTokens = {
-  shadows,
-  dropShadows
-};
-const TokenShadows = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return h("section", {
-      key: 'af8f66e30d9115f920d483c02d1f7c2b718589f9',
-      class: "w-full mt-28"
-    }, h("ul", {
-      key: '1588c580f981ab148ba23a76cd33b0c8b993822c',
-      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
-    }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => h("li", {
-      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16"
-    }, h("div", {
-      class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft",
-      style: {
-        boxShadow: value
-      }
-    }, h("eds-code-block", {
-      code: `${category}-${key}`,
-      language: "Utility Class",
-      class: "mr-auto sm:mb-4 min-w-[200px]"
-    }), h("eds-code-block", {
-      code: `${value}`,
-      language: "css",
-      class: "ml-auto min-w-[200px]"
-    })))))));
-  }
-};
-
-export { TokenList as token_list, TokenRadii as token_radii, TokenShadows as token_shadows };

package/token-ratios.entry.esm.js

@@ -1,49 +0,0 @@
-import { r as registerInstance, h } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const ratios = {
-  '1x1': '1/1',
-  '21x9': '21/9',
-  '16x9': '16/9',
-  '3x2': '3/2',
-  '4x3': '4/3',
-  '4x5': '4/5'
-};
-const TokenRatios = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return h("section", {
-      key: '595dc0d77e33bfb2109666d185933c9f5b23616e',
-      class: "w-full"
-    }, h("eds-section-core", {
-      key: 'a3217b7808a1bc810ff0b158c4e6547bc2a77b06',
-      tag: "div",
-      "section-title": "Aspect Ratios",
-      "heading-level": "h3"
-    }, h("ul", {
-      key: '505f84a67b6eba8c33d1484c4cb0e94f4de68bc0',
-      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
-    }, Object.entries(ratios).map(([key, value]) => h("li", {
-      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
-    }, h("div", {
-      class: "container ratio-box flex items-center justify-center text-center border-2 border-soft",
-      style: {
-        aspectRatio: value.replace('/', ':'),
-        // Cast to string to resolve TypeScript error
-        width: '100%',
-        // Full width to show the aspect ratio correctly
-        maxWidth: '300px'
-      }
-    }, h("span", {
-      class: "text-default font-bold mr-auto"
-    }, "aspect-", key), h("span", {
-      class: "mt-2 text-sm ml-auto"
-    }, value)))))));
-  }
-};
-
-export { TokenRatios as token_ratios };

package/token-typography.entry.esm.js

@@ -1,267 +0,0 @@
-import { r as registerInstance, h } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const headings = {
-  'heading-01': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '42px',
-      lineHeight: '100%',
-      letterSpacing: '-0.01em'
-    },
-    md: {
-      fontSize: '48px'
-    },
-    lg: {
-      fontSize: '72px'
-    },
-    xl: {
-      fontSize: '83px'
-    }
-  },
-  'heading-02': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '36px',
-      lineHeight: '100%',
-      letterSpacing: '-0.01em'
-    },
-    lg: {
-      fontSize: '48px'
-    },
-    xl: {
-      fontSize: '60px'
-    }
-  },
-  'heading-03': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '36px',
-      lineHeight: '100%',
-      letterSpacing: '-0.01em'
-    },
-    xl: {
-      fontSize: '42px'
-    }
-  },
-  'heading-04': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '28px',
-      lineHeight: '100%',
-      letterSpacing: '-0.01em'
-    },
-    xl: {
-      fontSize: '36px'
-    }
-  },
-  'heading-05': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '28px',
-      lineHeight: '110%',
-      letterSpacing: '-0.01em'
-    }
-  },
-  'heading-06': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '22px',
-      lineHeight: '120%'
-    }
-  }
-};
-const bodies = {
-  'body-01': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
-      fontSize: '20px',
-      lineHeight: '140%',
-      letterSpacing: '-0.01em'
-    }
-  },
-  'body-02': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
-      fontSize: '17px',
-      lineHeight: '150%'
-    }
-  }
-};
-const uis = {
-  'ui-01': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '18px',
-      lineHeight: '110%',
-      letterSpacing: '-0.01em'
-    }
-  },
-  'ui-02': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '16px',
-      lineHeight: '110%',
-      letterSpacing: '-0.01em'
-    }
-  },
-  'ui-02-light': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
-      fontSize: '16px',
-      lineHeight: '110%',
-      letterSpacing: '-0.01em'
-    }
-  },
-  'ui-03': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '14px',
-      lineHeight: '110%',
-      letterSpacing: '-0.01em'
-    }
-  },
-  'ui-03-light': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
-      fontSize: '14px',
-      lineHeight: '130%',
-      letterSpacing: '-0.01em'
-    }
-  },
-  'ui-04': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '12px',
-      lineHeight: '100%',
-      letterSpacing: '-0.01em'
-    }
-  },
-  'ui-05': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '10px',
-      lineHeight: '110%',
-      letterSpacing: '-0.01em'
-    }
-  },
-  caption: {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '12px',
-      lineHeight: '120%'
-    }
-  }
-};
-const displays = {
-  'display-01': {
-    sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
-      fontSize: '120px',
-      lineHeight: '100%',
-      letterSpacing: '-0.01em'
-    },
-    lg: {
-      fontSize: '150px'
-    }
-  }
-};
-const typography = {
-  families: {
-    sans: 'Inter, Helvetica, Arial, sans-serif'
-  },
-  typesets: {
-    ...headings,
-    ...bodies,
-    ...uis,
-    ...displays
-  }
-};
-const TokenTypography = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return h("section", {
-      key: 'b2e3951c7419dccdd31e446898a9ad126e36398e',
-      class: "w-full"
-    }, h("ul", {
-      key: '78ec896dad35353bcdc4d9f9d4b68873e1274933',
-      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
-    }, Object.entries(typography.typesets).filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
-    .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => h("li", {
-      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
-    }, h("div", {
-      class: "w-full p-4 block lg:flex items-center border border-soft rounded"
-    }, h("div", {
-      class: "mr-auto hidden lg:block",
-      style: {
-        fontFamily: typography.families.sans,
-        fontWeight: style.fontWeight,
-        fontSize: style.fontSize,
-        lineHeight: style.lineHeight,
-        letterSpacing: style.letterSpacing
-      }
-    }, h("span", {
-      class: "text-default font-bold"
-    }, `${typeKey} (${size})`)), h("div", {
-      class: "mr-auto block lg:hidden p-4"
-    }, h("span", {
-      class: "text-default f-heading-05"
-    }, `${typeKey} (${size})`)), h("div", {
-      class: "ml-auto"
-    }, h("eds-code-block", {
-      code: [style.fontSize && `font-size: ${style.fontSize};`, style.lineHeight && `line-height: ${style.lineHeight};`, style.letterSpacing && `letter-spacing: ${style.letterSpacing};`, style.fontWeight && `font-weight: ${style.fontWeight};`, style.fontFamily && `font-family: ${style.fontFamily};`].filter(Boolean) // Remove any falsy values (e.g., undefined, null)
-      .join('\n'),
-      language: "css",
-      class: "min-w-[250px] mb-4"
-    }), h("eds-code-block", {
-      code: `f-${typeKey}`,
-      language: "Utility Class",
-      class: "min-w-[250px] mb-4"
-    }), h("eds-code-block", {
-      code: `${size}:f-${typeKey}`,
-      language: "Screen",
-      class: "min-w-[250px] mb-4"
-    }), h("eds-code-block", {
-      code: `--var(--f-${typeKey}-fontFamily)`,
-      class: "min-w-[250px] mb-4"
-    }), h("eds-code-block", {
-      code: `--var(--f-${typeKey}-fontWeight)`,
-      class: "min-w-[250px] mb-4"
-    }), h("eds-code-block", {
-      code: `--var(--f-${typeKey}-fontSize)`,
-      class: "min-w-[250px] mb-4"
-    }), h("eds-code-block", {
-      code: `--var(--f-${typeKey}-lineHeight)`,
-      class: "min-w-[250px] mb-4"
-    }), h("eds-code-block", {
-      code: `--var(--f-${typeKey}-letterSpacing)`,
-      class: "min-w-[250px] mb-4"
-    }), h("eds-code-block", {
-      code: `--sans: Inter, Helvetica, Arial, sans-serif;`,
-      class: "min-w-[250px] mb-4"
-    }))))))));
-  }
-};
-
-export { TokenTypography as token_typography };