@brightspot/ui 0.0.0-alpha.1

package/dist/tailwind-plugin-icon.ts

@@ -0,0 +1,280 @@
+import plugin from 'tailwindcss/plugin'
+import icons from 'lucide-static/font/info.json'
+import * as LucideExports from 'lucide-static/dist/cjs/lucide-static'
+declare let module: any
+
+interface LucideTypes {
+  encodedCode: string
+  prefix: string
+  className: string
+  unicode: string
+}
+
+/**
+ * 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: Record<string, string> = {}
+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: string): string {
+  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: string): string {
+  return str
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/([A-Za-z])([0-9])/g, '$1-$2')
+    .toLowerCase()
+}
+
+function kebabToPascal(str: string): string {
+  return str
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('')
+}
+
+function encodeSVG(data: string): string {
+  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: string, 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 as Record<string, LucideTypes>)[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',
+      },
+    },
+  },
+)

package/dist/tailwind-plugin-loader.js

@@ -0,0 +1,31 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Loading indicators are a helpful way to indicate to the user that content is on the way.
+ * These should be user sparingly, and only in cases where the loading time is very short.
+ * For longer load times, we suggest using a progress bar to give the user a more
+ * realistic indication of how long the process will take.
+ *
+ * Since we cannot change markup, the loader SVG is rendered as a Data URI and
+ * then used as a background image of a pseudo-elements' content.
+ *
+ * Loaders come with light and dark styles.
+ *
+ * If you need to reference the loader size, you can do so with:
+ * --Loader-size
+ *
+ * Class Name: btu-loader
+ *
+ * Typical Usage (user defined pseudo-element):
+ *  @apply after:btu-loader;
+ */
+module.exports = plugin(function ({ addComponents, theme }) {
+    const loader = {
+        '--Loader-size': '2rem',
+        display: 'block',
+        content: 'var(--tw-content)',
+        '--tw-content': `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 50 50%27%3E %3Cstyle%3E :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.light.200'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.light.600'))}%29; --btu-theme-primary-hue: 264; %7D @media %28prefers-color-scheme: dark%29 %7B :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.dark.100'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.dark.700'))}%29; %7D %7D @keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29;%7D%7D @keyframes dash%7B0%25%7Bstroke-dasharray:1,200;stroke-dashoffset:0;%7D50%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-35;%7D100%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-124;%7D%7D svg %7Bwill-change:transform;position:relative;animation:rotate 1.6s linear infinite;%7D .Loader-bg %7Bwill-change:transform;fill:none;transform-origin:center;%7D .Loader-fg %7Bwill-change:transform;animation:dash 1s infinite ease-in-out;animation-fill-mode:both;fill:none;transform-origin:center;stroke-linecap:round;stroke-dasharray:1,200;stroke-dashoffset:0;%7D %3C/style%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-bg%27 stroke=%27var%28--Loader-bg-color%29%27/%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-fg%27 stroke=%27var%28--Loader-fg-color%29%27/%3E %3C/svg%3E")`,
+    };
+    addComponents({
+        '.btu-loader': loader,
+    });
+});

package/dist/tailwind-plugin-loader.ts

@@ -0,0 +1,34 @@
+import plugin from 'tailwindcss/plugin'
+declare let module: any
+
+/**
+ * Loading indicators are a helpful way to indicate to the user that content is on the way.
+ * These should be user sparingly, and only in cases where the loading time is very short.
+ * For longer load times, we suggest using a progress bar to give the user a more
+ * realistic indication of how long the process will take.
+ *
+ * Since we cannot change markup, the loader SVG is rendered as a Data URI and
+ * then used as a background image of a pseudo-elements' content.
+ *
+ * Loaders come with light and dark styles.
+ *
+ * If you need to reference the loader size, you can do so with:
+ * --Loader-size
+ *
+ * Class Name: btu-loader
+ *
+ * Typical Usage (user defined pseudo-element):
+ *  @apply after:btu-loader;
+ */
+
+module.exports = plugin(function ({ addComponents, theme }) {
+  const loader = {
+    '--Loader-size': '2rem',
+    display: 'block',
+    content: 'var(--tw-content)',
+    '--tw-content': `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 50 50%27%3E %3Cstyle%3E :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.light.200'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.light.600'))}%29; --btu-theme-primary-hue: 264; %7D @media %28prefers-color-scheme: dark%29 %7B :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.dark.100'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.dark.700'))}%29; %7D %7D @keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29;%7D%7D @keyframes dash%7B0%25%7Bstroke-dasharray:1,200;stroke-dashoffset:0;%7D50%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-35;%7D100%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-124;%7D%7D svg %7Bwill-change:transform;position:relative;animation:rotate 1.6s linear infinite;%7D .Loader-bg %7Bwill-change:transform;fill:none;transform-origin:center;%7D .Loader-fg %7Bwill-change:transform;animation:dash 1s infinite ease-in-out;animation-fill-mode:both;fill:none;transform-origin:center;stroke-linecap:round;stroke-dasharray:1,200;stroke-dashoffset:0;%7D %3C/style%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-bg%27 stroke=%27var%28--Loader-bg-color%29%27/%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-fg%27 stroke=%27var%28--Loader-fg-color%29%27/%3E %3C/svg%3E")`,
+  }
+  addComponents({
+    '.btu-loader': loader,
+  })
+})

