@brightspot/ui 0.0.0-alpha.1

package/dist/tailwind-plugin-button.ts

@@ -0,0 +1,244 @@
+import plugin from 'tailwindcss/plugin'
+import { CSSRuleObject } from 'tailwindcss/types/config'
+declare let module: any
+
+/**
+ * Buttons communicate actions that users can take such as submit a form, begin a new task,
+ * trigger a new UI element to appear or take a new or next step in some process.
+ *
+ * Class Names:
+ *
+ *  btu-button - Establishes a default button container
+ *  btu-button-[fill-none | container-none | outline | text-hidden] - Different types of buttons like solid,
+ *                                                                    outline, icon buttons etc
+ *  btu-button-[sm|md|lg|xl|2xl] - Size of buttons
+ *  btu-button-[$theme-colors] - Color of buttons
+ *     - required if using btu-button-outline to see outline
+ *  btu-button-[pressed | disabled] - States of buttons (active or disabled)
+ *
+ * Example Usages:
+ *
+ *  Publish button in content edit page   ->      btu-button btu-button-primary btu-button-sm
+ *
+ *  Search toolbar icon button            ->      btu-button btu-button-text-hidden btu-button-fill-none
+ *                                                btu-button-gray before:btu-icon before:btu-icon-search
+ */
+
+module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
+  const textSizes: Record<string, [string, string]> = theme('fontSize')
+  const colors: CSSRuleObject = theme('colors') || {}
+  const iconSizes: CSSRuleObject = theme('iconSize') || {}
+  const prefix = '.btu-button'
+
+  const disabledStyle: CSSRuleObject = {
+    '--button-bg-gradient': 'none',
+    '--button-disabled-color': `var(--button-disabled-color-fill-none, var(--button-disabled-color-fill, oklch(var(--btu-theme-gray-100))))`,
+    '--button-disabled-text-color': `var(--button-disabled-text-color-fill-none, var(--button-text-color, oklch(var(--btu-theme-gray-400))))`,
+    pointerEvents: 'none',
+    userSelect: 'none',
+  }
+
+  const activeStyle: CSSRuleObject = {
+    '--button-pressed': ' ',
+  }
+
+  const components: CSSRuleObject = {
+    '.btu-button': {
+      // default button
+      '--button-bg-gradient': 'none',
+      '--button-color': '',
+      '--button-text-color': '',
+      '--button-pressed': 'initial',
+      '--button-fill-none': 'initial',
+      '--button-padding-xs': '0.25rem 0.5rem',
+      '--button-padding-sm': '0.5rem 0.875rem',
+      '--button-padding-md': '0.625rem 1rem',
+      '--button-padding-lg': '0.625rem 1.125rem',
+      '--button-padding-xl': '0.75rem 1.25rem',
+      '--button-padding-2xl': '1rem 1.75rem',
+      '--button-font-size': textSizes['sm'][0],
+      '--button-line-height': textSizes['sm'][1],
+      display: 'inline-flex',
+      cursor: 'pointer',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.5rem',
+      background:
+        'var(--button-bg-gradient), var(--button-pressed-color, var(--button-disabled-color, var(--button-color)))',
+      borderRadius: 'var(--button-border-radius, 0.5rem)',
+      color:
+        'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))',
+      padding: 'var(--button-padding-sm)',
+      fontSize: 'var(--button-font-size)',
+      lineHeight: 'var(--button-line-height)',
+      fontWeight: theme('fontWeight.semibold'),
+      position: 'relative',
+      height: 'var(--button-size-sm, auto)',
+      width: 'var(--button-size-sm, auto)',
+      '&[aria-pressed="true"]': activeStyle,
+      '&:disabled': disabledStyle,
+      '&[disabled]': disabledStyle,
+      textDecoration: 'none',
+      '&:focus': {
+        color:
+          'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))',
+      },
+      '&:hover': {
+        color:
+          'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))',
+      },
+    },
+    '.btu-button-text-hidden': {
+      '--button-padding-xs': '0.25rem',
+      '--button-padding-sm': '0.5rem',
+      '--button-padding-md': '0.625rem',
+      '--button-padding-lg': '0.75rem',
+      '--button-padding-xl': '0.875rem',
+      '--button-padding-2xl': '1rem',
+      '--button-icon-font-size': '0px',
+      '--button-icon-line-height': '1',
+      '--button-font-size': 'var(--button-icon-font-size)',
+      '--button-line-height': 'var(--button-icon-line-height)',
+      '--button-size-xs': '1.75rem',
+      '--button-size-sm': '2.25rem',
+      '--button-size-md': '2.5rem',
+      '--button-size-lg': '2.75rem',
+      '--button-size-xl': '3rem',
+      '--button-size-2xl': '3.5rem',
+      overflow: 'hidden',
+      gap: '0',
+    },
+    '.btu-button-outline': {
+      '--button-outline-offset-width': '1px',
+      '--button-outline-offset-color': 'var(--button-outline-color)',
+      outline: '1px solid var(--button-outline-color)',
+      '&:focus-visible': {
+        outline: 'none',
+      },
+    },
+    '.btu-button-fill-none': {
+      '--button-fill-none': ' ',
+      backgroundColor:
+        'var(--button-pressed-color, var(--button-fill-none-color))',
+      color:
+        'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
+      '&:focus': {
+        color:
+          'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
+      },
+      '&:hover': {
+        color:
+          'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
+      },
+    },
+    '.btu-button-disabled': disabledStyle,
+    '.btu-button-pressed': activeStyle,
+  }
+
+  // background & text colors for buttons in different states
+  for (const key in colors) {
+    if (
+      key === 'currentColor' ||
+      key === 'transparent' ||
+      key === 'white' ||
+      key === 'black'
+    )
+      continue
+    const focusStyle: CSSRuleObject = {
+      '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'success' ? '700' : '600'}))`,
+      '--button-fill-none-color': `transparent`,
+      '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '700' : '600'}))`,
+      '--tw-ring-opacity': '1',
+      '--tw-ring-color': `oklch(var(--btu-theme-${key === 'gray' ? 'primary' : key}-100))`,
+      '--tw-ring-offset-width': '1px',
+      '--tw-ring-offset-color': `${key === 'gray' ? 'oklch(var(--btu-theme-primary-800))' : 'var(--button-outline-offset-color, var(--button-color))'}`,
+    }
+    components[prefix + '-' + key] = {
+      '--button-bg-gradient': `var(--button-fill-none, ${key === 'primary' ? theme('colors.primary.gradient') : 'none'})`,
+      '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'success' ? '700' : '600'}))`,
+      '--button-text-color': `${key === 'gray' ? 'oklch(var(--btu-theme-gray-700))' : 'var(--btu-theme-white)'}`,
+      '--button-fill-none-color': 'transparent',
+      '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '700' : '600'}))`,
+      '--button-outline-color': `oklch(var(--btu-theme-${key}-300))`,
+      '--button-disabled-color-fill': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'primary' ? '300' : '200'}))`,
+      '--button-disabled-color-fill-none': `var(--button-fill-none) oklch(var(--btu-theme-white))`,
+      '--button-disabled-text-color-fill-none': `var(--button-fill-none) oklch(var(--btu-theme-${key}-${key === 'gray' ? '400' : '300'}))`,
+      '--button-pressed-color': `var(--button-pressed) var(--button-disabled-color, oklch(var(--btu-theme-${key === 'gray' ? 'primary' : key}-50)))`,
+      '--button-pressed-text-color': `var(--button-pressed) var(--button-disabled-text-color, oklch(var(--btu-theme-${key === 'gray' ? 'primary' : key}-800)))`,
+      '&:hover': {
+        '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '200' : key === 'success' ? '800' : '700'}))`,
+        '--button-fill-none-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '200' : '50'}))`,
+        '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '900' : '800'}))`,
+      },
+      '&:focus': focusStyle,
+      '&.is-focused': focusStyle,
+    }
+  }
+
+  const buttonSizes: CSSRuleObject = {
+    xs: {
+      fontSize: `var(--button-icon-font-size, ${textSizes['sm'][0]})`,
+      lineHeight: `var(--button-icon-line-height, ${textSizes['sm'][1]})`,
+      padding: 'var(--button-padding-xs)',
+      width: 'var(--button-size-xs, auto)',
+      height: 'var(--button-size-xs, auto)',
+    },
+    sm: {
+      fontSize: `var(--button-icon-font-size, ${textSizes['sm'][0]})`,
+      lineHeight: `var(--button-icon-line-height, ${textSizes['sm'][1]})`,
+      padding: 'var(--button-padding-sm)',
+      width: 'var(--button-size-sm, auto)',
+      height: 'var(--button-size-sm, auto)',
+    },
+    md: {
+      fontSize: `var(--button-icon-font-size, ${textSizes['sm'][0]})`,
+      lineHeight: `var(--button-icon-line-height, ${textSizes['sm'][1]})`,
+      padding: 'var(--button-padding-md)',
+      width: 'var(--button-size-md, auto)',
+      height: 'var(--button-size-md, auto)',
+    },
+    lg: {
+      fontSize: `var(--button-icon-font-size, ${textSizes['md'][0]})`,
+      lineHeight: `var(--button-icon-line-height, ${textSizes['md'][1]})`,
+      padding: 'var(--button-padding-lg)',
+      width: 'var(--button-size-lg, auto)',
+      height: 'var(--button-size-lg, auto)',
+    },
+    xl: {
+      fontSize: `var(--button-icon-font-size, ${textSizes['md'][0]})`,
+      lineHeight: `var(--button-icon-line-height, ${textSizes['md'][1]})`,
+      padding: 'var(--button-padding-xl)',
+      width: 'var(--button-size-xl, auto)',
+      height: 'var(--button-size-xl, auto)',
+    },
+    '2xl': {
+      '--Icon-size': iconSizes['lg'],
+      fontSize: `var(--button-icon-font-size, ${textSizes['lg'][0]})`,
+      lineHeight: `var(--button-icon-line-height, ${textSizes['lg'][1]})`,
+      padding: 'var(--button-padding-2xl)',
+      width: 'var(--button-size-2xl, auto)',
+      height: 'var(--button-size-2xl, auto)',
+    },
+  }
+  for (const key in buttonSizes) {
+    components[prefix + '-' + key] = buttonSizes[key]
+  }
+  addComponents(components)
+
+  /*
+    The style properties for buttons without a container should always
+    override the default button styles (eg: size, fill).
+    Since the classnames could be in any order in the markup or "@apply" directives,
+    we're utilizing the utility (layer) approach of tailwindcss to achieve this prioritization.
+  */
+  const noContainerButton: CSSRuleObject = {
+    '.btu-button-container-none': {
+      padding: '0',
+      display: 'inline-flex',
+      backgroundColor: 'transparent',
+      color:
+        'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))',
+    },
+  }
+  addUtilities(noContainerButton)
+})

