@fakhrirafiki/theme-engine 0.1.2 → 0.2.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 (5) hide show
  1. package/dist/index.d.mts +15 -0
  2. package/dist/index.d.ts +15 -0
  3. package/dist/index.js +16 -12
  4. package/dist/index.mjs +16 -12
  5. package/package.json +5 -3
package/dist/index.d.mts CHANGED
@@ -47,6 +47,21 @@ interface ShadcnColorSystem {
47
47
  'sidebar-accent-foreground': string;
48
48
  'sidebar-border': string;
49
49
  'sidebar-ring': string;
50
+ /** Semantic accent colors for status and feedback */
51
+ 'accent-info': string;
52
+ 'accent-info-foreground': string;
53
+ 'accent-success': string;
54
+ 'accent-success-foreground': string;
55
+ 'accent-warning': string;
56
+ 'accent-warning-foreground': string;
57
+ 'accent-danger': string;
58
+ 'accent-danger-foreground': string;
59
+ 'accent-brand': string;
60
+ 'accent-brand-foreground': string;
61
+ 'accent-feature': string;
62
+ 'accent-feature-foreground': string;
63
+ 'accent-highlight': string;
64
+ 'accent-highlight-foreground': string;
50
65
  }
51
66
  /**
52
67
  * Typography system - font family definitions
package/dist/index.d.ts CHANGED
@@ -47,6 +47,21 @@ interface ShadcnColorSystem {
47
47
  'sidebar-accent-foreground': string;
48
48
  'sidebar-border': string;
49
49
  'sidebar-ring': string;
50
+ /** Semantic accent colors for status and feedback */
51
+ 'accent-info': string;
52
+ 'accent-info-foreground': string;
53
+ 'accent-success': string;
54
+ 'accent-success-foreground': string;
55
+ 'accent-warning': string;
56
+ 'accent-warning-foreground': string;
57
+ 'accent-danger': string;
58
+ 'accent-danger-foreground': string;
59
+ 'accent-brand': string;
60
+ 'accent-brand-foreground': string;
61
+ 'accent-feature': string;
62
+ 'accent-feature-foreground': string;
63
+ 'accent-highlight': string;
64
+ 'accent-highlight-foreground': string;
50
65
  }