package/dist/tailwind-plugin-scroll-shadow.js

@@ -0,0 +1,77 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * This plugin adds shadows to the edges of a scrollable container when the content
+ * of the container is overflowing.
+ * You can choose a light or dark shadow.
+ * Your container must not already use before & after pseudo elements.
+ * If you use TWCSS before/after modifiers on this element, make sure you also manually
+ * set the content property to the `--whitespace` variable. This is a workaround for TWCSS
+ * automatically adding a content property to the before/after pseudo-elements, which
+ * overrides the `--whitespace` variable by default.
+ *
+ * Class Names:
+ *  btu-scrollshadow-light - light shadow.
+ *  btu-scrollshadow-dark - dark shadow.
+ *
+ * Typical Usage:
+ *  @apply btu-scrollshadow-light;
+ *
+ * Custom usage for when you need to style before/after pseudo-elements:
+ *  @apply btu-scrollshadow-light before:absolute before:content-[--whitespace] <-- must do this (see more info above);
+ */
+module.exports = plugin(function ({ addComponents }) {
+    const shared = {
+        /* these 3 whitespaces dictate the width of the shadow (necessary to give the pseudo elements an intrinsic size). */
+        '--whitespace': '"\u2002\u2002\u2002"',
+        animation: 'detect-scroll',
+        'overflow-x': 'auto',
+        'animation-fill-mode': 'none',
+        'animation-timeline': '--scroll-timeline',
+        'scroll-timeline': '--scroll-timeline x',
+        '&:before, &:after': {
+            '--visibility-if-can-scroll': 'var(--can-scroll) visible',
+            '--visibility-if-cant-scroll': 'hidden',
+            content: 'var(--whitespace)',
+            'animation-name': 'fade-in',
+            'animation-fill-mode': 'both',
+            'animation-timeline': '--scroll-timeline',
+            'pointer-events': 'none',
+            display: 'block',
+            position: 'sticky',
+            bottom: '0px',
+            top: '0px',
+            visibility: 'var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll))',
+            'z-index': '10',
+        },
+    };
+    const light = Object.assign({}, shared, {
+        '&:before': {
+            left: '0px',
+            'background-image': 'linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
+            'animation-range': '0ch 3ch',
+        },
+        '&:after': {
+            right: '0px',
+            'background-image': 'linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
+            'animation-direction': 'reverse',
+            'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+        },
+    });
+    const dark = Object.assign({}, shared, {
+        '&:before': {
+            left: '0px',
+            'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
+            'animation-range': '0ch 3ch',
+        },
+        '&:after': {
+            right: '0px',
+            'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
+            'animation-direction': 'reverse',
+            'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+        },
+    });
+    addComponents({
+        '.btu-scrollshadow-light': light,
+        '.btu-scrollshadow-dark': dark,
+    });
+});

package/dist/tailwind-plugin-scroll-shadow.ts

@@ -0,0 +1,86 @@
+import plugin from 'tailwindcss/plugin'
+declare let module: any
+
+/**
+ * This plugin adds shadows to the edges of a scrollable container when the content
+ * of the container is overflowing.
+ * You can choose a light or dark shadow.
+ * Your container must not already use before & after pseudo elements.
+ * If you use TWCSS before/after modifiers on this element, make sure you also manually
+ * set the content property to the `--whitespace` variable. This is a workaround for TWCSS
+ * automatically adding a content property to the before/after pseudo-elements, which
+ * overrides the `--whitespace` variable by default.
+ *
+ * Class Names:
+ *  btu-scrollshadow-light - light shadow.
+ *  btu-scrollshadow-dark - dark shadow.
+ *
+ * Typical Usage:
+ *  @apply btu-scrollshadow-light;
+ *
+ * Custom usage for when you need to style before/after pseudo-elements:
+ *  @apply btu-scrollshadow-light before:absolute before:content-[--whitespace] <-- must do this (see more info above);
+ */
+
+module.exports = plugin(function ({ addComponents }) {
+  const shared = {
+    /* these 3 whitespaces dictate the width of the shadow (necessary to give the pseudo elements an intrinsic size). */
+    '--whitespace': '"\u2002\u2002\u2002"',
+    animation: 'detect-scroll',
+    'overflow-x': 'auto',
+    'animation-fill-mode': 'none',
+    'animation-timeline': '--scroll-timeline',
+    'scroll-timeline': '--scroll-timeline x',
+    '&:before, &:after': {
+      '--visibility-if-can-scroll': 'var(--can-scroll) visible',
+      '--visibility-if-cant-scroll': 'hidden',
+      content: 'var(--whitespace)',
+      'animation-name': 'fade-in',
+      'animation-fill-mode': 'both',
+      'animation-timeline': '--scroll-timeline',
+      'pointer-events': 'none',
+      display: 'block',
+      position: 'sticky',
+      bottom: '0px',
+      top: '0px',
+      visibility:
+        'var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll))',
+      'z-index': '10',
+    },
+  }
+
+  const light = Object.assign({}, shared, {
+    '&:before': {
+      left: '0px',
+      'background-image':
+        'linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
+      'animation-range': '0ch 3ch',
+    },
+    '&:after': {
+      right: '0px',
+      'background-image':
+        'linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
+      'animation-direction': 'reverse',
+      'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+    },
+  })
+
+  const dark = Object.assign({}, shared, {
+    '&:before': {
+      left: '0px',
+      'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
+      'animation-range': '0ch 3ch',
+    },
+    '&:after': {
+      right: '0px',
+      'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
+      'animation-direction': 'reverse',
+      'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+    },
+  })
+
+  addComponents({
+    '.btu-scrollshadow-light': light,
+    '.btu-scrollshadow-dark': dark,
+  })
+})

package/dist/tailwind-plugin-theme.js

@@ -0,0 +1,48 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Generates all the CSS color properties from the Tailwind configuration.
+ */
+module.exports = plugin(function ({ addUtilities, theme }) {
+    const colors = theme('colors');
+    const lightStyles = new Map();
+    const darkStyles = new Map();
+    const lightStylesHC = new Map();
+    const darkStylesHC = new Map();
+    const HCChromaFactor = 0.01;
+    const HCLightnessFactors = [
+        0.01, 0.01, 0.03, 0.07, 0.07, 0.07, 0.08, 0.08, 0.08, 0.09, 0.09,
+    ];
+    lightStyles.set('--btu-theme-primary-hue', '264'); /* 264 = Closest average primary hue to design system */
+    lightStyles.set('--btu-theme-error-hue', '27'); /* 27 = Closest average red hue to design system */
+    lightStyles.set('--btu-theme-success-hue', '157'); /* 157 = Closest average green hue to design system */
+    lightStyles.set('--btu-theme-white', theme('colors.white.light'));
+    lightStyles.set('--btu-theme-black', theme('colors.black.light'));
+    darkStyles.set('--btu-theme-white', theme('colors.white.dark'));
+    darkStyles.set('--btu-theme-black', theme('colors.black.dark'));
+    for (const color in colors) {
+        if (colors[color].light && colors[color].dark) {
+            const lightValues = colors[color].light;
+            const darkValues = colors[color].dark;
+            if (typeof lightValues === 'object') {
+                for (const key in lightValues) {
+                    lightStyles.set(`--btu-theme-${color}-${key}`, `${lightValues[key]}`);
+                    // Light high contrast palette.
+                    lightStylesHC.set(`--btu-theme-${color}-${key}`, `from oklch(${lightValues[key]}) calc(l - ${HCLightnessFactors[Object.keys(lightValues).indexOf(key)]}) calc(c + ${HCChromaFactor}) h`);
+                }
+            }
+            if (typeof darkValues === 'object') {
+                for (const key in darkValues) {
+                    darkStyles.set(`--btu-theme-${color}-${key}`, `${darkValues[key]}`);
+                    // Dark high contrast palette.
+                    darkStylesHC.set(`--btu-theme-${color}-${key}`, `from oklch(${darkValues[key]}) calc(l - ${HCLightnessFactors[Object.keys(darkValues).indexOf(key)]}) calc(c + ${HCChromaFactor}) h`);
+                }
+            }
+        }
+    }
+    addUtilities({
+        '.lightTheme': Object.fromEntries(lightStyles.entries()),
+        '.lightTheme-highcontrast': Object.fromEntries(lightStylesHC.entries()),
+        '.darkTheme': Object.fromEntries(darkStyles.entries()),
+        '.darkTheme-highcontrast': Object.fromEntries(darkStylesHC.entries()),
+    });
+});

package/dist/tailwind-plugin-theme.ts

@@ -0,0 +1,73 @@
+import plugin from 'tailwindcss/plugin'
+declare let module: any
+
+/**
+ * Generates all the CSS color properties from the Tailwind configuration.
+ */
+module.exports = plugin(function ({ addUtilities, theme }) {
+  const colors = theme('colors')
+  const lightStyles = new Map()
+  const darkStyles = new Map()
+  const lightStylesHC = new Map()
+  const darkStylesHC = new Map()
+  const HCChromaFactor = 0.01
+  const HCLightnessFactors = [
+    0.01, 0.01, 0.03, 0.07, 0.07, 0.07, 0.08, 0.08, 0.08, 0.09, 0.09,
+  ]
+
+  lightStyles.set(
+    '--btu-theme-primary-hue',
+    '264',
+  ) /* 264 = Closest average primary hue to design system */
+  lightStyles.set(
+    '--btu-theme-error-hue',
+    '27',
+  ) /* 27 = Closest average red hue to design system */
+  lightStyles.set(
+    '--btu-theme-success-hue',
+    '157',
+  ) /* 157 = Closest average green hue to design system */
+  lightStyles.set('--btu-theme-white', theme('colors.white.light'))
+  lightStyles.set('--btu-theme-black', theme('colors.black.light'))
+
+  darkStyles.set('--btu-theme-white', theme('colors.white.dark'))
+  darkStyles.set('--btu-theme-black', theme('colors.black.dark'))
+
+  for (const color in colors) {
+    if (colors[color].light && colors[color].dark) {
+      const lightValues = colors[color].light
+      const darkValues = colors[color].dark
+
+      if (typeof lightValues === 'object') {
+        for (const key in lightValues) {
+          lightStyles.set(`--btu-theme-${color}-${key}`, `${lightValues[key]}`)
+
+          // Light high contrast palette.
+          lightStylesHC.set(
+            `--btu-theme-${color}-${key}`,
+            `from oklch(${lightValues[key]}) calc(l - ${HCLightnessFactors[Object.keys(lightValues).indexOf(key)]}) calc(c + ${HCChromaFactor}) h`,
+          )
+        }
+      }
+
+      if (typeof darkValues === 'object') {
+        for (const key in darkValues) {
+          darkStyles.set(`--btu-theme-${color}-${key}`, `${darkValues[key]}`)
+
+          // Dark high contrast palette.
+          darkStylesHC.set(
+            `--btu-theme-${color}-${key}`,
+            `from oklch(${darkValues[key]}) calc(l - ${HCLightnessFactors[Object.keys(darkValues).indexOf(key)]}) calc(c + ${HCChromaFactor}) h`,
+          )
+        }
+      }
+    }
+  }
+
+  addUtilities({
+    '.lightTheme': Object.fromEntries(lightStyles.entries()),
+    '.lightTheme-highcontrast': Object.fromEntries(lightStylesHC.entries()),
+    '.darkTheme': Object.fromEntries(darkStyles.entries()),
+    '.darkTheme-highcontrast': Object.fromEntries(darkStylesHC.entries()),
+  })
+})