@arun-dev/tokens 0.36.0 → 0.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/createBrand.cjs +328 -248
  2. package/dist/createBrand.d.cts +43 -43
  3. package/dist/createBrand.d.ts +43 -43
  4. package/dist/createBrand.js +323 -219
  5. package/package.json +10 -8
  6. package/src/components/menubar.css +20 -0
  7. package/src/components.css +1 -0
package/dist/createBrand.d.cts CHANGED
@@ -1,3 +1,4 @@
1
+ //#region src/createBrand.d.ts
1
2
  /**
2
3
  * createBrand — build-time CSS generator for @arun-dev/tokens.
3
4
  *
@@ -16,71 +17,70 @@
16
17
  */
17
18
  type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
18
19
  type NeutralShade = 0 | Shade;
19
- type BrandPalette = Record<Shade, string>;
20
- type NeutralPalette = Record<NeutralShade, string>;
20
+ export type BrandPalette = Record<Shade, string>;
21
+ export type NeutralPalette = Record<NeutralShade, string>;
21
22
  type WithPalette = {
22
- palette: BrandPalette;
23
+ palette: BrandPalette;
23
24
  };
24
25
  type WithSeed = {
25
- seed: string;
26
+ seed: string;
26
27
  };
27
- type CreateBrandInput = {
28
- /** Brand identifier — used as a comment label in generated CSS */
29
- name: string;
30
- /** Optional neutral/gray palette. Defaults to cool-gray (slate). */
31
- neutral?: NeutralPalette;
28
+ export type CreateBrandInput = {
29
+ /** Brand identifier — used as a comment label in generated CSS */
30
+ name: string;
31
+ /** Optional neutral/gray palette. Defaults to cool-gray (slate). */
32
+ neutral?: NeutralPalette;
32
33
  } & (WithPalette | WithSeed);
33
- declare const DEFAULT_NEUTRAL: NeutralPalette;
34
+ export declare const DEFAULT_NEUTRAL: NeutralPalette;
34
35
  /** WCAG 2 contrast ratio between two #rrggbb colours, from 1 to 21. */
35
- declare function contrastRatio(a: string, b: string): number;
36
+ export declare function contrastRatio(a: string, b: string): number;
36
37
  /**
37
38
  * Generate an 11-step palette from a seed hex color.
38
39
  * Uses HSL color space — perceptually approximate but dependency-free.
39
40
  */
40
- declare function generatePaletteFromSeed(seed: string): BrandPalette;
41
+ export declare function generatePaletteFromSeed(seed: string): BrandPalette;
41
42
  /**
42
43
  * BrandSemanticContract — the full set of CSS variables @arun-dev/ui expects.
43
44
  * Consumers who skip createBrand must define all of these in their own CSS.
44
45
  */
45
- type BrandSemanticContract = {
46
- '--color-bg-primary': string;
47
- '--color-bg-secondary': string;
48
- '--color-bg-surface': string;
49
- '--color-bg-accent': string;
50
- '--color-bg-inverse': string;
51
- '--color-text-primary': string;
52
- '--color-text-secondary': string;
53
- '--color-text-muted': string;
54
- '--color-text-accent': string;
55
- '--color-text-inverse': string;
56
- '--color-text-on-accent': string;
57
- '--color-border-default': string;
58
- '--color-border-subtle': string;
59
- '--color-border-strong': string;
60
- '--color-border-accent': string;
61
- '--color-status-success': string;
62
- '--color-status-success-bg': string;
63
- '--color-status-error': string;
64
- '--color-status-error-bg': string;
65
- '--color-status-warning': string;
66
- '--color-status-warning-bg': string;
67
- '--color-status-info': string;
68
- '--color-status-info-bg': string;
46
+ export type BrandSemanticContract = {
47
+ '--color-bg-primary': string;
48
+ '--color-bg-secondary': string;
49
+ '--color-bg-surface': string;
50
+ '--color-bg-accent': string;
51
+ '--color-bg-inverse': string;
52
+ '--color-text-primary': string;
53
+ '--color-text-secondary': string;
54
+ '--color-text-muted': string;
55
+ '--color-text-accent': string;
56
+ '--color-text-inverse': string;
57
+ '--color-text-on-accent': string;
58
+ '--color-border-default': string;
59
+ '--color-border-subtle': string;
60
+ '--color-border-strong': string;
61
+ '--color-border-accent': string;
62
+ '--color-status-success': string;
63
+ '--color-status-success-bg': string;
64
+ '--color-status-error': string;
65
+ '--color-status-error-bg': string;
66
+ '--color-status-warning': string;
67
+ '--color-status-warning-bg': string;
68
+ '--color-status-info': string;
69
+ '--color-status-info-bg': string;
69
70
  };
70
71
  /**
71
72
  * Every pairing of semantic tokens that @arun-dev/ui draws one on the other, with the WCAG
72
73
  * contrast it needs: 7 where the default brand is audited AAA, 4.5 for other text, 3 for
73
74
  * icons, accent bars and focus outlines. A brand that skips createBrand should meet these too.
74
75
  */
75
- declare const CONTRAST_REQUIREMENTS: readonly {
76
- foreground: keyof BrandSemanticContract;
77
- background: keyof BrandSemanticContract;
78
- min: number;
76
+ export declare const CONTRAST_REQUIREMENTS: readonly {
77
+ foreground: keyof BrandSemanticContract;
78
+ background: keyof BrandSemanticContract;
79
+ min: number;
79
80
  }[];
80
81
  /**
81
82
  * Generate a complete brand CSS string from a palette or seed color.
82
83
  * Write the output to a .css file and import it in your globals.css.
83
84
  */
84
- declare function createBrand(input: CreateBrandInput): string;
85
-
86
- export { type BrandPalette, type BrandSemanticContract, CONTRAST_REQUIREMENTS, type CreateBrandInput, DEFAULT_NEUTRAL, type NeutralPalette, contrastRatio, createBrand, generatePaletteFromSeed };
85
+ export declare function createBrand(input: CreateBrandInput): string;
86
+ //#endregion
package/dist/createBrand.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ //#region src/createBrand.d.ts
1
2
  /**
2
3
  * createBrand — build-time CSS generator for @arun-dev/tokens.
3
4
  *
@@ -16,71 +17,70 @@
16
17
  */
17
18
  type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
18
19
  type NeutralShade = 0 | Shade;
19
- type BrandPalette = Record<Shade, string>;
20
- type NeutralPalette = Record<NeutralShade, string>;
20
+ export type BrandPalette = Record<Shade, string>;
21
+ export type NeutralPalette = Record<NeutralShade, string>;
21
22
  type WithPalette = {
22
- palette: BrandPalette;
23
+ palette: BrandPalette;
23
24
  };
24
25
  type WithSeed = {
25
- seed: string;
26
+ seed: string;
26
27
  };
27
- type CreateBrandInput = {
28
- /** Brand identifier — used as a comment label in generated CSS */
29
- name: string;
30
- /** Optional neutral/gray palette. Defaults to cool-gray (slate). */
31
- neutral?: NeutralPalette;
28
+ export type CreateBrandInput = {
29
+ /** Brand identifier — used as a comment label in generated CSS */
30
+ name: string;
31
+ /** Optional neutral/gray palette. Defaults to cool-gray (slate). */
32
+ neutral?: NeutralPalette;
32
33
  } & (WithPalette | WithSeed);
33
- declare const DEFAULT_NEUTRAL: NeutralPalette;
34
+ export declare const DEFAULT_NEUTRAL: NeutralPalette;
34
35
  /** WCAG 2 contrast ratio between two #rrggbb colours, from 1 to 21. */
35
- declare function contrastRatio(a: string, b: string): number;
36
+ export declare function contrastRatio(a: string, b: string): number;
36
37
  /**
37
38
  * Generate an 11-step palette from a seed hex color.
38
39
  * Uses HSL color space — perceptually approximate but dependency-free.
39
40
  */
40
- declare function generatePaletteFromSeed(seed: string): BrandPalette;
41
+ export declare function generatePaletteFromSeed(seed: string): BrandPalette;
41
42
  /**
42
43
  * BrandSemanticContract — the full set of CSS variables @arun-dev/ui expects.
43
44
  * Consumers who skip createBrand must define all of these in their own CSS.
44
45
  */
45
- type BrandSemanticContract = {
46
- '--color-bg-primary': string;
47
- '--color-bg-secondary': string;
48
- '--color-bg-surface': string;
49
- '--color-bg-accent': string;
50
- '--color-bg-inverse': string;
51
- '--color-text-primary': string;
52
- '--color-text-secondary': string;
53
- '--color-text-muted': string;
54
- '--color-text-accent': string;
55
- '--color-text-inverse': string;
56
- '--color-text-on-accent': string;
57
- '--color-border-default': string;
58
- '--color-border-subtle': string;
59
- '--color-border-strong': string;
60
- '--color-border-accent': string;
61
- '--color-status-success': string;
62
- '--color-status-success-bg': string;
63
- '--color-status-error': string;
64
- '--color-status-error-bg': string;
65
- '--color-status-warning': string;
66
- '--color-status-warning-bg': string;
67
- '--color-status-info': string;
68
- '--color-status-info-bg': string;
46
+ export type BrandSemanticContract = {
47
+ '--color-bg-primary': string;
48
+ '--color-bg-secondary': string;
49
+ '--color-bg-surface': string;
50
+ '--color-bg-accent': string;
51
+ '--color-bg-inverse': string;
52
+ '--color-text-primary': string;
53
+ '--color-text-secondary': string;
54
+ '--color-text-muted': string;
55
+ '--color-text-accent': string;
56
+ '--color-text-inverse': string;
57
+ '--color-text-on-accent': string;
58
+ '--color-border-default': string;
59
+ '--color-border-subtle': string;
60
+ '--color-border-strong': string;
61
+ '--color-border-accent': string;
62
+ '--color-status-success': string;
63
+ '--color-status-success-bg': string;
64
+ '--color-status-error': string;
65
+ '--color-status-error-bg': string;
66
+ '--color-status-warning': string;
67
+ '--color-status-warning-bg': string;
68
+ '--color-status-info': string;
69
+ '--color-status-info-bg': string;
69
70
  };
70
71
  /**
71
72
  * Every pairing of semantic tokens that @arun-dev/ui draws one on the other, with the WCAG
72
73
  * contrast it needs: 7 where the default brand is audited AAA, 4.5 for other text, 3 for
73
74
  * icons, accent bars and focus outlines. A brand that skips createBrand should meet these too.
74
75
  */
75
- declare const CONTRAST_REQUIREMENTS: readonly {
76
- foreground: keyof BrandSemanticContract;
77
- background: keyof BrandSemanticContract;
78
- min: number;
76
+ export declare const CONTRAST_REQUIREMENTS: readonly {
77
+ foreground: keyof BrandSemanticContract;
78
+ background: keyof BrandSemanticContract;
79
+ min: number;
79
80
  }[];
80
81
  /**
81
82
  * Generate a complete brand CSS string from a palette or seed color.
82
83
  * Write the output to a .css file and import it in your globals.css.
83
84
  */
84
- declare function createBrand(input: CreateBrandInput): string;
85
-
86
- export { type BrandPalette, type BrandSemanticContract, CONTRAST_REQUIREMENTS, type CreateBrandInput, DEFAULT_NEUTRAL, type NeutralPalette, contrastRatio, createBrand, generatePaletteFromSeed };
85
+ export declare function createBrand(input: CreateBrandInput): string;
86
+ //#endregion