51
66
  /**
52
67
  * Typography system - font family definitions
package/dist/index.js CHANGED
@@ -78,7 +78,22 @@ var CSS_PROPERTY_CATEGORIES = {
78
78
  "sidebar-accent",
79
79
  "sidebar-accent-foreground",
80
80
  "sidebar-border",
81
- "sidebar-ring"
81
+ "sidebar-ring",
82
+ // Semantic accent colors for status and feedback
83
+ "accent-info",
84
+ "accent-info-foreground",
85
+ "accent-success",
86
+ "accent-success-foreground",
87
+ "accent-warning",
88
+ "accent-warning-foreground",
89
+ "accent-danger",
90
+ "accent-danger-foreground",
91
+ "accent-brand",
92
+ "accent-brand-foreground",
93
+ "accent-feature",
94
+ "accent-feature-foreground",
95
+ "accent-highlight",
96
+ "accent-highlight-foreground"
82
97
  ],
83
98
  typography: [
84
99
  "font-sans",
@@ -3748,7 +3763,6 @@ function ThemeProvider({
3748
3763
  if (stored) {
3749
3764
  const preset = JSON.parse(stored);
3750
3765
  setCurrentPreset(preset);
3751
- console.log("\u{1F3A8} UnifiedTheme: Loaded persisted preset:", preset.presetName);
3752
3766
  } else if (defaultPreset) {
3753
3767
  const preset = getAvailablePresetById(defaultPreset);
3754
3768
  if (preset) {
@@ -3762,7 +3776,6 @@ function ThemeProvider({
3762
3776
  appliedAt: Date.now()
3763
3777
  };
3764
3778
  setCurrentPreset(presetData);
3765
- console.log("\u{1F3A8} UnifiedTheme: Applied default preset:", preset.label);
3766
3779
  } else {
3767
3780
  console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
3768
3781
  }
@@ -3813,7 +3826,6 @@ function ThemeProvider({
3813
3826
  root.style.removeProperty(cssVar);
3814
3827
  clearedCount++;
3815
3828
  });
3816
- console.log(`\u{1F3A8} UnifiedTheme: Cleared ${clearedCount} CSS properties before applying new theme`);
3817
3829
  const fontProperties = ["font-sans", "font-serif", "font-mono"];
3818
3830
  const otherMode = mode2 === "light" ? "dark" : "light";
3819
3831
  const otherModeColors = preset[otherMode];
@@ -3821,7 +3833,6 @@ function ThemeProvider({
3821
3833
  fontProperties.forEach((fontProp) => {
3822
3834
  if (!(fontProp in colors) && fontProp in otherModeColors) {
3823
3835
  colors[fontProp] = otherModeColors[fontProp];
3824
- console.log(`\u{1F3A8} Inherited ${fontProp}: "${otherModeColors[fontProp]}" from ${otherMode} mode`);
3825
3836
  }
3826
3837
  });
3827
3838
  }
@@ -3830,16 +3841,13 @@ function ThemeProvider({
3830
3841
  let value = colors[prop];
3831
3842
  if (!value && defaultValues[prop]) {
3832
3843
  value = defaultValues[prop];
3833
- console.log(`\u{1F3A8} Using default value for ${prop}: ${value}`);
3834
3844
  }
3835
3845
  if (value) {
3836
3846
  const cssVar = `--${prop}`;
3837
3847
  root.style.setProperty(cssVar, value);
3838
3848
  appliedCount++;
3839
- console.log(`\u{1F3A8} Applied ${cssVar}: ${value}`);
3840
3849
  }
3841
3850
  });
3842
- console.log(`\u{1F3A8} UnifiedTheme: Applied ${appliedCount} CSS properties for ${mode2} mode`);
3843
3851
  }, []);
3844
3852
  const handleModeChange = (0, import_react.useCallback)((newMode) => {
3845
3853
  setMode(newMode);
@@ -3876,7 +3884,6 @@ function ThemeProvider({
3876
3884
  if (enablePresets && typeof window !== "undefined") {
3877
3885
  try {
3878
3886
  localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
3879
- console.log("\u{1F3A8} UnifiedTheme: Saved preset:", preset.name);
3880
3887
  } catch (error) {
3881
3888
  console.error("\u{1F3A8} UnifiedTheme: Failed to save preset:", error);
3882
3889
  }
@@ -3889,7 +3896,6 @@ function ThemeProvider({
3889
3896
  if (enablePresets && typeof window !== "undefined") {
3890
3897
  try {
3891
3898
  localStorage.removeItem(presetStorageKey);
3892
- console.log("\u{1F3A8} UnifiedTheme: Cleared preset");
3893
3899
  } catch (error) {
3894
3900
  console.error("\u{1F3A8} UnifiedTheme: Failed to clear preset:", error);
3895
3901
  }
@@ -3907,7 +3913,6 @@ function ThemeProvider({
3907
3913
  };
3908
3914
  setCurrentPreset(presetData);
3909
3915
  applyPresetColors(presetData.colors, resolvedMode);
3910
- console.log("\u{1F3A8} UnifiedTheme: Reset to default preset:", preset.label);
3911
3916
  } else {
3912
3917
  console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
3913
3918
  setCurrentPreset(null);
@@ -3928,7 +3933,6 @@ function ThemeProvider({
3928
3933
  root.style.removeProperty(cssVar);
3929
3934
  clearedCount++;
3930
3935
  });
3931
- console.log(`\u{1F3A8} UnifiedTheme: Cleared ${clearedCount} CSS properties`);
3932
3936
  }
3933
3937
  }
3934
3938
  }, [presetStorageKey, enablePresets, defaultPreset, applyPresetColors, resolvedMode]);
package/dist/index.mjs CHANGED
@@ -37,7 +37,22 @@ var CSS_PROPERTY_CATEGORIES = {
37
37
  "sidebar-accent",
38
38
  "sidebar-accent-foreground",
39
39
  "sidebar-border",
40
- "sidebar-ring"
40
+ "sidebar-ring",
41
+ // Semantic accent colors for status and feedback
42
+ "accent-info",
43
+ "accent-info-foreground",
44
+ "accent-success",
45
+ "accent-success-foreground",
46
+ "accent-warning",
47
+ "accent-warning-foreground",
48
+ "accent-danger",
49
+ "accent-danger-foreground",
50
+ "accent-brand",
51
+ "accent-brand-foreground",
52
+ "accent-feature",
53
+ "accent-feature-foreground",
54
+ "accent-highlight",
55
+ "accent-highlight-foreground"
41
56
  ],
42
57
  typography: [
43
58
  "font-sans",
@@ -3707,7 +3722,6 @@ function ThemeProvider({
3707
3722
  if (stored) {
3708
3723
  const preset = JSON.parse(stored);
3709
3724
  setCurrentPreset(preset);
3710
- console.log("\u{1F3A8} UnifiedTheme: Loaded persisted preset:", preset.presetName);
3711
3725
  } else if (defaultPreset) {
3712
3726
  const preset = getAvailablePresetById(defaultPreset);
3713
3727
  if (preset) {
@@ -3721,7 +3735,6 @@ function ThemeProvider({
3721
3735
  appliedAt: Date.now()
3722
3736
  };
3723
3737
  setCurrentPreset(presetData);
3724
- console.log("\u{1F3A8} UnifiedTheme: Applied default preset:", preset.label);
3725
3738
  } else {
3726
3739
  console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
3727
3740
  }
@@ -3772,7 +3785,6 @@ function ThemeProvider({
3772
3785
  root.style.removeProperty(cssVar);
3773
3786
  clearedCount++;
3774
3787
  });
3775
- console.log(`\u{1F3A8} UnifiedTheme: Cleared ${clearedCount} CSS properties before applying new theme`);
3776
3788
  const fontProperties = ["font-sans", "font-serif", "font-mono"];
3777
3789
  const otherMode = mode2 === "light" ? "dark" : "light";
3778
3790
  const otherModeColors = preset[otherMode];
@@ -3780,7 +3792,6 @@ function ThemeProvider({
3780
3792
  fontProperties.forEach((fontProp) => {
3781
3793
  if (!(fontProp in colors) && fontProp in otherModeColors) {
3782
3794
  colors[fontProp] = otherModeColors[fontProp];
3783
- console.log(`\u{1F3A8} Inherited ${fontProp}: "${otherModeColors[fontProp]}" from ${otherMode} mode`);
3784
3795
  }
3785
3796
  });
3786
3797
  }
@@ -3789,16 +3800,13 @@ function ThemeProvider({
3789
3800
  let value = colors[prop];
3790
3801
  if (!value && defaultValues[prop]) {
3791
3802
  value = defaultValues[prop];
3792
- console.log(`\u{1F3A8} Using default value for ${prop}: ${value}`);
3793
3803
  }
3794
3804
  if (value) {
3795
3805
  const cssVar = `--${prop}`;
3796
3806
  root.style.setProperty(cssVar, value);
3797
3807
  appliedCount++;
3798
- console.log(`\u{1F3A8} Applied ${cssVar}: ${value}`);
3799
3808
  }
3800
3809
  });
3801
- console.log(`\u{1F3A8} UnifiedTheme: Applied ${appliedCount} CSS properties for ${mode2} mode`);
3802
3810
  }, []);
3803
3811
  const handleModeChange = useCallback((newMode) => {
3804
3812
  setMode(newMode);
@@ -3835,7 +3843,6 @@ function ThemeProvider({
3835
3843
  if (enablePresets && typeof window !== "undefined") {
3836
3844
  try {
3837
3845
  localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
3838
- console.log("\u{1F3A8} UnifiedTheme: Saved preset:", preset.name);
3839
3846
  } catch (error) {
3840
3847
  console.error("\u{1F3A8} UnifiedTheme: Failed to save preset:", error);
3841
3848
  }
@@ -3848,7 +3855,6 @@ function ThemeProvider({
3848
3855
  if (enablePresets && typeof window !== "undefined") {
3849
3856
  try {
3850
3857
  localStorage.removeItem(presetStorageKey);
3851
- console.log("\u{1F3A8} UnifiedTheme: Cleared preset");
3852
3858
  } catch (error) {
3853
3859
  console.error("\u{1F3A8} UnifiedTheme: Failed to clear preset:", error);
3854
3860
  }
@@ -3866,7 +3872,6 @@ function ThemeProvider({
3866
3872
  };
3867
3873
  setCurrentPreset(presetData);
3868
3874
  applyPresetColors(presetData.colors, resolvedMode);
3869
- console.log("\u{1F3A8} UnifiedTheme: Reset to default preset:", preset.label);
3870
3875
  } else {
3871
3876
  console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
3872
3877
  setCurrentPreset(null);
@@ -3887,7 +3892,6 @@ function ThemeProvider({
3887
3892
  root.style.removeProperty(cssVar);
3888
3893
  clearedCount++;
3889
3894
  });
3890
- console.log(`\u{1F3A8} UnifiedTheme: Cleared ${clearedCount} CSS properties`);
3891
3895
  }
3892
3896
  }
3893
3897
  }, [presetStorageKey, enablePresets, defaultPreset, applyPresetColors, resolvedMode]);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fakhrirafiki/theme-engine",
3
- "version": "0.1.2",
4
- "description": "Elegant theming system with smooth transitions, custom presets, and complete shadcn/ui support for modern React applications",
3
+ "version": "0.2.0",
4
+ "description": "Elegant theming system with smooth transitions, custom presets, semantic accent colors, and complete shadcn/ui support for modern React applications",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
7
7
  "types": "./dist/index.d.ts",
@@ -66,7 +66,9 @@
66
66
  "color-scheme",
67
67
  "theming",
68
68
  "ui",
69
- "components"
69
+ "components",
70
+ "accent-colors",
71
+ "semantic-colors"
70
72
  ],
71
73
  "author": "NgobrolLink Team",
72
74
  "license": "MIT"