@quilltap/theme-storybook 1.0.16 → 1.0.17

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 (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/index.css +90 -0
  3. package/package.json +1 -1
  4. package/src/css/qt-components.css +129 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,17 @@
2
2
 
3
3
  All notable changes to `@quilltap/theme-storybook` will be documented in this file.
4
4
 
5
+ ## [1.0.17] - 2026-02-02
6
+
7
+ ### Added
8
+ - Status color utility classes with opacity variants:
9
+ - Background: `qt-bg-success/10`, `qt-bg-warning/10`, `qt-bg-info/10`, `qt-bg-destructive/10` (also /5 and /20)
10
+ - Text: `qt-text-success`, `qt-text-warning`, `qt-text-info`, `qt-text-destructive`
11
+ - Border: `qt-border-success`, `qt-border-warning`, `qt-border-info`, `qt-border-destructive`
12
+ - Border with opacity: `qt-border-success/30`, `qt-border-warning/30`, `qt-border-info/30`, `qt-border-destructive/30`
13
+ - Hover backgrounds: `hover:qt-bg-success/10`, `hover:qt-bg-warning/10`, `hover:qt-bg-info/10`, `hover:qt-bg-destructive/10`
14
+ - `qt-bg-muted` utility class
15
+
5
16
  ## [1.0.16] - 2026-01-30
6
17
 
7
18
  ### Added
package/dist/index.css CHANGED
@@ -755,6 +755,96 @@ body {
755
755
  .qt-border {
756
756
  border-color: var(--color-border);
757
757
  }
758
+ .qt-bg-muted {
759
+ background-color: var(--color-muted);
760
+ }
761
+ .qt-bg-success\/5 {
762
+ background-color: color-mix(in srgb, var(--color-success) 5%, transparent);
763
+ }
764
+ .qt-bg-success\/10 {
765
+ background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
766
+ }
767
+ .qt-bg-success\/20 {
768
+ background-color: color-mix(in srgb, var(--color-success) 20%, transparent);
769
+ }
770
+ .qt-bg-warning\/5 {
771
+ background-color: color-mix(in srgb, var(--color-warning) 5%, transparent);
772
+ }
773
+ .qt-bg-warning\/10 {
774
+ background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
775
+ }
776
+ .qt-bg-warning\/20 {
777
+ background-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
778
+ }
779
+ .qt-bg-info\/5 {
780
+ background-color: color-mix(in srgb, var(--color-info) 5%, transparent);
781
+ }
782
+ .qt-bg-info\/10 {
783
+ background-color: color-mix(in srgb, var(--color-info) 10%, transparent);
784
+ }
785
+ .qt-bg-info\/20 {
786
+ background-color: color-mix(in srgb, var(--color-info) 20%, transparent);
787
+ }
788
+ .qt-bg-destructive\/5 {
789
+ background-color: color-mix(in srgb, var(--color-destructive) 5%, transparent);
790
+ }
791
+ .qt-bg-destructive\/10 {
792
+ background-color: color-mix(in srgb, var(--color-destructive) 10%, transparent);
793
+ }
794
+ .qt-bg-destructive\/20 {
795
+ background-color: color-mix(in srgb, var(--color-destructive) 20%, transparent);
796
+ }
797
+ .qt-text-warning {
798
+ color: var(--color-warning);
799
+ }
800
+ .qt-text-info {
801
+ color: var(--color-info);
802
+ }
803
+ .qt-text-success {
804
+ color: var(--color-success);
805
+ }
806
+ .qt-text-destructive {
807
+ color: var(--color-destructive);
808
+ }
809
+ .qt-border-primary {
810
+ border-color: var(--color-primary);
811
+ }
812
+ .qt-border-warning {
813
+ border-color: var(--color-warning);
814
+ }
815
+ .qt-border-info {
816
+ border-color: var(--color-info);
817
+ }
818
+ .qt-border-success {
819
+ border-color: var(--color-success);
820
+ }
821
+ .qt-border-destructive {
822
+ border-color: var(--color-destructive);
823
+ }
824
+ .qt-border-success\/30 {
825
+ border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
826
+ }
827
+ .qt-border-warning\/30 {
828
+ border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
829
+ }
830
+ .qt-border-destructive\/30 {
831
+ border-color: color-mix(in srgb, var(--color-destructive) 30%, transparent);
832
+ }
833
+ .qt-border-info\/30 {
834
+ border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
835
+ }
836
+ .hover\:qt-bg-destructive\/10:hover {
837
+ background-color: color-mix(in srgb, var(--color-destructive) 10%, transparent);
838
+ }
839
+ .hover\:qt-bg-success\/10:hover {
840
+ background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
841
+ }
842
+ .hover\:qt-bg-warning\/10:hover {
843
+ background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
844
+ }
845
+ .hover\:qt-bg-info\/10:hover {
846
+ background-color: color-mix(in srgb, var(--color-info) 10%, transparent);
847
+ }
758
848
  .qt-left-sidebar {
759
849
  display: flex;
760
850
  flex-direction: column;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quilltap/theme-storybook",
3
- "version": "1.0.16",
3
+ "version": "1.0.17",
4
4
  "description": "Storybook preset and stories for developing Quilltap theme plugins",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/css/qt-components.css CHANGED
@@ -767,6 +767,135 @@
767
767
  border-color: var(--color-border);
768
768
  }
769
769
 
770
+ /* ==========================================================================
771
+ STATUS COLOR UTILITIES (with opacity variants)
772
+ ========================================================================== */
773
+
774
+ /* Background utilities with opacity */
775
+ .qt-bg-muted {
776
+ background-color: var(--color-muted);
777
+ }
778
+
779
+ .qt-bg-success\/5 {
780
+ background-color: color-mix(in srgb, var(--color-success) 5%, transparent);
781
+ }
782
+
783
+ .qt-bg-success\/10 {
784
+ background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
785
+ }
786
+
787
+ .qt-bg-success\/20 {
788
+ background-color: color-mix(in srgb, var(--color-success) 20%, transparent);
789
+ }
790
+
791
+ .qt-bg-warning\/5 {
792
+ background-color: color-mix(in srgb, var(--color-warning) 5%, transparent);
793
+ }
794
+
795
+ .qt-bg-warning\/10 {
796
+ background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
797
+ }
798
+
799
+ .qt-bg-warning\/20 {
800
+ background-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
801
+ }
802
+
803
+ .qt-bg-info\/5 {
804
+ background-color: color-mix(in srgb, var(--color-info) 5%, transparent);
805
+ }
806
+
807
+ .qt-bg-info\/10 {
808
+ background-color: color-mix(in srgb, var(--color-info) 10%, transparent);
809
+ }
810
+
811
+ .qt-bg-info\/20 {
812
+ background-color: color-mix(in srgb, var(--color-info) 20%, transparent);
813
+ }
814
+
815
+ .qt-bg-destructive\/5 {
816
+ background-color: color-mix(in srgb, var(--color-destructive) 5%, transparent);
817
+ }
818
+
819
+ .qt-bg-destructive\/10 {
820
+ background-color: color-mix(in srgb, var(--color-destructive) 10%, transparent);
821
+ }
822
+
823
+ .qt-bg-destructive\/20 {
824
+ background-color: color-mix(in srgb, var(--color-destructive) 20%, transparent);
825
+ }
826
+
827
+ /* Text color utilities */
828
+ .qt-text-warning {
829
+ color: var(--color-warning);
830
+ }
831
+
832
+ .qt-text-info {
833
+ color: var(--color-info);
834
+ }
835
+
836
+ .qt-text-success {
837
+ color: var(--color-success);
838
+ }
839
+
840
+ .qt-text-destructive {
841
+ color: var(--color-destructive);
842
+ }
843
+
844
+ /* Border utilities */
845
+ .qt-border-primary {
846
+ border-color: var(--color-primary);
847
+ }
848
+
849
+ .qt-border-warning {
850
+ border-color: var(--color-warning);
851
+ }
852
+
853
+ .qt-border-info {
854
+ border-color: var(--color-info);
855
+ }
856
+
857
+ .qt-border-success {
858
+ border-color: var(--color-success);
859
+ }
860
+
861
+ .qt-border-destructive {
862
+ border-color: var(--color-destructive);
863
+ }
864
+
865
+ /* Border utilities with 30% opacity */
866
+ .qt-border-success\/30 {
867
+ border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
868
+ }
869
+
870
+ .qt-border-warning\/30 {
871
+ border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
872
+ }
873
+
874
+ .qt-border-destructive\/30 {
875
+ border-color: color-mix(in srgb, var(--color-destructive) 30%, transparent);
876
+ }
877
+
878
+ .qt-border-info\/30 {
879
+ border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
880
+ }
881
+
882
+ /* Hover utilities */
883
+ .hover\:qt-bg-destructive\/10:hover {
884
+ background-color: color-mix(in srgb, var(--color-destructive) 10%, transparent);
885
+ }
886
+
887
+ .hover\:qt-bg-success\/10:hover {
888
+ background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
889
+ }
890
+
891
+ .hover\:qt-bg-warning\/10:hover {
892
+ background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
893
+ }
894
+
895
+ .hover\:qt-bg-info\/10:hover {
896
+ background-color: color-mix(in srgb, var(--color-info) 10%, transparent);
897
+ }
898
+
770
899
  /* ==========================================================================
771
900
  LEFT SIDEBAR COMPONENTS
772
901
  ========================================================================== */