@kksdev/ds-angular 1.4.0 → 1.6.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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@kksdev/ds-angular",
3
- "version": "1.4.0",
4
- "description": "Angular 20 standalone component library - Design System with 38 components, 7 primitives, 3 themes, i18n support",
3
+ "version": "1.6.0",
4
+ "description": "Angular 20 standalone component library - Design System with 47 components, 7 primitives, 3 themes, i18n support",
5
5
  "keywords": [
6
6
  "angular",
7
7
  "angular20",
@@ -666,6 +666,26 @@
666
666
  --chip-info-hover-bg: color-mix(in oklab, var(--info) 30%, transparent);
667
667
  --chip-info-hover-bg-outlined: color-mix(in oklab, var(--info) 15%, transparent);
668
668
 
669
+ /* ==========================================================================
670
+ * SÉMANTIQUES DS SEGMENTED CONTROL
671
+ * ======================================================================== */
672
+ --segmented-bg: var(--gray-800);
673
+ --segmented-text: var(--text-default);
674
+ --segmented-border-color: var(--gray-700);
675
+ --segmented-hover-bg: color-mix(in oklab, var(--gray-100) 10%, transparent);
676
+
677
+ /* Primary color variant */
678
+ --segmented-active-bg-primary: var(--color-primary);
679
+ --segmented-active-text-primary: var(--gray-900);
680
+
681
+ /* Neutral color variant */
682
+ --segmented-active-bg-neutral: var(--gray-700);
683
+ --segmented-active-text-neutral: var(--text-default);
684
+
685
+ /* Active state (generic, deprecated) */
686
+ --segmented-active-bg: var(--segmented-active-bg-primary);
687
+ --segmented-active-text: var(--segmented-active-text-primary);
688
+
669
689
  /* ==========================================================================
670
690
  * SÉMANTIQUES DS EMPTY
671
691
  * ======================================================================== */
@@ -724,4 +744,192 @@
724
744
  --tree-toggle-color: var(--gray-400);
725
745
  --tree-toggle-hover-color: var(--gray-100);
726
746
  --tree-icon-color: var(--gray-400);
747
+
748
+ /* ==========================================================================
749
+ * SÉMANTIQUES DS PASSWORD STRENGTH
750
+ * ======================================================================== */
751
+ --password-strength-bg: var(--gray-700);
752
+ --password-strength-weak: var(--error);
753
+ --password-strength-medium: var(--warning);
754
+ --password-strength-strong: var(--success);
755
+ --password-strength-text: var(--gray-400);
756
+ --password-strength-criterion-valid: var(--success);
757
+ --password-strength-criterion-invalid: var(--gray-500);
758
+
759
+ /* ==========================================================================
760
+ * SÉMANTIQUES DS TIMELINE
761
+ * ======================================================================== */
762
+ --timeline-dot-bg: var(--gray-800);
763
+ --timeline-dot-border-color: var(--gray-600);
764
+
765
+ --timeline-dot-bg-default: var(--gray-700);
766
+ --timeline-dot-border-default: var(--gray-500);
767
+
768
+ --timeline-dot-bg-primary: color-mix(in oklab, var(--color-primary) 20%, var(--gray-800));
769
+ --timeline-dot-border-primary: var(--color-primary);
770
+
771
+ --timeline-dot-bg-success: color-mix(in oklab, var(--success) 20%, var(--gray-800));
772
+ --timeline-dot-border-success: var(--success);
773
+
774
+ --timeline-dot-bg-warning: color-mix(in oklab, var(--warning) 20%, var(--gray-800));
775
+ --timeline-dot-border-warning: var(--warning);
776
+
777
+ --timeline-dot-bg-error: color-mix(in oklab, var(--error) 20%, var(--gray-800));
778
+ --timeline-dot-border-error: var(--error);
779
+
780
+ --timeline-dot-bg-info: color-mix(in oklab, var(--info) 20%, var(--gray-800));
781
+ --timeline-dot-border-info: var(--info);
782
+
783
+ --timeline-dot-bg-pending: color-mix(in oklab, var(--gray-600) 20%, var(--gray-800));
784
+ --timeline-dot-border-pending: var(--gray-500);
785
+
786
+ --timeline-line-color: var(--gray-700);
787
+ --timeline-date-color: var(--gray-400);
788
+ --timeline-text-color: var(--gray-100);
789
+ --timeline-text-color-pending: var(--gray-400);
790
+ --timeline-icon-color: var(--color-primary);
791
+ --timeline-icon-color-pending: var(--gray-500);
792
+
793
+ /* ==========================================================================
794
+ * TRANSFER
795
+ * ======================================================================== */
796
+ --transfer-bg: var(--gray-800);
797
+ --transfer-border-color: var(--gray-700);
798
+ --transfer-header-bg: var(--gray-850);
799
+ --transfer-header-border-color: var(--gray-700);
800
+ --transfer-title-color: var(--gray-100);
801
+ --transfer-count-color: var(--gray-400);
802
+
803
+ --transfer-search-border-color: var(--gray-700);
804
+ --transfer-search-input-bg: var(--gray-900);
805
+ --transfer-search-input-text: var(--gray-100);
806
+ --transfer-search-input-border: var(--gray-700);
807
+ --transfer-search-input-focus: var(--color-primary);
808
+ --transfer-search-input-focus-shadow: color-mix(in oklab, var(--color-primary) 20%, transparent);
809
+ --transfer-search-input-disabled-bg: var(--gray-800);
810
+ --transfer-search-placeholder: var(--gray-500);
811
+ --transfer-search-clear-color: var(--gray-400);
812
+ --transfer-search-clear-hover: var(--gray-100);
813
+
814
+ --transfer-item-border: var(--gray-750);
815
+ --transfer-item-hover-bg: var(--gray-750);
816
+ --transfer-item-selected-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
817
+ --transfer-item-selected-hover-bg: color-mix(in oklab, var(--color-primary) 20%, var(--gray-800));
818
+ --transfer-item-label-color: var(--gray-100);
819
+ --transfer-item-description-color: var(--gray-400);
820
+
821
+ --transfer-empty-color: var(--gray-500);
822
+
823
+ /* ==========================================================================
824
+ * CAROUSEL
825
+ * ======================================================================== */
826
+ --carousel-bg: var(--gray-900);
827
+
828
+ --carousel-content-bg: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
829
+ --carousel-content-text: var(--gray-100);
830
+
831
+ --carousel-arrow-bg: rgba(255, 255, 255, 0.15);
832
+ --carousel-arrow-color: var(--gray-100);
833
+ --carousel-arrow-bg-hover: rgba(255, 255, 255, 0.25);
834
+ --carousel-arrow-color-hover: var(--color-primary);
835
+ --carousel-arrow-focus: var(--color-primary);
836
+ --carousel-arrow-shadow: var(--shadow-lg);
837
+
838
+ --carousel-dot-bg: rgba(255, 255, 255, 0.3);
839
+ --carousel-dot-bg-hover: rgba(255, 255, 255, 0.6);
840
+ --carousel-dot-bg-active: var(--gray-100);
841
+ --carousel-dot-focus: var(--color-primary);
842
+
843
+ /* ==========================================================================
844
+ * NOTIFICATION
845
+ * ======================================================================== */
846
+ --notification-bg: var(--gray-800);
847
+ --notification-border-color: var(--gray-700);
848
+ --notification-shadow: var(--shadow-lg);
849
+
850
+ --notification-icon-color: var(--gray-400);
851
+ --notification-title-color: var(--gray-100);
852
+ --notification-message-color: var(--gray-300);
853
+
854
+ --notification-close-color: var(--gray-500);
855
+ --notification-close-hover-color: var(--gray-100);
856
+
857
+ --notification-info-icon: var(--color-primary);
858
+ --notification-success-icon: var(--success);
859
+ --notification-warning-icon: var(--warning);
860
+ --notification-error-icon: var(--error);
861
+
862
+ /* ==========================================================================
863
+ * SÉMANTIQUES DS CALENDAR
864
+ * ======================================================================== */
865
+ --calendar-bg: var(--gray-800);
866
+ --calendar-border: var(--gray-700);
867
+
868
+ --calendar-header-bg: var(--gray-850);
869
+
870
+ --calendar-nav-btn-border: var(--gray-600);
871
+ --calendar-nav-btn-color: var(--gray-300);
872
+ --calendar-nav-btn-hover-bg: var(--gray-700);
873
+ --calendar-nav-btn-hover-border: var(--gray-500);
874
+ --calendar-nav-btn-hover-color: var(--gray-100);
875
+
876
+ --calendar-title-color: var(--gray-100);
877
+ --calendar-title-hover-bg: var(--gray-700);
878
+ --calendar-title-hover-border: var(--gray-600);
879
+
880
+ --calendar-mode-bg: var(--gray-900);
881
+ --calendar-mode-border: var(--gray-700);
882
+ --calendar-mode-btn-color: var(--gray-300);
883
+ --calendar-mode-btn-hover-color: var(--gray-100);
884
+ --calendar-mode-btn-active-bg: var(--color-primary);
885
+ --calendar-mode-btn-active-color: var(--gray-900);
886
+
887
+ --calendar-weekday-color: var(--gray-400);
888
+
889
+ --calendar-day-bg: transparent;
890
+ --calendar-day-border: transparent;
891
+ --calendar-day-color: var(--gray-100);
892
+ --calendar-day-hover-bg: var(--gray-750);
893
+ --calendar-day-hover-border: var(--gray-600);
894
+ --calendar-day-other-month-color: var(--gray-600);
895
+ --calendar-day-today-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
896
+ --calendar-day-today-border: var(--color-primary);
897
+ --calendar-day-today-color: var(--color-primary);
898
+ --calendar-day-disabled-bg: var(--gray-850);
899
+
900
+ --calendar-event-dot-color: var(--gray-500);
901
+ --calendar-event-title-color: var(--gray-300);
902
+ --calendar-event-success-color: var(--success);
903
+ --calendar-event-warning-color: var(--warning);
904
+ --calendar-event-error-color: var(--error);
905
+
906
+ --calendar-month-bg: transparent;
907
+ --calendar-month-border: var(--gray-700);
908
+ --calendar-month-color: var(--gray-100);
909
+ --calendar-month-hover-bg: var(--gray-750);
910
+ --calendar-month-hover-border: var(--gray-600);
911
+ --calendar-month-current-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
912
+ --calendar-month-current-border: var(--color-primary);
913
+ --calendar-month-current-color: var(--color-primary);
914
+
915
+ /* ==========================================================================
916
+ * SÉMANTIQUES DS COLOR PICKER
917
+ * ======================================================================== */
918
+ --colorpicker-bg: var(--gray-800);
919
+ --colorpicker-border: var(--gray-700);
920
+ --colorpicker-border-hover: var(--gray-600);
921
+ --colorpicker-text: var(--gray-100);
922
+ --colorpicker-placeholder: var(--gray-500);
923
+ --colorpicker-icon: var(--gray-400);
924
+ --colorpicker-clear-icon: var(--gray-400);
925
+ --colorpicker-preview-border: var(--gray-700);
926
+ --colorpicker-action-hover-bg: var(--gray-700);
927
+ --colorpicker-focus-shadow: color-mix(in oklab, var(--color-primary) 25%, transparent);
928
+
929
+ --colorpicker-panel-bg: var(--gray-800);
930
+ --colorpicker-panel-border: var(--gray-700);
931
+ --colorpicker-input-bg: var(--gray-750);
932
+ --colorpicker-input-border: var(--gray-700);
933
+ --colorpicker-input-text: var(--gray-100);
934
+ --colorpicker-preset-border: var(--gray-700);
727
935
  }
