@luzmo/lucero 0.0.1

package/.storybook/dark-theme.ts

@@ -0,0 +1,18 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'dark',
+  brandTitle: 'Luzmo Analytics Components Kit',
+  brandUrl: 'https://luzmo.com',
+  brandImage: './../src/assets/logo-dark.svg',
+  brandTarget: '_blank',
+  colorPrimary: '#7b90ff',
+  colorSecondary: '#7b90ff',
+  appBorderRadius: 8,
+  inputBorderRadius: 8,
+  // UI
+  appBg: '#262626',
+  appContentBg: '#262626',
+  appPreviewBg: '#262626',
+  appBorderColor: 'rgba(255, 255, 255, .2)'
+});

package/.storybook/light-theme.ts

@@ -0,0 +1,34 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Luzmo Analytics Components Kit',
+  brandUrl: 'https://luzmo.com',
+  brandImage: './../src/assets/logo-light.svg',
+  brandTarget: '_blank',
+  colorPrimary: '#4434FF',
+  colorSecondary: '#4434FF',
+
+  // UI
+  appBg: '#ffffff',
+  appContentBg: '#ffffff',
+  appPreviewBg: '#ffffff',
+  appBorderColor: 'rgba(0,0,0, .1)',
+  appBorderRadius: 8,
+
+  // Text colors
+  textColor: '#5a5a5a',
+  textInverseColor: '#ffffff',
+
+  // Toolbar default and active colors
+  barTextColor: '#5a5a5a',
+  barSelectedColor: '#333',
+  barHoverColor: '#333',
+  barBg: '#ffffff',
+
+  // Form colors
+  inputBg: '#ffffff',
+  inputBorder: 'rgba(0,0,0, .1)',
+  inputTextColor: '#10162F',
+  inputBorderRadius: 8
+});

package/.storybook/main.ts

@@ -0,0 +1,34 @@
+import type { StorybookConfig } from '@storybook/web-components-vite';
+import { mergeConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-themes',
+    '@storybook/addon-essentials'
+  ],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: './vite.config.storybook.js'
+      }
+    }
+  },
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {}
+  },
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      plugins: [tsconfigPaths()],
+      build: {
+        // overwrite && changed to a different path than dist so that the dist folder is watched when rebuilding the components to the dist folder
+        outDir: 'randomDirName'
+      }
+    });
+  }
+};
+export default config;

package/.storybook/manager.ts

@@ -0,0 +1,11 @@
+import { addons } from '@storybook/manager-api';
+import darkTheme from './dark-theme';
+import lightTheme from './light-theme';
+
+addons.setConfig({
+  themes: {
+    light: lightTheme,
+    dark: darkTheme
+  },
+  theme: lightTheme
+});

package/.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<link rel="stylesheet" href="src/styles/global-variables.css" />
+<link rel="stylesheet" href="src/styles/global-variables-dark-theme.css" />
+<style>
+  body {
+    background-color: var(--luzmo-background-color);
+  }
+</style>

package/.storybook/preview.ts

@@ -0,0 +1,42 @@
+import { withThemeByClassName } from '@storybook/addon-themes';
+import type { Preview } from '@storybook/web-components';
+import { setCustomElementsManifest } from '@storybook/web-components';
+import customElements from '../dist/custom-elements.json';
+import darkTheme from './dark-theme';
+import lightTheme from './light-theme';
+
+setCustomElementsManifest(customElements);
+
+const themes = {
+  light: lightTheme,
+  dark: darkTheme
+};
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      disable: true,
+      values: [
+        { name: 'light', value: lightTheme.appBg },
+        { name: 'dark', value: darkTheme.appBg }
+      ]
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: 'light',
+        dark: 'dark'
+      },
+      defaultTheme: 'light'
+    })
+  ]
+};
+
+export default preview;

package/LICENSE

@@ -0,0 +1,16 @@
+Lucero - The design system for Luzmo.
+
+Copyright © 2025 Luzmo
+All rights reserved.
+Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+This license allows users with a current active Luzmo account to use Lucero.
+This license terminates automatically if a user no longer has an active Luzmo account.
+Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,18 @@
+Luzmo Design system - Lucero
+
+## Installation
+
+```bash
+npm install @luzmo/lucero
+```
+
+```ts
+import '@luzmo/lucero/button';
+```
+
+```html
+<luzmo-button>Click me</luzmo-button>
+```
+
+This repository is in alpha state. Do not use the web components in production.
+Expect breaking changes.