package/dist/tailwind-plugin-heading.js

@@ -0,0 +1,51 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Headings are a combination of font-size, line-height and weight.
+ *
+ * Class Names:
+ *
+ *  btu-heading-1
+ *  btu-heading-2
+ *  btu-heading-3
+ *  btu-heading-4
+ *  btu-heading-5
+ *
+ * Example Usage:
+ *
+ *  Heading level 3  ->  btu-heading-3
+ *
+ */
+module.exports = plugin(function ({ addComponents, theme }) {
+    addComponents({
+        '.btu-heading-1': {
+            'font-size': '2.25rem',
+            'line-height': theme('lineHeight.9'),
+            'font-weight': '600',
+        },
+        '.btu-heading-2': {
+            'font-size': '1.875rem',
+            'line-height': theme('lineHeight.8'),
+            'font-weight': '600',
+        },
+        '.btu-heading-3': {
+            'font-size': '1.5rem',
+            'line-height': theme('lineHeight.7'),
+            'font-weight': '600',
+        },
+        '.btu-heading-4': {
+            'font-size': '1.125rem',
+            'line-height': theme('lineHeight.6'),
+            'font-weight': '600',
+        },
+        '.btu-heading-5': {
+            'font-size': '1rem',
+            'line-height': theme('lineHeight.5'),
+            'font-weight': '600',
+        },
+        '.btu-heading-6': {
+            'font-size': '.875rem',
+            'line-height': theme('lineHeight.4'),
+            'font-weight': '600',
+        },
+    });
+});