@@ -652,6 +652,26 @@
652
652
  /* Info */
653
653
  --chip-info-bg: var(--bg-info);
654
654
  --chip-info-text: var(--info);
655
+
656
+ /* ==========================================================================
657
+ * SÉMANTIQUES DS SEGMENTED CONTROL
658
+ * ======================================================================== */
659
+ --segmented-bg: var(--gray-100);
660
+ --segmented-text: var(--text-default);
661
+ --segmented-border-color: var(--border-subtle);
662
+ --segmented-hover-bg: color-mix(in oklab, var(--gray-900) 5%, transparent);
663
+
664
+ /* Primary color variant */
665
+ --segmented-active-bg-primary: var(--color-primary);
666
+ --segmented-active-text-primary: var(--gray-50);
667
+
668
+ /* Neutral color variant */
669
+ --segmented-active-bg-neutral: var(--surface-default);
670
+ --segmented-active-text-neutral: var(--text-default);
671
+
672
+ /* Active state (generic, deprecated) */
673
+ --segmented-active-bg: var(--segmented-active-bg-primary);
674
+ --segmented-active-text: var(--segmented-active-text-primary);
655
675
  --chip-info-border: var(--info);
656
676
  --chip-info-hover-bg: color-mix(in oklab, var(--info) 25%, transparent);
