@versatiles/style 4.1.1 → 4.2.0

package/README.MD

@@ -1,31 +1,33 @@
+[![NPM Version](https://img.shields.io/npm/v/%40versatiles%2Fstyle)](https://www.npmjs.com/package/@versatiles/style)
 [![Code Coverage](https://codecov.io/gh/versatiles-org/versatiles-style/branch/main/graph/badge.svg?token=IDHAI13M0K)](https://codecov.io/gh/versatiles-org/versatiles-style)
-[![GitHub Workflow Status)](https://img.shields.io/github/actions/workflow/status/versatiles-org/versatiles-style/ci.yml)](https://github.com/versatiles-org/versatiles-style/actions/workflows/ci.yml)
+[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/versatiles-org/versatiles-style/ci.yml)](https://github.com/versatiles-org/versatiles-style/actions/workflows/ci.yml)
 
 # VersaTiles Style
 
-Programatically generates StyleJSON for MapLibre.
+Generates styles and sprites for MapLibre.
 
 ![Example: Colorful Style](docs/colorful.png)
 
 # Styles
 
 * Colorful - colorful, full featured map
+* Graybeard - gray, full featured map
 * Neutrino - light basemap
-* Graybeard - gray basemap
 
-# Download styles for versatiles.org
+# Use styles for versatiles.org
 
-You can download the latest StyleJSONs from the [latest release](https://github.com/versatiles-org/versatiles-style/releases/latest/).
-We provide each style with and without labels, and also in multiple languages.
-
-Be aware that styles already include `tiles.versatiles.org` as source for tiles, fonts (glyphs) and icons (sprites). So you might want to update the URLs in the JSON.
+You in the the [latest release](https://github.com/versatiles-org/versatiles-style/releases/latest/) you can find:
+- [`styles.tar.gz`](https://github.com/versatiles-org/versatiles-style/releases/latest/download/styles.tar.gz) containing all styles, each in multiple languages.  
+Be aware that these styles use `tiles.versatiles.org` as source for tiles, fonts (glyphs) and icons (sprites). 
+- [`sprites.tar.gz`](https://github.com/versatiles-org/versatiles-style/releases/latest/download/sprites.tar.gz) containing sprites, used e.g. for map icons
+- [`versatiles-style.tar.gz`](https://github.com/versatiles-org/versatiles-style/releases/latest/download/versatiles-style.tar.gz) containing a JavaScript file to generate your own style in the browser.
 
 # Create styles in the frontend (web browser)
 
 Download latest release:
 
 ```bash
-wget "https://github.com/versatiles-org/versatiles-style/releases/latest/download/versatiles-style.js"
+wget "https://github.com/versatiles-org/versatiles-style/releases/latest/download/versatiles-style.tar.gz"
 ```
 
 Use it in:
@@ -35,38 +37,39 @@ Use it in:
 <script src="maplibre-gl.js"></script>
 <script src="versatiles-style.js"></script>
 <script>
-  const style = VersaTilesStyle.styles.graybeard({
-    tiles: ['https://???.org/tiles/osm/{z}/{x}/{y}'],
-    sprite: 'https://???.org/assets/styles/swr-bright/sprite',
-    glyphs: 'https://???.org/assets/fonts/{fontstack}/{range}.pbf',
-    languageSuffix: '_de',
-    colors: { label: '#222' },
-    recolor: { gamma: 0.5 }
-  });
-
-	const map = new maplibregl.Map({
-		container: 'map',
-		style
-	});
+   const style = VersaTilesStyle.styles.graybeard({
+      tiles: ['/tiles/osm/{z}/{x}/{y}'],
+      sprite: '/assets/styles/swr-bright/sprite',
+      glyphs: '/assets/fonts/{fontstack}/{range}.pbf',
+      baseUrl: 'https://example.org/',
+      languageSuffix: '_de',
+      colors: { label: '#222' },
+      recolor: { gamma: 0.5 }
+   });
+ 
+	 const map = new maplibregl.Map({
+	 	 container: 'map',
+	 	 style
+	 });
 <script>
 ```
 
 # Create styles in the backend (Node.js)
 
-Install `versatiles-style` via NPM:
+Install `@versatiles/style` via NPM:
 
 ```bash
-npm install versatiles-style
+npm install @versatiles/style
 ```
 
 Use it in Node.js:
 
 ```javascript
-import { styles } from 'versatiles-style';
+import { styles } from '@versatiles/style';
 let style = styles.colorful({
   languageSuffix: '_en',
 });
-writeFileSync('style.json', JSON.stringify(style.build()));
+writeFileSync('style.json', JSON.stringify(style));
 ```
 
 # API
@@ -169,3 +172,24 @@ interface {
 * <code>options: StylemakerOptions<default></code> (optional)
 
 **Returns:** <code>MaplibreStyle</code>
+
+# Build
+
+Please note that for building new sprites you need `optipng`.
+
+## SVG Sources
+
+* SVG sources should consist only of paths and not contain any `transform()`s.
+* Colors and styles are ignored.
+* All lengths must be in pixels without unit.
+
+## Configuration
+
+Iconsets can be defined in [`scripts/config-sprites.ts`](./scripts/config-sprites.ts);
+* `colors` are applied to each path in the order they appear in the source SVG.
+* `size` applies to the height
+
+# Licenses
+
+* Sourcecode: [Unlicense](./UNLICENSE.md)
+* Iconsets and rendered Spritemaps: [CC0 1.0 Universal](./icons/LICENSE.md)

package/dist/browser.d.ts

@@ -0,0 +1,4 @@
+export type * from './styles';
+export * from './styles';
+export type { GuessStyleOptions } from './guess_style';
+export { guessStyle } from './guess_style';

package/dist/browser.js

@@ -0,0 +1,2 @@
+export * from './styles';
+export { guessStyle } from './guess_style';

package/dist/guess_style/guess_style.d.ts

@@ -0,0 +1,5 @@
+import type { MaplibreStyle } from '../types';
+import type { Container } from '@versatiles/container';
+import type { GuessContainerOptions, GuessStyleOptions } from './types';
+export declare function guessStyle(opt: GuessStyleOptions): MaplibreStyle;
+export declare function guessStyleFromContainer(container: Container, options: GuessContainerOptions): Promise<MaplibreStyle>;

package/dist/{lib → guess_style}/guess_style.js

@@ -1,13 +1,12 @@
-/* eslint-disable @typescript-eslint/prefer-includes */
 /* eslint-disable @typescript-eslint/naming-convention */
-import { isTileJSONSpecification } from './types.js';
-import randomColorGenerator from './random_color.js';
-import Colorful from '../style/colorful.js';
-import { resolveUrl } from './utils.js';
-export default function guess(opt) {
+import { isTileJSONSpecification, isVectorLayers } from '../types';
+import { resolveUrl } from '../lib/utils';
+import randomColorGenerator from './random_color';
+import { colorful } from '../styles';
+export function guessStyle(opt) {
     const { format } = opt;
     const tilejsonBasic = {
-        tilejson: opt.tilejson ?? '3.0.0',
+        tilejson: '3.0.0',
         attribution: opt.attribution,
         tiles: opt.tiles,
         scheme: opt.scheme,
@@ -42,11 +41,12 @@ export default function guess(opt) {
             break;
         case 'pbf':
             const { vectorLayers } = opt;
-            if (vectorLayers == null) {
-                throw Error('property vector_layers is required for vector tiles');
-            }
+            if (!isVectorLayers(vectorLayers))
+                throw Error('property vector_layers is invalid');
             tilejson = { ...tilejsonBasic, type: 'vector', format, vector_layers: vectorLayers };
             break;
+        default:
+            throw Error(`format "${String(format)}" is not supported`);
     }
     if (!isTileJSONSpecification(tilejson))
         throw Error();
@@ -74,6 +74,36 @@ export default function guess(opt) {
         style.center = opt.center;
     return style;
 }
+export async function guessStyleFromContainer(container, options) {
+    const header = await container.getHeader();
+    const metadata = await container.getMetadata();
+    const format = header.tileFormat;
+    switch (format) {
+        case 'avif':
+        case 'jpg':
+        case 'pbf':
+        case 'png':
+        case 'webp':
+            break;
+        default:
+            throw Error(`format "${String(format)}" is not supported`);
+    }
+    let vectorLayers;
+    if (typeof metadata === 'string') {
+        const t = JSON.parse(metadata);
+        if (('vector_layers' in t) && Array.isArray(t.vector_layers))
+            vectorLayers = t.vector_layers;
+    }
+    const guessStyleOptions = {
+        ...options,
+        format,
+        bounds: header.bbox,
+        minzoom: header.zoomMin,
+        maxzoom: header.zoomMax,
+        vectorLayers,
+    };
+    return guessStyle(guessStyleOptions);
+}
 function isShortbread(spec) {
     if (typeof spec !== 'object')
         return false;
@@ -86,7 +116,7 @@ function isShortbread(spec) {
     return shortbreadIds.every(id => layerIds.has(id));
 }
 function getShortbreadStyle(spec, builderOption) {
-    return new Colorful().build({
+    return colorful({
         hideLabels: true,
         tiles: spec.tiles,
         baseUrl: builderOption.baseUrl,
@@ -109,13 +139,13 @@ function getInspectorStyle(spec) {
             hue = 'orange';
         if (/contour|building/.test(vector_layer.id))
             hue = 'monochrome';
-        if (/building/.test(vector_layer.id))
+        if (vector_layer.id.includes('building'))
             luminosity = 'dark';
         if (/contour|landuse/.test(vector_layer.id))
             hue = 'yellow';
         if (/wood|forest|park|landcover|land/.test(vector_layer.id))
             hue = 'green';
-        if (/point/.test(vector_layer.id)) {
+        if (vector_layer.id.includes('point')) {
             saturation = 'strong';
             luminosity = 'light';
         }

package/dist/guess_style/index.d.ts

@@ -0,0 +1,2 @@
+export type { GuessStyleOptions, GuessContainerOptions } from './types';
+export { guessStyle, guessStyleFromContainer } from './guess_style';

package/dist/guess_style/index.js

@@ -0,0 +1 @@
+export { guessStyle, guessStyleFromContainer } from './guess_style';

package/dist/guess_style/types.d.ts

@@ -0,0 +1,23 @@
+export interface GuessContainerOptions {
+    tiles: string[];
+    attribution?: string;
+    baseUrl?: string;
+    bounds?: [number, number, number, number];
+    center?: [number, number];
+    description?: string;
+    fillzoom?: number;
+    glyphs?: string;
+    grids?: string[];
+    legend?: string;
+    maxzoom?: number;
+    minzoom?: number;
+    name?: string;
+    scheme?: 'tms' | 'xyz';
+    sprite?: string;
+    template?: string;
+}
+/** Options for creating TileJSON, extending the basic specification with format and optional vector layers. */
+export interface GuessStyleOptions extends GuessContainerOptions {
+    format: 'avif' | 'jpg' | 'pbf' | 'png' | 'webp';
+    vectorLayers?: unknown[];
+}

package/dist/guess_style/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,11 +1,5 @@
-import type { MaplibreStyle, StylemakerOptions } from './lib/types.js';
-export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './lib/types.js';
-import Colorful from './style/colorful.js';
-import Graybeard from './style/graybeard.js';
-import Neutrino from './style/neutrino.js';
-export declare const styles: {
-    colorful: (options?: StylemakerOptions<Colorful>) => MaplibreStyle;
-    graybeard: (options?: StylemakerOptions<Graybeard>) => MaplibreStyle;
-    neutrino: (options?: StylemakerOptions<Neutrino>) => MaplibreStyle;
-};
-export { default as guessStyle } from './lib/guess_style.js';
+export type * from './styles';
+export * as styles from './styles';
+export { guessStyle, guessStyleFromContainer } from './guess_style';
+export type { GuessStyleOptions, GuessContainerOptions } from './guess_style';
+export type { VectorLayer } from './types';

package/dist/index.js

@@ -1,15 +1,2 @@
-import Colorful from './style/colorful.js';
-import Graybeard from './style/graybeard.js';
-import Neutrino from './style/neutrino.js';
-export const styles = {
-    colorful: function colorful(options) {
-        return new Colorful().build(options);
-    },
-    graybeard: function graybeard(options) {
-        return new Graybeard().build(options);
-    },
-    neutrino: function neutrino(options) {
-        return new Neutrino().build(options);
-    },
-};
-export { default as guessStyle } from './lib/guess_style.js';
+export * as styles from './styles';
+export { guessStyle, guessStyleFromContainer } from './guess_style';

package/dist/shortbread/index.d.ts

@@ -0,0 +1,2 @@
+export { getShortbreadTemplate } from './template';
+export { getShortbreadLayers } from './layers';

package/dist/shortbread/index.js

@@ -0,0 +1,2 @@
+export { getShortbreadTemplate } from './template';
+export { getShortbreadLayers } from './layers';

package/dist/shortbread/layers.d.ts

@@ -0,0 +1,5 @@
+import type { LanguageSuffix } from '../style_builder';
+import type { MaplibreLayerDefinition } from '../types';
+export declare function getShortbreadLayers(option: {
+    readonly languageSuffix: LanguageSuffix;
+}): MaplibreLayerDefinition[];

package/dist/{lib/shortbread → shortbread}/layers.js

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-export default function getLayers(option) {
+export function getShortbreadLayers(option) {
     const { languageSuffix } = option;
+    const nameField = languageSuffix ? '{name_' + languageSuffix + '}' : '{name}';
     return [
         // background
         { id: 'background', type: 'background' },
@@ -335,7 +336,7 @@ export default function getLayers(option) {
             type: 'symbol',
             'source-layer': 'street_labels',
             filter: ['==', 'kind', t],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         })),
         // label-place of small places
         ...[/*'locality', 'island', 'farm', 'dwelling',*/ 'neighbourhood', 'quarter', 'suburb', 'hamlet', 'village', 'town'].map((id) => ({
@@ -343,7 +344,7 @@ export default function getLayers(option) {
             type: 'symbol',
             'source-layer': 'place_labels',
             filter: ['==', 'kind', id],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         })),
         // label-boundary
         {
@@ -351,7 +352,7 @@ export default function getLayers(option) {
             type: 'symbol',
             'source-layer': 'boundary_labels',
             filter: ['in', 'admin_level', 4, '4'],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         },
         // label-place-* of large places
         ...['city', 'state_capital', 'capital'].map((id) => ({
@@ -359,7 +360,7 @@ export default function getLayers(option) {
             type: 'symbol',
             'source-layer': 'place_labels',
             filter: ['==', 'kind', id],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         })),
         {
             id: 'label-boundary-country-small',
@@ -369,7 +370,7 @@ export default function getLayers(option) {
                 ['in', 'admin_level', 2, '2'],
                 ['<=', 'way_area', 10000000],
             ],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         },
         {
             id: 'label-boundary-country-medium',
@@ -380,7 +381,7 @@ export default function getLayers(option) {
                 ['<', 'way_area', 90000000],
                 ['>', 'way_area', 10000000],
             ],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         },
         {
             id: 'label-boundary-country-large',
@@ -390,7 +391,7 @@ export default function getLayers(option) {
                 ['in', 'admin_level', 2, '2'],
                 ['>=', 'way_area', 90000000],
             ],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         },
         // marking
         {
@@ -446,14 +447,14 @@ export default function getLayers(option) {
             type: 'symbol',
             'source-layer': 'public_transport',
             filter: ['==', 'kind', 'bus_stop'],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         },
         {
             id: 'symbol-transit-tram',
             type: 'symbol',
             'source-layer': 'public_transport',
             filter: ['==', 'kind', 'tram_stop'],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         },
         {
             id: 'symbol-transit-subway',
@@ -463,7 +464,7 @@ export default function getLayers(option) {
                 ['in', 'kind', 'station', 'halt'],
                 ['==', 'station', 'subway'],
             ],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         },
         {
             id: 'symbol-transit-lightrail',
@@ -473,7 +474,7 @@ export default function getLayers(option) {
                 ['in', 'kind', 'station', 'halt'],
                 ['==', 'station', 'light_rail'],
             ],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         },
         {
             id: 'symbol-transit-station',
@@ -483,7 +484,7 @@ export default function getLayers(option) {
                 ['in', 'kind', 'station', 'halt'],
                 ['!in', 'station', 'light_rail', 'subway'],
             ],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         },
         {
             id: 'symbol-transit-airfield',
@@ -493,7 +494,7 @@ export default function getLayers(option) {
                 ['==', 'kind', 'aerodrome'],
                 ['!has', 'iata'],
             ],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         },
         {
             id: 'symbol-transit-airport',
@@ -503,7 +504,7 @@ export default function getLayers(option) {
                 ['==', 'kind', 'aerodrome'],
                 ['has', 'iata'],
             ],
-            layout: { 'text-field': `{name${languageSuffix}}` },
+            layout: { 'text-field': nameField },
         },
     ];
 }

package/dist/shortbread/template.d.ts

@@ -0,0 +1,2 @@
+import type { MaplibreStyleVector } from '../types';
+export declare function getShortbreadTemplate(): MaplibreStyleVector;

package/dist/{lib/shortbread → shortbread}/template.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 const maxzoom = 14;
-export default function getTemplate() {
+export function getShortbreadTemplate() {
     return {
         version: 8,
         name: 'versatiles',

package/dist/{lib → style_builder}/decorator.d.ts

@@ -1,2 +1,3 @@
-import type { MaplibreLayer, StyleRules } from './types.js';
+import type { MaplibreLayer } from '../types';
+import type { StyleRules } from './types';
 export declare function decorate(layers: MaplibreLayer[], rules: StyleRules): MaplibreLayer[];

package/dist/{lib → style_builder}/decorator.js

@@ -1,7 +1,7 @@
 import Color from 'color';
 import expandBraces from 'brace-expansion';
-import maplibreProperties from './shortbread/properties.js';
-import { deepMerge } from './utils.js';
+import maplibreProperties from '../shortbread/properties';
+import { deepMerge } from '../lib/utils';
 export function decorate(layers, rules) {
     const layerIds = layers.map(l => l.id);
     const layerIdSet = new Set(layerIds);

package/dist/style_builder/index.d.ts

@@ -0,0 +1 @@
+export type { LanguageSuffix } from './types';

package/dist/style_builder/index.js

@@ -0,0 +1 @@
+export {};

package/dist/style_builder/recolor.d.ts

@@ -0,0 +1,22 @@
+import type StyleBuilder from './style_builder';
+import type { StyleBuilderColors } from './types';
+export interface RecolorOptions {
+    /** If true, inverts the colors. */
+    invert?: boolean;
+    /** The degree to rotate the hue of the color (in degrees). */
+    rotate?: number;
+    /** Adjusts the saturation level of the color. Positive values increase saturation, negative values decrease it. */
+    saturate?: number;
+    /** Adjusts the gamma of the color. Affects the brightness in a non-linear manner. */
+    gamma?: number;
+    /** Adjusts the contrast of the color. Higher values produce more contrast. */
+    contrast?: number;
+    /** Adjusts the brightness of the color. Positive values make it brighter, negative values make it darker. */
+    brightness?: number;
+    /** Specifies the intensity of the tinting effect. Ranges from 0 (no effect) to 1 (full effect). */
+    tint?: number;
+    /** Specifies the color used for tinting, in a string format (e.g., '#FF0000'). */
+    tintColor?: string;
+}
+export declare function getDefaultRecolorFlags(): RecolorOptions;
+export declare function recolor<Subclass extends StyleBuilder<Subclass>>(colors: StyleBuilderColors<Subclass>, opt?: RecolorOptions): void;

package/dist/style_builder/style_builder.d.ts

@@ -0,0 +1,14 @@
+import Color from 'color';
+import type { MaplibreStyle } from '../types/maplibre';
+import type { StyleBuilderColorStrings, StyleBuilderColors, StyleBuilderFontStrings, StyleBuilderOptions } from './types';
+import type { StyleRules, StyleRulesOptions } from './types';
+export default abstract class StyleBuilder<Subclass extends StyleBuilder<Subclass>> {
+    #private;
+    abstract readonly name: string;
+    abstract readonly defaultColors: StyleBuilderColorStrings<Subclass>;
+    abstract readonly defaultFonts: StyleBuilderFontStrings<Subclass>;
+    build(options?: StyleBuilderOptions<Subclass>): MaplibreStyle;
+    getColors(colors: StyleBuilderColorStrings<Subclass>): StyleBuilderColors<Subclass>;
+    protected transformDefaultColors(callback: (color: Color) => Color): void;
+    protected abstract getStyleRules(options: StyleRulesOptions<Subclass>): StyleRules;
+}

package/dist/{lib/build_style.js → style_builder/style_builder.js}

@@ -1,10 +1,9 @@
 import Color from 'color';
-import getShortbreadTemplate from './shortbread/template.js';
-import getShortbreadLayers from './shortbread/layers.js';
-import { decorate } from './decorator.js';
-import { getDefaultRecolorFlags, recolor } from './recolor.js';
-import { deepClone, resolveUrl } from './utils.js';
-// Stylemaker class definition
+import { getShortbreadTemplate, getShortbreadLayers } from '../shortbread';
+import { decorate } from './decorator';
+import { getDefaultRecolorFlags, recolor } from './recolor';
+import { deepClone, resolveUrl } from '../lib/utils';
+// StyleBuilder class definition
 export default class StyleBuilder {
     #sourceName = 'versatiles-shortbread';
     build(options) {
@@ -15,7 +14,7 @@ export default class StyleBuilder {
         const sprite = options.sprite ?? '/assets/sprites/sprites';
         const tiles = options.tiles ?? ['/tiles/osm/{z}/{x}/{y}'];
         const hideLabels = options.hideLabels ?? false;
-        const languageSuffix = options.languageSuffix ?? '';
+        const { languageSuffix } = options;
         const recolorOptions = options.recolor ?? getDefaultRecolorFlags();
         const colors = this.getColors(this.defaultColors);
         if (options.colors) {

package/dist/style_builder/types.d.ts

@@ -0,0 +1,49 @@
+import type Color from 'color';
+import type StyleBuilder from './style_builder';
+import type { RecolorOptions } from './recolor';
+/** Represents language suffixes used in map styles. */
+export type LanguageSuffix = 'de' | 'en' | undefined;
+export interface StyleBuilderOptions<T extends StyleBuilder<T>> {
+    /** The base URL for loading external resources like tiles, sprites, and fonts. */
+    baseUrl?: string;
+    /** The URL template for loading font glyphs, formatted with `{fontstack}` and `{range}` placeholders. */
+    glyphs?: string;
+    /** The URL for loading sprite images and metadata. */
+    sprite?: string;
+    /** An array of URL templates for loading map tiles, with `{z}`, `{x}`, and `{y}` placeholders. */
+    tiles?: string[];
+    /** If true, hides all map labels. */
+    hideLabels?: boolean;
+    /** Suffix to append to language-specific resources, such as `"-en"` for English. */
+    languageSuffix?: LanguageSuffix;
+    /** An object specifying overrides for default color values, keyed by the color names. */
+    colors?: Partial<StyleBuilderColorStrings<T>>;
+    /** An object specifying overrides for default font names, keyed by the font names. */
+    fonts?: Partial<StyleBuilderFontStrings<T>>;
+    /** Options for color adjustments and transformations applied to the entire style. */
+    recolor?: RecolorOptions;
+}
+/** Defines the keys for color properties in a style builder. */
+export type StyleBuilderColorKeys<T extends StyleBuilder<T>> = keyof T['defaultColors'];
+/** Defines the keys for font properties in a style builder. */
+export type StyleBuilderFontKeys<T extends StyleBuilder<T>> = keyof T['defaultFonts'];
+/** Records string values for color properties in a style builder. */
+export type StyleBuilderColorStrings<T extends StyleBuilder<T>> = Record<StyleBuilderColorKeys<T>, string>;
+/** Records string values for font properties in a style builder. */
+export type StyleBuilderFontStrings<T extends StyleBuilder<T>> = Record<StyleBuilderFontKeys<T>, string>;
+/** Records Color objects for color properties in a style builder. */
+export type StyleBuilderColors<T extends StyleBuilder<T>> = Record<StyleBuilderColorKeys<T>, Color>;
+/** Records string values for font properties in a style builder. */
+export type StyleBuilderFonts<T extends StyleBuilder<T>> = Record<StyleBuilderFontKeys<T>, string>;
+/** Defines options for style rules in a style builder. */
+export interface StyleRulesOptions<T extends StyleBuilder<T>> {
+    colors: StyleBuilderColors<T>;
+    fonts: StyleBuilderFontStrings<T>;
+    languageSuffix: LanguageSuffix;
+}
+/** Defines the value type for a style rule. */
+export type StyleRuleValue = boolean | number | object | string;
+/** Defines the structure of a style rule, which is a record of properties to style values. */
+export type StyleRule = Record<string, StyleRuleValue | undefined>;
+/** Defines the structure of style rules, which is a record of selectors to style rules. */
+export type StyleRules = Record<string, StyleRule | undefined>;

package/dist/style_builder/types.js

@@ -0,0 +1 @@
+export {};

package/dist/{style → styles}/colorful.d.ts

@@ -1,5 +1,5 @@
-import StyleBuilder from '../lib/build_style.js';
-import type { StyleRules, StyleRulesOptions } from '../lib/types.js';
+import StyleBuilder from '../style_builder/style_builder';
+import type { StyleRules, StyleRulesOptions } from '../style_builder/types';
 export default class Colorful extends StyleBuilder<Colorful> {
     readonly name: string;
     defaultFonts: {

package/dist/{style → styles}/colorful.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import StyleBuilder from '../lib/build_style.js';
+import StyleBuilder from '../style_builder/style_builder';
 export default class Colorful extends StyleBuilder {
     name = 'Colorful';
     defaultFonts = {

package/dist/{style → styles}/graybeard.d.ts

@@ -1,4 +1,4 @@
-import Colorful from './colorful.js';
+import Colorful from './colorful';
 export default class Graybeard extends Colorful {
     readonly name: string;
     constructor();