@ebrains/react 0.0.1-alpha.0 → 0.3.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: 'ac8573b341ad313eba0f9f082dcc72cfc81208b3',
+      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: '84dabcd5a39d49e116f8fc9e9b26e00455c7fbb3',
+      class: "w-full mt-28"
+    }, h("ul", {
+      key: 'a821c747c45b8898ab2e7626d2ead91814549335',
+      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: '4575feac8b5bff23aed39733e638fbb62916988f',
+      class: "w-full mt-28"
+    }, h("ul", {
+      key: 'c9833aa0d698a7ec33911011ccb9227d43c8261a',
+      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: '9c4dc70bd40a40fbeedc88280ea3fdd4b2597e40',
+      class: "w-full"
+    }, h("eds-section-core", {
+      key: '039b72b762e48f62a4fa58d5af7803d0ed73bf6a',
+      tag: "div",
+      "section-title": "Aspect Ratios",
+      "heading-level": "h3"
+    }, h("ul", {
+      key: 'be3e37d842a24536488b7bc03f24399faa1304ff',
+      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: '5f72b8386e92973faca8b22ebadcffa5b8ca8744',
+      class: "w-full"
+    }, h("ul", {
+      key: '619cc2546059aaac566dc89f56b098f72f7c2bde',
+      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, h("li", {
+      key: 'b90587543210e02a577854ce061472ef8f3bdc7a',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: 'd98ea95c641209ba592aae8c695e278549840420',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: '6dd84540a213d98fa09480eac823fe030dfb2404',
+      class: "spacing-sample m-32 bg-darker"
+    }, h("span", {
+      key: 'ad0493ba8d97cdcc15535505db4d726d6f69bd38',
+      class: "text-white"
+    }, "Margin: 2rem / m-32")))), h("li", {
+      key: 'a0914d288cdb4b9caef6956af0069cd0937ee019',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: '95adc2b10d3962378de300e00b749b691fda88af',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: '8bad94397c9fe8112b49933a508958000f9cd99d',
+      class: "spacing-sample ml-64 bg-darker"
+    }, h("span", {
+      key: '04229385104243a5ce9a194c4f8056f7341a6736',
+      class: "text-white"
+    }, "Margin Left: 4rem / ml-64")))), h("li", {
+      key: 'f34e1fd5ccafc528ed9359766deaa5c615a2e14b',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: '38e12800b2c8502ea2f9e912af929f71d3ec9699',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: 'f4e93d89576ab3de7f44ce3a85d9838f21bfa7f6',
+      class: "spacing-sample mt-32 bg-darker"
+    }, h("span", {
+      key: 'e85e2e1c7c4c7e765dfafd25dc9f2c33b6bd5069',
+      class: "text-white"
+    }, "Margin Top: 2rem / mt-32")))), h("li", {
+      key: 'b42299c17c024a5906bd09c80a2f309b461b6fde',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: 'f54a9e32893ac6f1b0384e79e2959d1e65a251e2',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: '4209fa0c979a1d55d42d7b892bc94cc0f3788e88',
+      class: "spacing-sample p-32 bg-darker"
+    }, h("span", {
+      key: '1d9249c56d3a42500dfb8cc1d3eae1f89e79cdcd',
+      class: "text-white"
+    }, "Padding: 2rem / p-32")))), h("li", {
+      key: 'ad6f2e33e15c4c21bdfed8478b3d2faa905490fa',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: '9950970e66b8a382e7b0158b54e980a5e5f45774',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: '40e96cd046eaddf3a23387995affbfc399d171ae',
+      class: "spacing-sample pt-32 bg-darker"
+    }, h("span", {
+      key: '2d120273f7a6d4429061d0ade2164ada9a14b506',
+      class: "text-white"
+    }, "Padding Top: 2rem / pt-32")))), h("li", {
+      key: '8c3327edc63f8959c0cb01cce0a8407bf3a605af',
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      key: 'c0be38039770c54577f073e1a707110cd0807ab5',
+      class: "container p-8 item-center border-2 border-soft"
+    }, h("div", {
+      key: 'd8085da375e734ed11fe580f1a9004f6fddef679',
+      class: "spacing-sample pl-32 bg-darker"
+    }, h("span", {
+      key: '029857c00659221390438d8477734d0f130d1b97',
+      class: "text-white"
+    }, "Padding Left: 2rem / pl-32"))))));
+  }
+};
+
+export { TokenSpacing as token_spacing };