package/dist/tailwind-plugin-heading.ts

@@ -0,0 +1,54 @@
+import plugin from 'tailwindcss/plugin'
+declare let module: any
+
+/**
+ * Headings are a combination of font-size, line-height and weight.
+ *
+ * Class Names:
+ *
+ *  btu-heading-1
+ *  btu-heading-2
+ *  btu-heading-3
+ *  btu-heading-4
+ *  btu-heading-5
+ *
+ * Example Usage:
+ *
+ *  Heading level 3  ->  btu-heading-3
+ *
+ */
+
+module.exports = plugin(function ({ addComponents, theme }) {
+  addComponents({
+    '.btu-heading-1': {
+      'font-size': '2.25rem',
+      'line-height': theme('lineHeight.9'),
+      'font-weight': '600',
+    },
+    '.btu-heading-2': {
+      'font-size': '1.875rem',
+      'line-height': theme('lineHeight.8'),
+      'font-weight': '600',
+    },
+    '.btu-heading-3': {
+      'font-size': '1.5rem',
+      'line-height': theme('lineHeight.7'),
+      'font-weight': '600',
+    },
+    '.btu-heading-4': {
+      'font-size': '1.125rem',
+      'line-height': theme('lineHeight.6'),
+      'font-weight': '600',
+    },
+    '.btu-heading-5': {
+      'font-size': '1rem',
+      'line-height': theme('lineHeight.5'),
+      'font-weight': '600',
+    },
+    '.btu-heading-6': {
+      'font-size': '.875rem',
+      'line-height': theme('lineHeight.4'),
+      'font-weight': '600',
+    },
+  })
+})

