@descope-ui/common 0.0.1

package/src/sbControls.js

@@ -0,0 +1,302 @@
+import errorMessageIconBase64 from './icons/errorMessageIconBase64';
+
+export const labelControl = {
+  label: {
+    name: 'Label',
+    control: { type: 'text' },
+  },
+};
+
+export const helperTextControl = {
+  'helper-text': {
+    name: 'Helper Text',
+    control: { type: 'text' },
+  },
+};
+
+export const placeholderControl = {
+  placeholder: {
+    name: 'Placeholder',
+    control: { type: 'text' },
+  },
+};
+
+export const sizeControl = {
+  size: {
+    name: 'Size',
+    options: ['xs', 'sm', 'md', 'lg'],
+    control: { type: 'select' },
+  },
+};
+
+export const loadingControl = {
+  loading: {
+    name: 'Loading',
+    control: { type: 'boolean' },
+  },
+};
+
+export const fullWidthControl = {
+  'full-width': {
+    name: 'Full Width',
+    control: { type: 'boolean' },
+  },
+};
+
+export const disabledControl = {
+  disabled: {
+    name: 'Disabled',
+    control: { type: 'boolean' },
+  },
+};
+
+export const readOnlyControl = {
+  readonly: {
+    name: 'Read Only',
+    control: { type: 'boolean' },
+  },
+};
+
+export const requiredControl = {
+  required: {
+    name: 'Required',
+    control: { type: 'boolean' },
+  },
+};
+
+export const directionControl = {
+  direction: {
+    name: 'Direction',
+    options: ['ltr', 'rtl'],
+    control: { type: 'select' },
+  },
+};
+
+export const borderedControl = {
+  bordered: {
+    name: 'Bordered',
+    control: { type: 'boolean' },
+  },
+};
+
+export const minLengthControl = {
+  minlength: {
+    name: 'Min. Length',
+    control: { type: 'text' },
+  },
+};
+
+export const maxLengthControl = {
+  maxlength: {
+    name: 'Max. Length',
+    control: { type: 'text' },
+  },
+};
+
+export const textContentControl = {
+  text: {
+    name: 'Content',
+    control: { type: 'text' },
+  },
+};
+
+export const modeControl = {
+  mode: {
+    name: 'Mode',
+    options: ['none', 'primary', 'secondary', 'success', 'error'],
+    control: { type: 'select' },
+  },
+};
+
+export const textAlignControl = {
+  'text-align': {
+    name: 'Text Align',
+    options: ['left', 'center', 'right'],
+    control: { type: 'select' },
+  },
+};
+
+export const errorMissingValueControl = {
+  'data-errormessage-value-missing': {
+    name: 'Custom Error: Mandatory',
+    control: { type: 'text' },
+  },
+};
+
+export const errorPatternMismatchControl = {
+  'data-errormessage-pattern-mismatch': {
+    name: 'Custom Error: Pattern Mismatch',
+    control: { type: 'text' },
+  },
+};
+
+export const errorTypeMismatchControl = {
+  'data-errormessage-type-mismatch': {
+    name: 'Custom Error: Type Mismatch',
+    control: { type: 'text' },
+  },
+};
+
+export const errorBadInputControl = {
+  'data-errormessage-bad-input': {
+    name: 'Custom Error: Bad Input',
+    control: { type: 'text' },
+  },
+};
+
+export const errorRangeUnderflowControl = {
+  'data-errormessage-range-underflow': {
+    name: 'Custom Error: Below minimum value',
+    control: { type: 'text' },
+  },
+};
+
+export const errorRangeOverflowControl = {
+  'data-errormessage-range-overflow': {
+    name: 'Custom Error: Exceeds maximum value',
+    control: { type: 'text' },
+  },
+};
+
+export const fillControl = {
+  'st-fill': {
+    name: 'Fill',
+    control: { type: 'color' },
+  },
+};
+
+export const customHeightControl = {
+  'st-host-height': {
+    name: 'Custom Height',
+    control: { type: 'text' },
+  },
+};
+
+export const customWidthControl = {
+  'st-host-width': {
+    name: 'Custom Width',
+    control: { type: 'text' },
+  },
+};
+
+export const checkboxValueControl = {
+  checked: {
+    name: 'Checked',
+    control: { type: 'boolean' },
+  },
+};
+
+export const buttonVariantControl = {
+  variant: {
+    name: 'Button Variant',
+    options: ['contained', 'outline', 'link'],
+    control: { type: 'select' },
+  },
+};
+
+export const boxShadowControl = {
+  shadow: {
+    name: 'Shadow',
+    options: ['sm', 'md', 'lg', 'xl', '2xl'],
+    control: { type: 'select' },
+  },
+};
+
+export const borderRadiusControl = {
+  'border-radius': {
+    name: 'Radius',
+    options: ['sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+    control: { type: 'select' },
+  },
+};
+
+export const imgSrcControl = {
+  src: {
+    name: 'Image Source',
+    control: { type: 'text' },
+  },
+};
+
+export const typographyVariantControl = {
+  variant: {
+    name: 'Variant',
+    options: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
+    control: { type: 'select' },
+  },
+};
+
+export const overrideRenderItemControl = {
+  overrideRenderItem: {
+    name: 'Override the default item renderer function',
+    control: { type: 'boolean' },
+  },
+};
+
+export const itemsSourceControl = {
+  itemsSource: {
+    name: 'Where to take the items from',
+    control: {
+      type: 'select',
+      options: {
+        Children: 'children',
+        '"data" attribute': 'attr',
+        '"data" property': 'prop',
+      },
+    },
+  },
+};
+
+export const minItemsSelectionControl = {
+  minItemsSelection: {
+    name: 'Min Items Selection',
+    control: { type: 'number' },
+  },
+};
+
+export const maxItemsSelectionControl = {
+  maxItemsSelection: {
+    name: 'Max Items Selection',
+    control: { type: 'number' },
+  },
+};
+
+export const labelSpacingControl = {
+  'label-spacing': {
+    name: 'Label Spacing',
+    control: { type: 'range', min: 0, max: 200, step: 1 },
+  },
+};
+
+export const inputLabelTypeControl = {
+  'label-type': {
+    name: 'Label Type',
+    control: {
+      type: 'select',
+      options: ['static', 'floating'],
+    },
+  },
+};
+
+export const inputCopyToClipboardControl = {
+  'copy-to-clipboard': {
+    name: 'Copy to clipboard',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const errorMessageIconControl = {
+  errorMsgIcon: {
+    name: 'Error Message Icon',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const errorMessageIconAttrs = `
+    st-error-message-icon="url(${errorMessageIconBase64})"
+    st-error-message-icon-size="14px"
+    st-error-message-icon-padding="1.5em"
+  `;

package/src/sbHelpers.js

@@ -0,0 +1,53 @@
+export const withForm = (children) => {
+  return `
+    <form onsubmit="event.preventDefault()">
+      <div>${children}</div>
+      <div style="margin-top: 6em">
+        <button type="submit" data-testid="submit-button">Submit</button>
+      </div>
+    </form>
+  `;
+};
+
+export const appleIcon = `
+<svg
+  width="1.5em"
+  height="1.5em"
+  viewBox="0 0 800 1000"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="white"
+  data-icon="apple"
+  >
+  <path
+    d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
+  />
+</svg>`;
+
+export const fingerprintBase64 = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzI4NDRfMTE0Mzk0IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPgo8cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IiNEOUQ5RDkiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2swXzI4NDRfMTE0Mzk0KSI+CjxwYXRoIGQ9Ik01LjMzMjc3IDE2LjA4M0M1LjEzODc3IDE1Ljk3MjMgNS4wMjA3NyAxNS44MTI3IDQuOTc4NzcgMTUuNjA0QzQuOTM3NDQgMTUuMzk2IDQuOTcyMTEgMTUuMTk0NyA1LjA4Mjc3IDE1QzYuNzc3NDQgMTIuNTU1MyA4Ljk1MTExIDEwLjY1OTcgMTEuNjAzOCA5LjMxMzAxQzE0LjI1NjQgNy45NjU2NyAxNy4wODI4IDcuMjkyMDEgMjAuMDgyOCA3LjI5MjAxQzIzLjA1NTQgNy4yOTIwMSAyNS44NjExIDcuOTM3NjcgMjguNDk5OCA5LjIyOTAxQzMxLjEzODQgMTAuNTIxIDMzLjMxOTEgMTIuMzYxMyAzNS4wNDE4IDE0Ljc1QzM1LjIwODQgMTUgMzUuMjYzOCAxNS4yMjIzIDM1LjIwNzggMTUuNDE3QzM1LjE1MjQgMTUuNjExIDM1LjA0MTQgMTUuNzc3NyAzNC44NzQ4IDE1LjkxN0MzNC43MzYxIDE2LjA1NTcgMzQuNTU1NCAxNi4xMTggMzQuMzMyOCAxNi4xMDRDMzQuMTEwOCAxNi4wOSAzMy45MTY0IDE1Ljk3MiAzMy43NDk4IDE1Ljc1QzMyLjIyMTggMTMuNTU1MyAzMC4yNDI0IDExLjg3NDcgMjcuODExOCAxMC43MDhDMjUuMzgxOCA5LjU0MTM0IDIyLjgwNTQgOC45NDQzNCAyMC4wODI4IDguOTE3MDFDMTcuMzYwOCA4LjkxNzAxIDE0Ljc5ODQgOS41MDczNCAxMi4zOTU4IDEwLjY4OEM5Ljk5MzExIDExLjg2OCA4LjAyNzc3IDEzLjU1NTMgNi40OTk3NyAxNS43NUM2LjMwNTExIDE2IDYuMTAzNzcgMTYuMTQ2IDUuODk1NzcgMTYuMTg4QzUuNjg3MTEgMTYuMjI5MyA1LjQ5OTQ0IDE2LjE5NDMgNS4zMzI3NyAxNi4wODNaTTI1LjIwNzggMzdDMjIuMDk3MSAzNi4zMDUzIDE5LjYxODEgMzQuODQ3IDE3Ljc3MDggMzIuNjI1QzE1LjkyMzQgMzAuNDAzIDE0Ljk5OTggMjcuNzM2MyAxNC45OTk4IDI0LjYyNUMxNC45OTk4IDIzLjIwODMgMTUuNDk5OCAyMi4wMTQgMTYuNDk5OCAyMS4wNDJDMTcuNDk5OCAyMC4wNjkzIDE4LjY5NDEgMTkuNTgzIDIwLjA4MjggMTkuNTgzQzIxLjQ5OTQgMTkuNTgzIDIyLjcwNzggMjAuMDU1MyAyMy43MDc4IDIxQzI0LjcwNzggMjEuOTQ0NyAyNS4yMDc4IDIzLjExMTMgMjUuMjA3OCAyNC41QzI1LjIwNzggMjUuNDQ0NyAyNS41NTUxIDI2LjI1MDMgMjYuMjQ5OCAyNi45MTdDMjYuOTQ0NCAyNy41ODM3IDI3Ljc3NzggMjcuOTE3IDI4Ljc0OTggMjcuOTE3QzI5LjY5NDQgMjcuOTE3IDMwLjUwMDEgMjcuNTgzNyAzMS4xNjY4IDI2LjkxN0MzMS44MzM0IDI2LjI1MDMgMzIuMTY2OCAyNS40NDQ3IDMyLjE2NjggMjQuNUMzMi4xNjY4IDIxLjI1IDMwLjk4NjEgMTguNTIwNyAyOC42MjQ4IDE2LjMxMkMyNi4yNjM0IDE0LjEwNCAyMy40MTYxIDEzIDIwLjA4MjggMTNDMTYuNzQ5NCAxMyAxMy45MDkxIDE0LjEyNSAxMS41NjE4IDE2LjM3NUM5LjIxNTExIDE4LjYyNSA4LjA0MTc3IDIxLjM3NSA4LjA0MTc3IDI0LjYyNUM4LjA0MTc3IDI1LjUxMzcgOC4xMTgxMSAyNi40NTggOC4yNzA3NyAyNy40NThDOC40MjM0NCAyOC40NTggOC42OTQxMSAyOS41MTM3IDkuMDgyNzcgMzAuNjI1QzkuMTY2MTEgMzAuODc1IDkuMTY2MTEgMzEuMDgzMyA5LjA4Mjc3IDMxLjI1QzguOTk5NDQgMzEuNDE2NyA4Ljg2MDc3IDMxLjU0MTcgOC42NjY3NyAzMS42MjVDOC40NDQxMSAzMS43MDgzIDguMjI4NzcgMzEuNzE1MyA4LjAyMDc3IDMxLjY0NkM3LjgxMjExIDMxLjU3NjcgNy42NTI0NCAzMS40MDMgNy41NDE3NyAzMS4xMjVDNy4yMDg0NCAzMC4yMzYzIDYuOTQ0NDQgMjkuMjM2MyA2Ljc0OTc3IDI4LjEyNUM2LjU1NTExIDI3LjAxMzcgNi40NTc3NyAyNS44NDcgNi40NTc3NyAyNC42MjVDNi40NTc3NyAyMC45NTgzIDcuNzk4MTEgMTcuODI2MyAxMC40Nzg4IDE1LjIyOUMxMy4xNTk0IDEyLjYzMTcgMTYuMzYwOCAxMS4zMzMgMjAuMDgyOCAxMS4zMzNDMjMuODYwOCAxMS4zMzMgMjcuMDkwMSAxMi42MDQgMjkuNzcwOCAxNS4xNDZDMzIuNDUxNCAxNy42ODczIDMzLjc5MTggMjAuODA1MyAzMy43OTE4IDI0LjVDMzMuNzkxOCAyNS44ODg3IDMzLjI5ODQgMjcuMDY5MyAzMi4zMTE4IDI4LjA0MkMzMS4zMjU4IDI5LjAxNCAzMC4xMzg0IDI5LjUgMjguNzQ5OCAyOS41QzI3LjMwNTEgMjkuNSAyNi4wODI4IDI5LjAyNzcgMjUuMDgyOCAyOC4wODNDMjQuMDgyOCAyNy4xMzkgMjMuNTgyOCAyNS45ODYzIDIzLjU4MjggMjQuNjI1QzIzLjU4MjggMjMuNjUzIDIzLjI0MjQgMjIuODMzNyAyMi41NjE4IDIyLjE2N0MyMS44ODE4IDIxLjUwMDMgMjEuMDU1NCAyMS4xNjcgMjAuMDgyOCAyMS4xNjdDMTkuMTM4OCAyMS4xNjcgMTguMzI2NCAyMS41MDAzIDE3LjY0NTggMjIuMTY3QzE2Ljk2NTEgMjIuODMzNyAxNi42MjQ4IDIzLjY1MyAxNi42MjQ4IDI0LjYyNUMxNi42MjQ4IDI3LjQwMyAxNy40MzA0IDI5LjczNjMgMTkuMDQxOCAzMS42MjVDMjAuNjUyNCAzMy41MTM3IDIyLjg0NjggMzQuODA1MyAyNS42MjQ4IDM1LjVDMjUuODc0OCAzNS41NTUzIDI2LjA0MTQgMzUuNjY2MyAyNi4xMjQ4IDM1LjgzM0MyNi4yMDgxIDM1Ljk5OTcgMjYuMjM1OCAzNi4xOTQzIDI2LjIwNzggMzYuNDE3QzI2LjE1MjQgMzYuNjExIDI2LjA0ODQgMzYuNzcwNyAyNS44OTU4IDM2Ljg5NkMyNS43NDMxIDM3LjAyMDcgMjUuNTEzOCAzNy4wNTUzIDI1LjIwNzggMzdaTTEwLjQ5OTggNy4xNjcwMUMxMC4yNDk4IDcuMzA1NjcgMTAuMDM0NCA3LjM0MDM0IDkuODUzNzcgNy4yNzEwMUM5LjY3MzExIDcuMjAxNjcgOS41Mjc0NCA3LjA4MzY3IDkuNDE2NzcgNi45MTcwMUM5LjMwNTQ0IDYuNzc3NjcgOS4yNzA0NCA2LjU5MDAxIDkuMzExNzcgNi4zNTQwMUM5LjM1Mzc3IDYuMTE4MDEgOS40NzIxMSA1Ljk1ODM0IDkuNjY2NzcgNS44NzUwMUMxMS4yNzc0IDQuOTU4MzQgMTIuOTY0OCA0LjI4NDY3IDE0LjcyODggMy44NTQwMUMxNi40OTI4IDMuNDIzMzQgMTguMjc3NCAzLjIwODAxIDIwLjA4MjggMy4yMDgwMUMyMS45MTYxIDMuMjA4MDEgMjMuNzAxMSAzLjQyMzM0IDI1LjQzNzggMy44NTQwMUMyNy4xNzM4IDQuMjg0NjcgMjguODMzNCA0LjkxNjY3IDMwLjQxNjggNS43NTAwMUMzMC42NjY4IDUuODYxMzQgMzAuODEyNCA2LjAyMTAxIDMwLjg1MzggNi4yMjkwMUMzMC44OTU4IDYuNDM3NjcgMzAuODc1MSA2LjYyNTM0IDMwLjc5MTggNi43OTIwMUMzMC43MDg0IDYuOTg2MDEgMzAuNTY5NCA3LjEzMTY3IDMwLjM3NDggNy4yMjkwMUMzMC4xODAxIDcuMzI2MzQgMjkuOTU3OCA3LjMwNTY3IDI5LjcwNzggNy4xNjcwMUMyOC4yMzU4IDYuNDE3MDEgMjYuNjg3MSA1LjgzMzY3IDI1LjA2MTggNS40MTcwMUMyMy40MzcxIDUuMDAwMzQgMjEuNzc3NCA0Ljc5MjAxIDIwLjA4MjggNC43OTIwMUMxOC40MTYxIDQuNzkyMDEgMTYuNzcwNCA0Ljk4NjM0IDE1LjE0NTggNS4zNzUwMUMxMy41MjA0IDUuNzYzNjcgMTEuOTcxOCA2LjM2MTAxIDEwLjQ5OTggNy4xNjcwMVpNMTUuNjY2OCAzNi4zMzNDMTQuMDU1NCAzNC42NjYzIDEyLjgzMzEgMzIuODk1NyAxMS45OTk4IDMxLjAyMUMxMS4xNjY0IDI5LjE0NTcgMTAuNzQ5OCAyNy4wMTM3IDEwLjc0OTggMjQuNjI1QzEwLjc0OTggMjIuMDY5NyAxMS42NTk0IDE5LjkwMyAxMy40Nzg4IDE4LjEyNUMxNS4yOTgxIDE2LjM0NyAxNy40OTk0IDE1LjQ1OCAyMC4wODI4IDE1LjQ1OEMyMi42NjYxIDE1LjQ1OCAyNC44ODg0IDE2LjMzMyAyNi43NDk4IDE4LjA4M0MyOC42MTExIDE5LjgzMyAyOS41NDE4IDIxLjk3MiAyOS41NDE4IDI0LjVDMjkuNTQxOCAyNC43NzggMjkuNDcyMSAyNC45OTMzIDI5LjMzMjggMjUuMTQ2QzI5LjE5NDEgMjUuMjk4NyAyOC45OTk4IDI1LjM3NSAyOC43NDk4IDI1LjM3NUMyOC40NzE4IDI1LjM3NSAyOC4yNTY0IDI1LjI5ODcgMjguMTAzOCAyNS4xNDZDMjcuOTUxMSAyNC45OTMzIDI3Ljg3NDggMjQuNzc4IDI3Ljg3NDggMjQuNUMyNy44NzQ4IDIyLjM4ODcgMjcuMTEwOCAyMC42MTggMjUuNTgyOCAxOS4xODhDMjQuMDU1NCAxNy43NTczIDIyLjIyMjEgMTcuMDQyIDIwLjA4MjggMTcuMDQyQzE3Ljk0NDEgMTcuMDQyIDE2LjEyNDggMTcuNzc4IDE0LjYyNDggMTkuMjVDMTMuMTI0OCAyMC43MjIgMTIuMzc0OCAyMi41MTM3IDEyLjM3NDggMjQuNjI1QzEyLjM3NDggMjYuODQ3IDEyLjczNTggMjguNzcwNyAxMy40NTc4IDMwLjM5NkMxNC4xODA0IDMyLjAyMDcgMTUuMzE5NCAzMy42Mzg3IDE2Ljg3NDggMzUuMjVDMTcuMDY5NCAzNS40NDQ3IDE3LjE1OTggMzUuNjM5IDE3LjE0NTggMzUuODMzQzE3LjEzMTggMzYuMDI3NyAxNy4wNjkxIDM2LjIwODMgMTYuOTU3OCAzNi4zNzVDMTYuODE5MSAzNi41NDE3IDE2LjYxNzggMzYuNjI1IDE2LjM1MzggMzYuNjI1QzE2LjA4OTggMzYuNjI1IDE1Ljg2MDggMzYuNTI3NyAxNS42NjY4IDM2LjMzM1pNMjguNzkxOCAzMy41QzI2LjE4MDQgMzMuNSAyMy45NDQxIDMyLjY5NDMgMjIuMDgyOCAzMS4wODNDMjAuMjIyMSAyOS40NzIzIDE5LjI5MTggMjcuMjkyIDE5LjI5MTggMjQuNTQyQzE5LjI5MTggMjQuMjkyIDE5LjM2MTEgMjQuMDgzNyAxOS40OTk4IDIzLjkxN0MxOS42Mzg0IDIzLjc1MDMgMTkuODMyOCAyMy42NjcgMjAuMDgyOCAyMy42NjdDMjAuMzMyOCAyMy42NjcgMjAuNTI3NCAyMy43NTAzIDIwLjY2NjggMjMuOTE3QzIwLjgwNTQgMjQuMDgzNyAyMC44NzQ4IDI0LjI5MiAyMC44NzQ4IDI0LjU0MkMyMC44NzQ4IDI2Ljg0NzMgMjEuNjU5NCAyOC42NTI3IDIzLjIyODggMjkuOTU4QzI0Ljc5ODEgMzEuMjY0IDI2LjY1MjQgMzEuOTE3IDI4Ljc5MTggMzEuOTE3QzI5LjA0MTggMzEuOTE3IDI5LjMzMzQgMzEuODk2IDI5LjY2NjggMzEuODU0QzMwLjAwMDEgMzEuODEyNyAzMC4zMzM0IDMxLjc3OCAzMC42NjY4IDMxLjc1QzMwLjg4ODggMzEuNzIyIDMxLjA3NjEgMzEuNzc3NyAzMS4yMjg4IDMxLjkxN0MzMS4zODE0IDMyLjA1NTcgMzEuNDU3OCAzMi4yMDgzIDMxLjQ1NzggMzIuMzc1QzMxLjQ4NTggMzIuNTk3IDMxLjQ0NDEgMzIuNzc3NyAzMS4zMzI4IDMyLjkxN0MzMS4yMjIxIDMzLjA1NTcgMzEuMDgzNCAzMy4xNTI3IDMwLjkxNjggMzMuMjA4QzMwLjQ3MjEgMzMuMzQ3MyAzMC4wNTU0IDMzLjQzMDcgMjkuNjY2OCAzMy40NThDMjkuMjc3NCAzMy40ODYgMjguOTg1OCAzMy41IDI4Ljc5MTggMzMuNVoiIGZpbGw9ImJsYWNrIi8+CjwvZz4KPC9zdmc+Cg==`;
+
+export const googleIcon = `
+<svg
+		width="1.5em"
+		height="1.5em"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+		fill=""
+		data-icon="google"
+	>
+		<path
+			d="m19.6 10.2274c0-.70912-.0636-1.39092-.1818-2.04552h-9.4182v3.86822h5.3818c-.2318 1.25-.9363 2.3091-1.9954 3.0182v2.5091h3.2318c1.8909-1.7409 2.9818-4.3046 2.9818-7.35z"
+			fill="#4285f4"
+		/>
+		<path
+			d="m10 19.9999c2.7 0 4.9636-.8955 6.6181-2.4227l-3.2318-2.5091c-.8954.6-2.0409.9545-3.3863.9545-2.6046 0-4.8091-1.7591-5.5955-4.1227h-3.3409v2.5909c1.6455 3.2682 5.0273 5.5091 8.9364 5.5091z"
+			fill="#34a853"
+		/>
+		<path
+			d="m4.4045 11.8999c-.2-.6-.3136-1.2409-.3136-1.89997 0-.6591.1136-1.3.3136-1.9v-2.5909h-3.3409c-.6772 1.35-1.0636 2.8773-1.0636 4.4909 0 1.61357.3864 3.14087 1.0636 4.49087z"
+			fill="#fbbc04"
+		/>
+		<path
+			d="m10 3.9773c1.4681 0 2.7863.5045 3.8227 1.4954l2.8682-2.8682c-1.7318-1.6136-3.9955-2.6045-6.6909-2.6045-3.9091 0-7.2909 2.2409-8.9364 5.5091l3.3409 2.5909c.7864-2.3636 2.9909-4.1227 5.5955-4.1227z"
+			fill="#e94235"
+		/>
+	</svg>`;

package/src/themeHelpers/colorsHelpers.js

@@ -0,0 +1,94 @@
+import Color from 'color';
+
+const colorGaps = {
+  darkLight: 0.4,
+  highlight: 0.8,
+  contrast: 1,
+  edgeColor: {
+    darkLight: 0.25,
+    highlight: 0.1,
+  },
+};
+
+const darken = (c, percentage) => c.darken(percentage).hex();
+
+const contrast = (c) => {
+  const isDark = c.isDark();
+  return c
+    .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
+    .saturate(1)
+    .hex();
+};
+
+const lighten = (c, percentage) => {
+  const isDark = c.lightness() < 0.5;
+
+  if (isDark) {
+    return c.lightness(percentage * 100).hex();
+  }
+
+  return c.lighten(percentage).hex();
+};
+
+const isNearBlack = (color) => color.luminosity() < 0.01;
+const isNearWhite = (color) => color.luminosity() > 0.99;
+
+const generateDarkColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearWhite(color)
+      ? darken(color, colorGaps.edgeColor.darkLight)
+      : lighten(color, colorGaps.darkLight);
+  }
+
+  return isNearBlack(color)
+    ? lighten(color, colorGaps.edgeColor.darkLight)
+    : darken(color, colorGaps.darkLight);
+};
+
+const generateLightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.darkLight)
+      : darken(color, colorGaps.darkLight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.darkLight)
+    : lighten(color, colorGaps.darkLight);
+};
+
+const generateHighlightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.highlight)
+      : darken(color, colorGaps.highlight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.highlight)
+    : lighten(color, colorGaps.highlight);
+};
+
+export const genColor = (color, theme) => {
+  const mainColor = new Color(color.main || color);
+
+  const res = {
+    main: mainColor.hex(),
+    dark: color.dark || generateDarkColor(mainColor, theme),
+    light: color.light || generateLightColor(mainColor, theme),
+    highlight: color.highlight || generateHighlightColor(mainColor, theme),
+    contrast: color.contrast || contrast(mainColor),
+  };
+
+  return res;
+};
+
+export const genColors = (colors) => {
+  return Object.keys(colors).reduce((acc, colorName) => {
+    const currentColor = colors[colorName];
+
+    return Object.assign(acc, {
+      [colorName]: genColor(currentColor),
+    });
+  }, {});
+};

package/src/themeHelpers/componentsThemeManager.js

@@ -0,0 +1,45 @@
+class ComponentsThemeManager {
+  static mountOnPropName = 'DescopeThemeManager';
+
+  #themes = {};
+
+  #currentThemeName = 'light';
+
+  #callbacks = new Set();
+
+  #notify() {
+    this.#callbacks.forEach((cb) => cb?.());
+  }
+
+  get currentThemeName() {
+    return this.#currentThemeName;
+  }
+
+  set currentThemeName(themeName) {
+    this.#currentThemeName = themeName;
+    this.#notify();
+  }
+
+  get currentTheme() {
+    return this.#themes[this.currentThemeName];
+  }
+
+  onCurrentThemeChange(cb) {
+    this.#callbacks.add(cb);
+
+    return () => {
+      this.#callbacks.delete(cb);
+    };
+  }
+
+  set themes(themes) {
+    this.#themes = themes;
+    this.#notify();
+  }
+
+  get hasThemes() {
+    return !!Object.keys(this.#themes).length;
+  }
+}
+
+export const componentsThemeManager = new ComponentsThemeManager();

package/src/themeHelpers/index.js

@@ -0,0 +1,191 @@
+import merge from 'lodash.merge';
+import {
+  BASE_THEME_SECTION,
+  DESCOPE_PREFIX,
+  PORTAL_THEME_PREFIX,
+} from '../constants';
+import { isUrl, kebabCase } from '../utils';
+import { getComponentName, getCssVarName } from '../componentsHelpers';
+
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+
+// lodash.set alternative
+const set = (obj, path, value) => {
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+
+  pathArray.reduce((acc, key, i) => {
+    if (acc[key] === undefined) acc[key] = {};
+    if (i === pathArray.length - 1) acc[key] = value;
+    return acc[key];
+  }, obj);
+
+  return obj;
+};
+
+const transformTheme = (theme, path, getTransformation) => {
+  return Object.entries(theme).reduce((acc, [key, val]) => {
+    if (val?.constructor !== Object) {
+      return merge(acc, getTransformation(path.concat(key), val));
+    }
+    return merge(acc, transformTheme(val, [...path, key], getTransformation));
+  }, {});
+};
+
+const stringifyArray = (strArr) =>
+  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+
+const getCssVarValue = (val) => {
+  switch (true) {
+    case Array.isArray(val):
+      return stringifyArray(val);
+    case isUrl(val):
+      return `url(${val})`;
+    default:
+      return val;
+  }
+};
+
+export const themeToCSSVarsObj = (theme) =>
+  transformTheme(theme, [], (path, val) => ({
+    [getVarName(path)]: getCssVarValue(val),
+  }));
+
+export const getThemeRefs = (theme, prefix) =>
+  transformTheme(theme, [], (path) =>
+    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`),
+  );
+
+export const getThemeVars = (theme, prefix) =>
+  transformTheme(theme, [], (path) =>
+    set({}, path, getVarName(prefix ? [prefix, ...path] : path)),
+  );
+
+export const globalsThemeToStyle = (theme, themeName = '') => {
+  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
+    (acc, entry) => `${acc}${entry.join(':')};\n`,
+    '',
+  );
+
+  if (!themeName) return style;
+
+  return `*[data-theme="${themeName}"] {${style}}`;
+};
+
+const componentsThemeToStyleObj = (componentsTheme) =>
+  transformTheme(componentsTheme, [], (path, val) => {
+    const [component, ...restPath] = path;
+    const property = restPath.pop();
+    const componentName = getComponentName(component);
+
+    if (property === 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn(
+        componentName,
+        `theme value: "${val}" is mapped to an invalid property`,
+      );
+    }
+
+    // we need a support for portal components theme (e.g. overlay)
+    // this allows us to generate those themes under different sections
+    // if the theme has root level attribute that starts with #
+    // we are generating a new theme
+    let themeName = BASE_THEME_SECTION;
+
+    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
+      themeName = restPath.shift();
+    }
+
+    // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
+    // starts with underscore -> attribute selector
+    const attrsSelector = restPath.reduce((acc, section, idx) => {
+      if (section.startsWith('_'))
+        return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
+
+      const nextSection = restPath[idx + 1];
+
+      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+        // eslint-disable-next-line no-console
+        console.error(
+          'theme generator',
+          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`,
+        );
+        return acc;
+      }
+
+      return `${acc}[${kebabCase(section)}="${restPath
+        .splice(idx + 1, 1)
+        .join('')}"]`;
+    }, '');
+
+    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
+
+    return {
+      [componentName]: {
+        [themeName]: {
+          [selector]: {
+            [property]: getCssVarValue(val),
+          },
+        },
+      },
+    };
+  });
+
+const componentsThemeToStyle = (componentsTheme) =>
+  Object.entries(componentsTheme).reduce(
+    (acc, [selector, vars]) =>
+      `${acc}${selector} { \n${Object.entries(vars)
+        .map(([key, val]) => `${key}: ${val}`)
+        .join(';\n')} \n}\n\n`,
+    '',
+  );
+
+export const createComponentsTheme = (componentsTheme) => {
+  const styleObj = componentsThemeToStyleObj(componentsTheme);
+
+  return Object.keys(styleObj).reduce((acc, componentName) => {
+    const componentThemes = styleObj[componentName];
+
+    return Object.assign(acc, {
+      [componentName]: Object.keys(componentThemes).reduce(
+        (res, theme) =>
+          Object.assign(res, {
+            [theme]: componentsThemeToStyle(componentThemes[theme]),
+          }),
+        {},
+      ),
+    });
+  }, {});
+};
+
+export const themeToStyle = ({ globals, components }, themeName) => ({
+  globals: globalsThemeToStyle(globals, themeName),
+  components: createComponentsTheme(components),
+});
+
+// allows to generate css variables with nested fallbacks
+export const useVar = (...varNames) => {
+  return varNames.reduceRight((acc, value) => {
+    if (value.startsWith('--')) return `var(${value}${acc ? `, ${acc}` : acc})`;
+
+    return `${value}${acc ? `, ${acc}` : acc}`;
+  }, '');
+};
+
+export const createHelperVars = (theme, prefix) => {
+  const res = transformTheme(theme, [], (path, value) => {
+    const modifiedPath = [...path];
+    const property = modifiedPath.splice(-1);
+    const varName = getCssVarName(prefix, property);
+
+    const vars = { [property]: varName };
+    const useVars = { [property]: useVar(varName) };
+
+    return { theme: set({}, [...modifiedPath, varName], value), useVars, vars };
+  });
+
+  return [res.theme, res.useVars, res.vars];
+};
+
+export { componentsThemeManager } from './componentsThemeManager';
+export * from './colorsHelpers';
+export * from './resetHelpers';