@quilltap/theme-storybook 1.0.15 → 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 +16 -0
  2. package/dist/index.css +93 -0
  3. package/package.json +1 -1
  4. package/src/css/qt-components.css +134 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,22 @@
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
+
16
+ ## [1.0.16] - 2026-01-30
17
+
18
+ ### Added
19
+ - `.qt-dialog-wide` class for dialogs that match page container width (uses `--qt-page-max-width` variable)
20
+
5
21
  ## [1.0.15] - 2026-01-29
6
22
 
7
23
  ### Added
package/dist/index.css CHANGED
@@ -660,6 +660,9 @@ body {
660
660
  padding: 1.5rem;
661
661
  padding-top: 0;
662
662
  }
663
+ .qt-dialog-wide {
664
+ max-width: min(var(--qt-page-max-width, 75rem), calc(100vw - 2rem));
665
+ }
663
666
  .qt-tabs {
664
667
  display: flex;
665
668
  gap: 0.25rem;
@@ -752,6 +755,96 @@ body {
752
755
  .qt-border {
753
756
  border-color: var(--color-border);
754
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
+ }
755
848
  .qt-left-sidebar {
756
849
  display: flex;
757
850
  flex-direction: column;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quilltap/theme-storybook",
3
- "version": "1.0.15",
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
@@ -642,6 +642,11 @@
642
642
  padding-top: 0;
643
643
  }
644
644
 
645
+ /* Wide dialog variant - matches page container width */
646
+ .qt-dialog-wide {
647
+ max-width: min(var(--qt-page-max-width, 75rem), calc(100vw - 2rem));
648
+ }
649
+
645
650
  /* ==========================================================================
646
651
  TAB COMPONENTS
647
652
  ========================================================================== */
@@ -762,6 +767,135 @@
762
767
  border-color: var(--color-border);
763
768
  }
764
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
+
765
899
  /* ==========================================================================
766
900
  LEFT SIDEBAR COMPONENTS
767
901
  ========================================================================== */