package/dist/tailwind-plugin-icon.js

@@ -0,0 +1,247 @@
+import plugin from 'tailwindcss/plugin';
+import icons from 'lucide-static/font/info.json';
+import * as LucideExports from 'lucide-static/dist/cjs/lucide-static';
+/**
+ * Lucide Icons | https://lucide.dev/icons/
+ * Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
+ * Colors can also be changed via symbol overrides.
+ * All strokes in these icons have been converted to single vectors
+ * so color overrides are respected within variants.
+ *
+ * Class Names:
+ *
+ *  btu-icon - Establishes the standard icon styles and font.
+ *  btu-icon-{name-of-icon} - Sets the font glyph to the value of the icon you want.
+ *  btu-icon-[xs|sm|md|lg|xl|{arbitary value}] - Size of the icon.
+ *  btu-icon-gradient-[primary] - Gradient to use for the icon background.
+ *  btu-icon-via-mask-{name of icon} - SVG mask to use given a specific icon name.
+ *    - exposes a custom property `--Icon-svg` data URI to set the mask.
+ *
+ * Usages:
+ *
+ * A heart icon:
+ * >   before:btu-icon before:btu-icon-heart
+ *
+ * A heart icon that is 2rem in size:
+ * >   before:btu-icon before:btu-icon-heart before:[--Icon-size:2rem]
+ * - or -
+ * >   before:btu-icon before:btu-icon-heart before:btu-icon-lg
+ *
+ * A heart icon with a gradient background:
+ * >   before:btu-icon-gradient-primary before:btu-icon-via-mask-heart
+ */
+const svgs = {};
+const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g;
+for (const [key, value] of Object.entries(LucideExports)) {
+    if (LucideExports.hasOwnProperty(key)) {
+        if (typeof value === 'string') {
+            svgs[key] = value;
+        }
+    }
+}
+function addNameSpace(data) {
+    if (data.indexOf(`http://www.w3.org/2000/svg`) < 0) {
+        data = data.replace(/<svg/g, `<svg xmlns='http://www.w3.org/2000/svg'`);
+    }
+    return data;
+}
+function pascalToKebab(str) {
+    return str
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Za-z])([0-9])/g, '$1-$2')
+        .toLowerCase();
+}
+function kebabToPascal(str) {
+    return str
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join('');
+}
+function encodeSVG(data) {
+    data = data.replace(/"/g, `'`);
+    data = data.replace(/>\s{1,}</g, `><`);
+    data = data.replace(/\s{2,}/g, ` `);
+    return data.replace(symbols, encodeURIComponent);
+}
+module.exports = plugin(function ({ addBase, addComponents, matchUtilities, theme }) {
+    const size = 'var(--Icon-size)';
+    const prefix = '.btu-icon-';
+    Object.entries(svgs).forEach(([key, svg]) => {
+        addComponents({
+            [`${prefix}via-mask`]: {
+                '--size': '20px',
+                mask: 'var(--Icon-svg, var(--compat-icon-via-mask)) center / contain no-repeat',
+                'aspect-ratio': '1',
+                'inline-size': 'var(--Icon-size, --size)',
+            },
+            [`${prefix}via-mask-${pascalToKebab(key)}`]: {
+                '--size': '20px',
+                '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svg))}")`,
+                mask: 'var(--Icon-svg) center / contain no-repeat',
+                'aspect-ratio': '1',
+                'inline-size': 'var(--Icon-size, --size)',
+            },
+        });
+    });
+    addComponents({
+        '.btu-icon': {
+            'font-family': theme('fontFamily.lucide'),
+            direction: 'ltr',
+            display: 'inline-flex',
+            'font-feature-settings': '"liga" 0',
+            '-moz-osx-font-smoothing': 'grayscale',
+            '-webkit-font-smoothing': 'antialiased',
+            'font-size': size,
+            'font-style': 'normal',
+            'font-weight': 'normal',
+            'letter-spacing': 'normal',
+            'line-height': size,
+            'text-transform': 'none',
+            'white-space': 'nowrap',
+            'word-wrap': 'normal',
+            'vertical-align': 'top',
+        },
+    });
+    addComponents(Object.entries(icons).map((value) => {
+        return {
+            [prefix + value[0]]: {
+                '--tw-content': `'${value[1].encodedCode}'`,
+            },
+        };
+    }));
+    matchUtilities({
+        'btu-icon-gradient': (value) => ({
+            'background-image': value,
+            'background-repeat': 'no-repeat',
+            'background-position': 'center',
+            'background-size': 'var(--Icon-size) var(--Icon-size)',
+        }),
+    }, {
+        values: {
+            primary: 'linear-gradient(to top right, theme(colors.primary.500), theme(colors.primary.700), theme(colors.primary.900))',
+        },
+    });
+    matchUtilities({
+        'btu-icon': (value) => ({
+            '--Icon-size': value,
+        }),
+    }, { values: theme('iconSize') });
+    // Compat v4 Icons:
+    // Icon names which are Google Material icons mapped to a lucide equivalent to support the legacy markup.
+    const compatNames = new Map();
+    compatNames.set('arrow_downward', 'arrow-down');
+    compatNames.set('arrow_upward', 'arrow-up');
+    compatNames.set('assessment', 'file-chart-pie');
+    compatNames.set('assignment', 'clipboard-check');
+    compatNames.set('attachment', 'file');
+    compatNames.set('auto_stories', 'book');
+    compatNames.set('ballot', 'shield-question');
+    compatNames.set('border_all', 'table-2');
+    compatNames.set('cancel', 'circle-x');
+    compatNames.set('chat_bubble', 'message-circle');
+    compatNames.set('check_circle', 'circle-check-big');
+    compatNames.set('chrome_reader_mode', 'table-properties');
+    compatNames.set('class', 'book-type');
+    compatNames.set('close', 'x');
+    compatNames.set('code', 'code');
+    compatNames.set('comment', 'message-circle-plus');
+    compatNames.set('comments_disabled', 'message-circle-x');
+    compatNames.set('create_new_folder', 'boxes');
+    compatNames.set('description', 'file-text');
+    compatNames.set('edit', 'pencil');
+    compatNames.set('error', 'circle-alert');
+    compatNames.set('expand_more', 'chevrons-up-down');
+    compatNames.set('expand_less', 'chevrons-down-up');
+    compatNames.set('feed', 'scroll-text');
+    compatNames.set('format_align_center', 'align-center');
+    compatNames.set('format_align_left', 'align-left');
+    compatNames.set('format_align_right', 'align-right');
+    compatNames.set('format_bold', 'bold');
+    compatNames.set('format_clear', 'remove-formatting');
+    compatNames.set('format_indent_increase', 'indent-increase');
+    compatNames.set('format_indent_decrease', 'indent-decrease');
+    compatNames.set('format_italic', 'italic');
+    compatNames.set('format_list_bulleted', 'list');
+    compatNames.set('format_list_numbered', 'badge-help');
+    compatNames.set('format_quote', 'quote');
+    compatNames.set('format_strikethrough', 'strikethrough');
+    compatNames.set('format_underlined', 'underline');
+    compatNames.set('fullscreen', 'maximize-2');
+    compatNames.set('grid_on', 'file-spreadsheet');
+    compatNames.set('handshake', 'handshake');
+    compatNames.set('help', 'circle-help');
+    compatNames.set('history', 'history');
+    compatNames.set('home', 'house');
+    compatNames.set('import_contacts', 'book');
+    compatNames.set('insert_photo', 'file-image');
+    compatNames.set('keyboard', 'keyboard');
+    compatNames.set('link', 'link-2');
+    compatNames.set('link_off', 'link-2-off');
+    compatNames.set('live_tv', 'tv-minimal-play');
+    compatNames.set('local_offer', 'tag');
+    compatNames.set('manage_search', 'text-search');
+    compatNames.set('menu_book', 'book-marked');
+    compatNames.set('more_horiz', 'ellipsis');
+    compatNames.set('music_note', 'music-2');
+    compatNames.set('notes', 'notebook-text');
+    compatNames.set('ondemand_video', 'video');
+    compatNames.set('open_with', 'move');
+    compatNames.set('person', 'user-pen');
+    compatNames.set('photo', 'file-image');
+    compatNames.set('photo_camera', 'camera');
+    compatNames.set('photo_library', 'images');
+    compatNames.set('picture', 'image-up');
+    compatNames.set('play', 'square-play');
+    compatNames.set('playlist_play', 'list-video');
+    compatNames.set('post_add', 'clipboard-plus');
+    compatNames.set('question_answer', 'pencil-line');
+    compatNames.set('rate_review', 'square-pen');
+    compatNames.set('redo', 'redo');
+    compatNames.set('remove', 'minus');
+    compatNames.set('school', 'badge-info');
+    compatNames.set('search', 'search');
+    compatNames.set('settings_ethernet', 'chevrons-left-right-ellipsis');
+    compatNames.set('short_text', 'text');
+    compatNames.set('slideshow', 'film');
+    compatNames.set('slow_motion_video', 'list-video');
+    compatNames.set('subject', 'letter-text');
+    compatNames.set('textsms', 'message-circle-more');
+    compatNames.set('theaters', 'clapperboard');
+    compatNames.set('toc', 'notebook-tabs');
+    compatNames.set('toggle_off', 'toggle-left');
+    compatNames.set('toggle_on', 'toggle-right');
+    compatNames.set('undo', 'undo');
+    compatNames.set('vertical_align_bottom', 'subscript');
+    compatNames.set('vertical_align_top', 'superscript');
+    compatNames.set('view_compact', 'layout-panel-top');
+    compatNames.set('volume_up', 'volume-2');
+    compatNames.set('warning', 'triangle-alert');
+    compatNames.set('wb_incandescent', 'lightbulb');
+    compatNames.set('widgets', 'blocks');
+    compatNames.set('zap', 'zap');
+    compatNames.forEach((value, key) => {
+        addBase({
+            /* this is the default icon when no mapped icon is found */
+            [`[data-icon],[data-icon-name],[data-icon-button-name]`]: {
+                '--compat-icon': `'${icons['circle-dashed'].encodedCode}'`,
+                '--compat-icon-via-mask': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svgs['CircleDashed']))}")`,
+            },
+            [`html [data-icon="${key}"],html [data-icon-name="${key}"],html [data-icon-button-name="${key}"]`]: {
+                // tslint:disable-next-line
+                '--compat-icon': `'${icons[value].encodedCode}'`,
+                '--compat-icon-via-mask': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svgs[kebabToPascal(value)]))}")`,
+            },
+        });
+    });
+}, {
+    theme: {
+        iconSize: {
+            DEFAULT: '1.25rem',
+            xs: '0.75rem',
+            sm: '1rem',
+            md: '1.25rem',
+            lg: '1.5rem',
+            xl: '1.75rem',
+        },
+    },
+});