@ebrains/react 0.0.1-alpha.0 → 0.2.0-alpha.0

package/token-list_3.entry.esm.js

@@ -0,0 +1,385 @@
+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: "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: "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: '12f2874bbc9a74aea2a37e3c9314e85b5cf96d8c',
+      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: '8b66cda1370f366c46ed2772ee0a5a18878cdc13',
+      class: "w-full mt-28"
+    }, h("ul", {
+      key: '652f4812de4a40c94646b25429b16683bfc8f54c',
+      class: "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: '6651a6dcd282a9f9df84249c73ab08a6e8d83597',
+      class: "w-full mt-28"
+    }, h("ul", {
+      key: '12bda2b4a1306c9a8d1bc4f41da4edd5258e381f',
+      class: "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

@@ -0,0 +1,49 @@
+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: 'd6df281aee2b33d5dd1087c9d06aff6656bf9145',
+      class: "w-full"
+    }, h("eds-section-core", {
+      key: 'fdf31da89f0fa75f5a724ae9bdb26d59dd22fe9e',
+      tag: "div",
+      "section-title": "Aspect Ratios",
+      "heading-level": "h3"
+    }, h("ul", {
+      key: '01473ff27842d278c1269870463fb0c1a0658406',
+      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-spacing.entry.esm.js

@@ -0,0 +1,93 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const TokenSpacing = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("div", {
+      key: 'ae388def4474fbd6e9766c2e04eb382ac9022bb8',
+      class: "w-full"
+    }, h("ul", {
+      key: 'a2a51b9494dbd1bbb8b8d454117bc254e9602938',
+      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: '9e48e3551369f35ae6ec72d493ae888ebee3cceb',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: '65b5b1192cdfef841bd4beed6eedf0068393ba8d',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: '770870c171999d004aba77b6058fe32525b1703e',
+      class: "spacing-sample m-32 bg-darker"
+    }, h("span", {
+      key: 'fdba92dbc2c78e55481277c2858de4ea220b2397',
+      class: "text-white"
+    }, "Margin: 2rem / m-32")))), h("li", {
+      key: '9420b6110f30e9f3cff94d409362627d32782023',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: '2e438e9ee4291d1326acb2630ccb55f981acfeaa',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: 'b199e19274f23490485347d2ef102741f583b612',
+      class: "spacing-sample ml-64 bg-darker"
+    }, h("span", {
+      key: '2cde99dd7d0bb469b7f69b852f20abc4f61d6a01',
+      class: "text-white"
+    }, "Margin Left: 4rem / ml-64")))), h("li", {
+      key: 'b8cdd7b7245cd3e7c8fe59297b76f2e9e20a1c2e',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: '0f9cf988220669a2ebe2e93d33d904ee045af74a',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: '88f5a191b1f9878ae6012efd5ec7365cf2f28da4',
+      class: "spacing-sample mt-32 bg-darker"
+    }, h("span", {
+      key: 'af8f876d8cdc7620af861620173ea32fc706378f',
+      class: "text-white"
+    }, "Margin Top: 2rem / mt-32")))), h("li", {
+      key: 'e65780c7ecfc9685791c40970350ba511e888283',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: 'c1a8e22fde087ac9f5e69602e23c8b7f429c0e3e',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: '19aaa0273c1c818f1f6d57a0fd41d9be14aa4d1b',
+      class: "spacing-sample p-32 bg-darker"
+    }, h("span", {
+      key: '18cbdee711f04e90e663d93bd8b752ec0d0b33ee',
+      class: "text-white"
+    }, "Padding: 2rem / p-32")))), h("li", {
+      key: 'f2831db3170703786946a12a5b0c0e188c4f944a',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: '68ac92294defd683a3c49e38ce0f4366a8b91208',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: '6bfd849d0f841d6fefb39d91a4be49ae1db8d43f',
+      class: "spacing-sample pt-32 bg-darker"
+    }, h("span", {
+      key: '7f3b5868baf86913d172b07347b15ca1e8901d21',
+      class: "text-white"
+    }, "Padding Top: 2rem / pt-32")))), h("li", {
+      key: 'f3608f5562949c9fb82d987719753bc0b59ba999',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: 'fe9d90cf206906742000da310a53873ecefaa77c',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: 'd6590820496db0ba1009deea6a4b56c9195814e6',
+      class: "spacing-sample pl-32 bg-darker"
+    }, h("span", {
+      key: 'c65179e127861a66ca1c0d6ff429b07bc0d88945',
+      class: "text-white"
+    }, "Padding Left: 2rem / pl-32"))))));
+  }
+};
+
+export { TokenSpacing as token_spacing };