657
677
  --chip-info-hover-bg-outlined: color-mix(in oklab, var(--info) 10%, transparent);
@@ -714,4 +734,192 @@
714
734
  --tree-toggle-color: var(--text-muted);
715
735
  --tree-toggle-hover-color: var(--text-default);
716
736
  --tree-icon-color: var(--text-muted);
737
+
738
+ /* ==========================================================================
739
+ * SÉMANTIQUES DS PASSWORD STRENGTH
740
+ * ======================================================================== */
741
+ --password-strength-bg: var(--gray-200);
742
+ --password-strength-weak: var(--error);
743
+ --password-strength-medium: var(--warning);
744
+ --password-strength-strong: var(--success);
745
+ --password-strength-text: var(--text-muted);
746
+ --password-strength-criterion-valid: var(--success);
747
+ --password-strength-criterion-invalid: var(--text-muted);
748
+
749
+ /* ==========================================================================
750
+ * SÉMANTIQUES DS TIMELINE
751
+ * ======================================================================== */
752
+ --timeline-dot-bg: var(--background-main);
753
+ --timeline-dot-border-color: var(--border-color);
754
+
755
+ --timeline-dot-bg-default: var(--gray-100);
756
+ --timeline-dot-border-default: var(--gray-400);
757
+
758
+ --timeline-dot-bg-primary: color-mix(in oklab, var(--color-primary) 15%, transparent);
759
+ --timeline-dot-border-primary: var(--color-primary);
760
+
761
+ --timeline-dot-bg-success: color-mix(in oklab, var(--success) 15%, transparent);
762
+ --timeline-dot-border-success: var(--success);
763
+
764
+ --timeline-dot-bg-warning: color-mix(in oklab, var(--warning) 15%, transparent);
765
+ --timeline-dot-border-warning: var(--warning);
766
+
767
+ --timeline-dot-bg-error: color-mix(in oklab, var(--error) 15%, transparent);
768
+ --timeline-dot-border-error: var(--error);
769
+
770
+ --timeline-dot-bg-info: color-mix(in oklab, var(--info) 15%, transparent);
771
+ --timeline-dot-border-info: var(--info);
772
+
773
+ --timeline-dot-bg-pending: color-mix(in oklab, var(--gray-300) 15%, transparent);
774
+ --timeline-dot-border-pending: var(--gray-500);
775
+
776
+ --timeline-line-color: var(--border-subtle);
777
+ --timeline-date-color: var(--text-muted);
778
+ --timeline-text-color: var(--text-default);
779
+ --timeline-text-color-pending: var(--text-muted);
780
+ --timeline-icon-color: var(--color-primary);
781
+ --timeline-icon-color-pending: var(--text-muted);
782
+
783
+ /* ==========================================================================
784
+ * TRANSFER
785
+ * ======================================================================== */
786
+ --transfer-bg: var(--white);
787
+ --transfer-border-color: var(--border-color);
788
+ --transfer-header-bg: var(--gray-50);
789
+ --transfer-header-border-color: var(--border-subtle);
790
+ --transfer-title-color: var(--text-default);
791
+ --transfer-count-color: var(--text-muted);
792
+
793
+ --transfer-search-border-color: var(--border-subtle);
794
+ --transfer-search-input-bg: var(--white);
795
+ --transfer-search-input-text: var(--text-default);
796
+ --transfer-search-input-border: var(--border-color);
797
+ --transfer-search-input-focus: var(--color-primary);
798
+ --transfer-search-input-focus-shadow: color-mix(in oklab, var(--color-primary) 10%, transparent);
799
+ --transfer-search-input-disabled-bg: var(--gray-50);
800
+ --transfer-search-placeholder: var(--text-disabled);
801
+ --transfer-search-clear-color: var(--text-muted);
802
+ --transfer-search-clear-hover: var(--text-default);
803
+
804
+ --transfer-item-border: var(--border-subtle);
805
+ --transfer-item-hover-bg: var(--gray-50);
806
+ --transfer-item-selected-bg: color-mix(in oklab, var(--color-primary) 10%, transparent);
807
+ --transfer-item-selected-hover-bg: color-mix(in oklab, var(--color-primary) 15%, transparent);
808
+ --transfer-item-label-color: var(--text-default);
809
+ --transfer-item-description-color: var(--text-muted);
810
+
811
+ --transfer-empty-color: var(--text-disabled);
812
+
813
+ /* ==========================================================================
814
+ * CAROUSEL
815
+ * ======================================================================== */
816
+ --carousel-bg: var(--gray-50);
817
+
818
+ --carousel-content-bg: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
819
+ --carousel-content-text: var(--white);
820
+
821
+ --carousel-arrow-bg: rgba(255, 255, 255, 0.9);
822
+ --carousel-arrow-color: var(--gray-800);
823
+ --carousel-arrow-bg-hover: var(--white);
824
+ --carousel-arrow-color-hover: var(--color-primary);
825
+ --carousel-arrow-focus: var(--color-primary);
826
+ --carousel-arrow-shadow: var(--shadow-md);
827
+
828
+ --carousel-dot-bg: rgba(255, 255, 255, 0.5);
829
+ --carousel-dot-bg-hover: rgba(255, 255, 255, 0.8);
830
+ --carousel-dot-bg-active: var(--white);
831
+ --carousel-dot-focus: var(--color-primary);
832
+
833
+ /* ==========================================================================
834
+ * NOTIFICATION
835
+ * ======================================================================== */
836
+ --notification-bg: var(--white);
837
+ --notification-border-color: var(--gray-300);
838
+ --notification-shadow: var(--shadow-lg);
839
+
840
+ --notification-icon-color: var(--gray-500);
841
+ --notification-title-color: var(--gray-900);
842
+ --notification-message-color: var(--gray-600);
843
+
844
+ --notification-close-color: var(--gray-400);
845
+ --notification-close-hover-color: var(--gray-600);
846
+
847
+ --notification-info-icon: var(--color-primary);
848
+ --notification-success-icon: var(--success);
849
+ --notification-warning-icon: var(--warning);
850
+ --notification-error-icon: var(--error);
851
+
852
+ /* ==========================================================================
853
+ * SÉMANTIQUES DS CALENDAR
854
+ * ======================================================================== */
855
+ --calendar-bg: var(--white);
856
+ --calendar-border: var(--gray-200);
857
+
858
+ --calendar-header-bg: var(--gray-50);
859
+
860
+ --calendar-nav-btn-border: var(--gray-300);
861
+ --calendar-nav-btn-color: var(--gray-700);
862
+ --calendar-nav-btn-hover-bg: var(--gray-100);
863
+ --calendar-nav-btn-hover-border: var(--gray-400);
864
+ --calendar-nav-btn-hover-color: var(--gray-900);
865
+
866
+ --calendar-title-color: var(--gray-900);
867
+ --calendar-title-hover-bg: var(--gray-100);
868
+ --calendar-title-hover-border: var(--gray-300);
869
+
870
+ --calendar-mode-bg: var(--white);
871
+ --calendar-mode-border: var(--gray-300);
872
+ --calendar-mode-btn-color: var(--gray-700);
873
+ --calendar-mode-btn-hover-color: var(--gray-900);
874
+ --calendar-mode-btn-active-bg: var(--color-primary);
875
+ --calendar-mode-btn-active-color: var(--white);
876
+
877
+ --calendar-weekday-color: var(--gray-600);
878
+
879
+ --calendar-day-bg: transparent;
880
+ --calendar-day-border: transparent;
881
+ --calendar-day-color: var(--gray-900);
882
+ --calendar-day-hover-bg: var(--gray-100);
883
+ --calendar-day-hover-border: var(--gray-300);
884
+ --calendar-day-other-month-color: var(--gray-400);
885
+ --calendar-day-today-bg: var(--blue-50);
886
+ --calendar-day-today-border: var(--color-primary);
887
+ --calendar-day-today-color: var(--color-primary);
888
+ --calendar-day-disabled-bg: var(--gray-50);
889
+
890
+ --calendar-event-dot-color: var(--gray-500);
891
+ --calendar-event-title-color: var(--gray-700);
892
+ --calendar-event-success-color: var(--success);
893
+ --calendar-event-warning-color: var(--warning);
894
+ --calendar-event-error-color: var(--error);
895
+
896
+ --calendar-month-bg: transparent;
897
+ --calendar-month-border: var(--gray-200);
898
+ --calendar-month-color: var(--gray-900);
899
+ --calendar-month-hover-bg: var(--gray-50);
900
+ --calendar-month-hover-border: var(--gray-300);
901
+ --calendar-month-current-bg: var(--blue-50);
902
+ --calendar-month-current-border: var(--color-primary);
903
+ --calendar-month-current-color: var(--color-primary);
904
+
905
+ /* ==========================================================================
906
+ * SÉMANTIQUES DS COLOR PICKER
907
+ * ======================================================================== */
908
+ --colorpicker-bg: var(--background-main);
909
+ --colorpicker-border: var(--border-default);
910
+ --colorpicker-border-hover: var(--border-strong);
911
+ --colorpicker-text: var(--text-default);
912
+ --colorpicker-placeholder: var(--text-muted);
913
+ --colorpicker-icon: var(--text-muted);
914
+ --colorpicker-clear-icon: var(--text-muted);
915
+ --colorpicker-preview-border: var(--border-default);
916
+ --colorpicker-action-hover-bg: var(--surface-hover);
917
+ --colorpicker-focus-shadow: color-mix(in oklab, var(--color-primary) 25%, transparent);
918
+
919
+ --colorpicker-panel-bg: var(--background-main);
920
+ --colorpicker-panel-border: var(--border-default);
921
+ --colorpicker-input-bg: var(--background-main);
922
+ --colorpicker-input-border: var(--border-default);
923
+ --colorpicker-input-text: var(--text-default);
924
+ --colorpicker-preset-border: var(--border-default);
717
925
  }
@@ -56,6 +56,7 @@ $alt: #2dd4bf;
56
56
  // === SPACING ===
57
57
 
58
58
  $space-1: 0.25rem;
59
+ $space-1-5: 0.375rem;
59
60
  $space-2: 0.5rem;
60
61
  $space-3: 0.75rem;
61
62
  $space-4: 1rem;