@kksdev/ds-angular 1.6.0 → 1.7.1
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/fesm2022/kksdev-ds-angular.mjs +3273 -326
- package/fesm2022/kksdev-ds-angular.mjs.map +1 -1
- package/index.d.ts +1694 -162
- package/package.json +3 -3
- package/src/styles/themes/_custom.scss +101 -0
- package/src/styles/themes/_dark.scss +42 -12
- package/src/styles/themes/_light.scss +36 -6
- package/src/styles/tokens/_primitives.scss +20 -20
- package/src/styles/tokens/_semantic.scss +19 -0
- package/src/styles/tokens/_tokens.scss +32 -18
- package/src/styles/storybook.scss +0 -45
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kksdev/ds-angular",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "Angular 20 standalone component library - Design System with
|
|
3
|
+
"version": "1.7.1",
|
|
4
|
+
"description": "Angular 20 standalone component library - Design System with 50 components, 7 primitives, 3 themes, i18n support",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
7
7
|
"angular20",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"signals",
|
|
13
13
|
"accessibility",
|
|
14
14
|
"wcag",
|
|
15
|
-
"
|
|
15
|
+
"showcase"
|
|
16
16
|
],
|
|
17
17
|
"author": "KKSDEV Team",
|
|
18
18
|
"license": "MIT",
|
|
@@ -686,5 +686,106 @@
|
|
|
686
686
|
--file-upload-file-border: var(--border-subtle);
|
|
687
687
|
--file-upload-file-bg: var(--surface-default);
|
|
688
688
|
--file-upload-file-bg-hover: var(--surface-hover);
|
|
689
|
+
|
|
690
|
+
/* ==========================================================================
|
|
691
|
+
* SÉMANTIQUES DS INPUT NUMBER
|
|
692
|
+
* ======================================================================== */
|
|
693
|
+
--input-number-bg: var(--surface-default);
|
|
694
|
+
--input-number-text: var(--text-default);
|
|
695
|
+
--input-number-border: var(--border-color);
|
|
696
|
+
--input-number-placeholder: var(--text-muted);
|
|
697
|
+
--input-number-hover-border: var(--border-strong);
|
|
698
|
+
--input-number-focus-border: var(--role-primary);
|
|
699
|
+
--input-number-focus-shadow: 0 0 0 3px color-mix(in oklab, var(--role-primary) 25%, transparent);
|
|
700
|
+
--input-number-disabled-bg: var(--bg-disabled);
|
|
701
|
+
--input-number-disabled-text: var(--text-disabled);
|
|
702
|
+
--input-number-btn-bg: var(--surface-raised);
|
|
703
|
+
--input-number-btn-hover-bg: var(--surface-hover);
|
|
704
|
+
--input-number-btn-disabled-bg: var(--bg-disabled);
|
|
705
|
+
|
|
706
|
+
/* ==========================================================================
|
|
707
|
+
* SÉMANTIQUES DS SEGMENTED CONTROL
|
|
708
|
+
* ======================================================================== */
|
|
709
|
+
--segmented-bg: var(--surface-default);
|
|
710
|
+
--segmented-text: var(--text-default);
|
|
711
|
+
--segmented-border-color: var(--border-subtle);
|
|
712
|
+
--segmented-hover-bg: color-mix(in oklab, var(--role-primary) 5%, transparent);
|
|
713
|
+
|
|
714
|
+
/* Primary color variant */
|
|
715
|
+
--segmented-active-bg-primary: var(--role-primary);
|
|
716
|
+
--segmented-active-text-primary: var(--gray-50);
|
|
717
|
+
|
|
718
|
+
/* Neutral color variant */
|
|
719
|
+
--segmented-active-bg-neutral: var(--surface-raised);
|
|
720
|
+
--segmented-active-text-neutral: var(--text-default);
|
|
721
|
+
|
|
722
|
+
/* Active state (generic, deprecated) */
|
|
723
|
+
--segmented-active-bg: var(--segmented-active-bg-primary);
|
|
724
|
+
--segmented-active-text: var(--segmented-active-text-primary);
|
|
725
|
+
|
|
726
|
+
/* ==========================================================================
|
|
727
|
+
* SÉMANTIQUES DS COLOR PICKER
|
|
728
|
+
* ======================================================================== */
|
|
729
|
+
--colorpicker-bg: var(--surface-default);
|
|
730
|
+
--colorpicker-border: var(--border-color);
|
|
731
|
+
--colorpicker-border-hover: var(--border-strong);
|
|
732
|
+
--colorpicker-text: var(--text-default);
|
|
733
|
+
--colorpicker-placeholder: var(--text-muted);
|
|
734
|
+
--colorpicker-icon: var(--text-muted);
|
|
735
|
+
--colorpicker-clear-icon: var(--text-muted);
|
|
736
|
+
--colorpicker-preview-border: var(--border-color);
|
|
737
|
+
--colorpicker-action-hover-bg: var(--surface-hover);
|
|
738
|
+
--colorpicker-focus-shadow: color-mix(in oklab, var(--role-primary) 25%, transparent);
|
|
739
|
+
|
|
740
|
+
--colorpicker-panel-bg: var(--surface-default);
|
|
741
|
+
--colorpicker-panel-border: var(--border-color);
|
|
742
|
+
--colorpicker-input-bg: var(--surface-raised);
|
|
743
|
+
--colorpicker-input-border: var(--border-color);
|
|
744
|
+
--colorpicker-input-text: var(--text-default);
|
|
745
|
+
--colorpicker-preset-border: var(--border-color);
|
|
746
|
+
|
|
747
|
+
/* ==========================================================================
|
|
748
|
+
* SÉMANTIQUES DS TIME PICKER
|
|
749
|
+
* ======================================================================== */
|
|
750
|
+
--time-picker-panel-bg: var(--surface-default);
|
|
751
|
+
--time-picker-panel-border: var(--border-color);
|
|
752
|
+
--time-picker-column-bg: var(--surface-default);
|
|
753
|
+
--time-picker-column-border: var(--border-subtle);
|
|
754
|
+
--time-picker-option-text: var(--text-default);
|
|
755
|
+
--time-picker-option-hover: var(--surface-hover);
|
|
756
|
+
--time-picker-option-focus: var(--surface-hover);
|
|
757
|
+
--time-picker-option-selected-bg: var(--role-primary);
|
|
758
|
+
--time-picker-option-selected-text: var(--gray-50);
|
|
759
|
+
--time-picker-option-selected-hover: color-mix(in oklab, var(--role-primary) 85%, var(--bg-main));
|
|
760
|
+
--time-picker-scrollbar-track: var(--surface-raised);
|
|
761
|
+
--time-picker-scrollbar-thumb: var(--border-strong);
|
|
762
|
+
--time-picker-scrollbar-thumb-hover: var(--text-muted);
|
|
763
|
+
--time-picker-btn-cancel-text: var(--text-muted);
|
|
764
|
+
--time-picker-btn-cancel-hover: var(--surface-hover);
|
|
765
|
+
--time-picker-btn-confirm-bg: var(--role-primary);
|
|
766
|
+
--time-picker-btn-confirm-text: var(--gray-50);
|
|
767
|
+
--time-picker-btn-confirm-hover: color-mix(in oklab, var(--role-primary) 85%, var(--text-default));
|
|
768
|
+
|
|
769
|
+
/* ==========================================================================
|
|
770
|
+
* SIDEBAR
|
|
771
|
+
* ======================================================================== */
|
|
772
|
+
--sidebar-bg: var(--custom-bg);
|
|
773
|
+
--sidebar-border: var(--custom-border);
|
|
774
|
+
--sidebar-text: var(--custom-text-default);
|
|
775
|
+
--sidebar-icon-color: var(--custom-text-muted);
|
|
776
|
+
--sidebar-item-hover-bg: var(--custom-bg-secondary);
|
|
777
|
+
--sidebar-item-active-bg: color-mix(in oklab, var(--custom-accent-primary) 10%, var(--custom-bg));
|
|
778
|
+
--sidebar-item-active-text: var(--custom-accent-primary);
|
|
779
|
+
--sidebar-item-radius: var(--radius-1-5);
|
|
780
|
+
--sidebar-header-bg: var(--custom-bg-header);
|
|
781
|
+
--sidebar-header-padding: var(--space-4);
|
|
782
|
+
--sidebar-footer-bg: var(--custom-bg);
|
|
783
|
+
--sidebar-footer-padding: var(--space-4);
|
|
784
|
+
--sidebar-body-padding: var(--space-2);
|
|
785
|
+
--sidebar-backdrop-bg: rgba(0, 0, 0, 0.5);
|
|
786
|
+
--sidebar-shadow: var(--shadow-3);
|
|
787
|
+
--sidebar-trigger-shadow: var(--shadow-2);
|
|
788
|
+
--sidebar-scrollbar-thumb: var(--custom-border);
|
|
789
|
+
--sidebar-scrollbar-thumb-hover: var(--custom-text-muted);
|
|
689
790
|
}
|
|
690
791
|
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
--input-border-color: var(--gray-700);
|
|
188
188
|
--input-hover-border: color-mix(in oklab, var(--gray-600) 65%, var(--background-main));
|
|
189
189
|
--input-focus-border: var(--focus-color);
|
|
190
|
-
--input-focus-shadow: 0 0 0
|
|
190
|
+
--input-focus-shadow: 0 0 0 2px color-mix(in oklab, var(--focus-color) 25%, transparent);
|
|
191
191
|
--input-icon: var(--gray-400);
|
|
192
192
|
|
|
193
193
|
/* Layout */
|
|
@@ -708,8 +708,8 @@
|
|
|
708
708
|
--drawer-bg: var(--gray-800);
|
|
709
709
|
--drawer-border: var(--gray-700);
|
|
710
710
|
--drawer-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
|
|
711
|
-
--drawer-header-bg: var(--gray-
|
|
712
|
-
--drawer-footer-bg: var(--gray-
|
|
711
|
+
--drawer-header-bg: var(--gray-700);
|
|
712
|
+
--drawer-footer-bg: var(--gray-700);
|
|
713
713
|
--drawer-title-color: var(--gray-100);
|
|
714
714
|
--drawer-body-color: var(--gray-200);
|
|
715
715
|
--drawer-close-color: var(--gray-400);
|
|
@@ -724,7 +724,7 @@
|
|
|
724
724
|
* ======================================================================== */
|
|
725
725
|
--time-picker-panel-bg: var(--gray-800);
|
|
726
726
|
--time-picker-panel-border: var(--gray-700);
|
|
727
|
-
--time-picker-column-bg: var(--gray-
|
|
727
|
+
--time-picker-column-bg: var(--gray-700);
|
|
728
728
|
--time-picker-column-border: var(--gray-700);
|
|
729
729
|
--time-picker-option-text: var(--gray-200);
|
|
730
730
|
--time-picker-option-hover: var(--gray-700);
|
|
@@ -732,6 +732,14 @@
|
|
|
732
732
|
--time-picker-option-selected-bg: var(--color-primary);
|
|
733
733
|
--time-picker-option-selected-text: var(--white);
|
|
734
734
|
--time-picker-option-selected-hover: color-mix(in oklab, var(--color-primary) 75%, var(--gray-800));
|
|
735
|
+
--time-picker-scrollbar-track: var(--gray-700);
|
|
736
|
+
--time-picker-scrollbar-thumb: var(--gray-500);
|
|
737
|
+
--time-picker-scrollbar-thumb-hover: var(--gray-400);
|
|
738
|
+
--time-picker-btn-cancel-text: var(--gray-400);
|
|
739
|
+
--time-picker-btn-cancel-hover: var(--gray-700);
|
|
740
|
+
--time-picker-btn-confirm-bg: var(--color-primary);
|
|
741
|
+
--time-picker-btn-confirm-text: var(--gray-900);
|
|
742
|
+
--time-picker-btn-confirm-hover: color-mix(in oklab, var(--color-primary) 85%, var(--white));
|
|
735
743
|
|
|
736
744
|
/* ==========================================================================
|
|
737
745
|
* SÉMANTIQUES DS TREE
|
|
@@ -795,7 +803,7 @@
|
|
|
795
803
|
* ======================================================================== */
|
|
796
804
|
--transfer-bg: var(--gray-800);
|
|
797
805
|
--transfer-border-color: var(--gray-700);
|
|
798
|
-
--transfer-header-bg: var(--gray-
|
|
806
|
+
--transfer-header-bg: var(--gray-700);
|
|
799
807
|
--transfer-header-border-color: var(--gray-700);
|
|
800
808
|
--transfer-title-color: var(--gray-100);
|
|
801
809
|
--transfer-count-color: var(--gray-400);
|
|
@@ -811,8 +819,8 @@
|
|
|
811
819
|
--transfer-search-clear-color: var(--gray-400);
|
|
812
820
|
--transfer-search-clear-hover: var(--gray-100);
|
|
813
821
|
|
|
814
|
-
--transfer-item-border: var(--gray-
|
|
815
|
-
--transfer-item-hover-bg: var(--gray-
|
|
822
|
+
--transfer-item-border: var(--gray-700);
|
|
823
|
+
--transfer-item-hover-bg: var(--gray-700);
|
|
816
824
|
--transfer-item-selected-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
|
|
817
825
|
--transfer-item-selected-hover-bg: color-mix(in oklab, var(--color-primary) 20%, var(--gray-800));
|
|
818
826
|
--transfer-item-label-color: var(--gray-100);
|
|
@@ -865,7 +873,7 @@
|
|
|
865
873
|
--calendar-bg: var(--gray-800);
|
|
866
874
|
--calendar-border: var(--gray-700);
|
|
867
875
|
|
|
868
|
-
--calendar-header-bg: var(--gray-
|
|
876
|
+
--calendar-header-bg: var(--gray-700);
|
|
869
877
|
|
|
870
878
|
--calendar-nav-btn-border: var(--gray-600);
|
|
871
879
|
--calendar-nav-btn-color: var(--gray-300);
|
|
@@ -889,13 +897,13 @@
|
|
|
889
897
|
--calendar-day-bg: transparent;
|
|
890
898
|
--calendar-day-border: transparent;
|
|
891
899
|
--calendar-day-color: var(--gray-100);
|
|
892
|
-
--calendar-day-hover-bg: var(--gray-
|
|
900
|
+
--calendar-day-hover-bg: var(--gray-700);
|
|
893
901
|
--calendar-day-hover-border: var(--gray-600);
|
|
894
902
|
--calendar-day-other-month-color: var(--gray-600);
|
|
895
903
|
--calendar-day-today-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
|
|
896
904
|
--calendar-day-today-border: var(--color-primary);
|
|
897
905
|
--calendar-day-today-color: var(--color-primary);
|
|
898
|
-
--calendar-day-disabled-bg: var(--gray-
|
|
906
|
+
--calendar-day-disabled-bg: var(--gray-700);
|
|
899
907
|
|
|
900
908
|
--calendar-event-dot-color: var(--gray-500);
|
|
901
909
|
--calendar-event-title-color: var(--gray-300);
|
|
@@ -906,7 +914,7 @@
|
|
|
906
914
|
--calendar-month-bg: transparent;
|
|
907
915
|
--calendar-month-border: var(--gray-700);
|
|
908
916
|
--calendar-month-color: var(--gray-100);
|
|
909
|
-
--calendar-month-hover-bg: var(--gray-
|
|
917
|
+
--calendar-month-hover-bg: var(--gray-700);
|
|
910
918
|
--calendar-month-hover-border: var(--gray-600);
|
|
911
919
|
--calendar-month-current-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
|
|
912
920
|
--calendar-month-current-border: var(--color-primary);
|
|
@@ -928,8 +936,30 @@
|
|
|
928
936
|
|
|
929
937
|
--colorpicker-panel-bg: var(--gray-800);
|
|
930
938
|
--colorpicker-panel-border: var(--gray-700);
|
|
931
|
-
--colorpicker-input-bg: var(--gray-
|
|
939
|
+
--colorpicker-input-bg: var(--gray-700);
|
|
932
940
|
--colorpicker-input-border: var(--gray-700);
|
|
933
941
|
--colorpicker-input-text: var(--gray-100);
|
|
934
942
|
--colorpicker-preset-border: var(--gray-700);
|
|
943
|
+
|
|
944
|
+
/* ==========================================================================
|
|
945
|
+
* SIDEBAR
|
|
946
|
+
* ======================================================================== */
|
|
947
|
+
--sidebar-bg: var(--gray-800);
|
|
948
|
+
--sidebar-border: var(--gray-700);
|
|
949
|
+
--sidebar-text: var(--gray-100);
|
|
950
|
+
--sidebar-icon-color: var(--gray-400);
|
|
951
|
+
--sidebar-item-hover-bg: var(--gray-700);
|
|
952
|
+
--sidebar-item-active-bg: var(--gray-600);
|
|
953
|
+
--sidebar-item-active-text: var(--color-primary);
|
|
954
|
+
--sidebar-item-radius: var(--radius-1-5);
|
|
955
|
+
--sidebar-header-bg: var(--gray-800);
|
|
956
|
+
--sidebar-header-padding: var(--space-4);
|
|
957
|
+
--sidebar-footer-bg: var(--gray-800);
|
|
958
|
+
--sidebar-footer-padding: var(--space-4);
|
|
959
|
+
--sidebar-body-padding: var(--space-2);
|
|
960
|
+
--sidebar-backdrop-bg: rgba(0, 0, 0, 0.7);
|
|
961
|
+
--sidebar-shadow: var(--shadow-3);
|
|
962
|
+
--sidebar-trigger-shadow: var(--shadow-2);
|
|
963
|
+
--sidebar-scrollbar-thumb: var(--gray-600);
|
|
964
|
+
--sidebar-scrollbar-thumb-hover: var(--gray-500);
|
|
935
965
|
}
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
--input-border: var(--border-color);
|
|
188
188
|
--input-hover-border: color-mix(in oklab, var(--border-color) 85%, var(--background-main));
|
|
189
189
|
--input-focus-border: var(--accent);
|
|
190
|
-
--input-focus-shadow: 0 0 0
|
|
190
|
+
--input-focus-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
|
|
191
191
|
--input-icon: var(--text-muted);
|
|
192
192
|
--input-disabled-bg: var(--bg-disabled);
|
|
193
193
|
--input-disabled-text: var(--text-disabled);
|
|
@@ -291,7 +291,7 @@
|
|
|
291
291
|
--checkbox-checked-border: var(--color-primary);
|
|
292
292
|
--checkbox-check-color: var(--gray-50);
|
|
293
293
|
--checkbox-hover-border: color-mix(in oklab, var(--border-color) 85%, var(--background-main));
|
|
294
|
-
--checkbox-focus-ring: 0 0 0
|
|
294
|
+
--checkbox-focus-ring: 0 0 0 2px color-mix(in oklab, var(--color-primary) 20%, transparent);
|
|
295
295
|
--checkbox-disabled-bg: var(--bg-disabled);
|
|
296
296
|
--checkbox-disabled-border: var(--border-disabled);
|
|
297
297
|
--checkbox-disabled-check: var(--text-disabled);
|
|
@@ -307,7 +307,7 @@
|
|
|
307
307
|
--radio-checked-border: var(--color-primary);
|
|
308
308
|
--radio-dot-color: var(--color-primary);
|
|
309
309
|
--radio-hover-border: color-mix(in oklab, var(--border-color) 85%, var(--background-main));
|
|
310
|
-
--radio-focus-ring: 0 0 0
|
|
310
|
+
--radio-focus-ring: 0 0 0 2px color-mix(in oklab, var(--color-primary) 20%, transparent);
|
|
311
311
|
--radio-disabled-bg: var(--bg-disabled);
|
|
312
312
|
--radio-disabled-border: var(--border-disabled);
|
|
313
313
|
--radio-disabled-dot: var(--text-disabled);
|
|
@@ -321,7 +321,7 @@
|
|
|
321
321
|
--toggle-thumb-shadow: var(--shadow-1);
|
|
322
322
|
--toggle-hover-track-bg: color-mix(in oklab, var(--gray-300) 85%, var(--background-main));
|
|
323
323
|
--toggle-hover-track-checked-bg: color-mix(in oklab, var(--color-primary) 90%, var(--background-main));
|
|
324
|
-
--toggle-focus-ring: 0 0 0
|
|
324
|
+
--toggle-focus-ring: 0 0 0 2px color-mix(in oklab, var(--color-primary) 20%, transparent);
|
|
325
325
|
--toggle-disabled-track-bg: var(--bg-disabled);
|
|
326
326
|
--toggle-disabled-thumb-bg: var(--gray-200);
|
|
327
327
|
|
|
@@ -583,8 +583,8 @@
|
|
|
583
583
|
--slider-thumb-border-color: var(--color-primary);
|
|
584
584
|
--slider-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
585
585
|
--slider-thumb-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
586
|
-
--slider-thumb-shadow-focus: 0 0 0
|
|
587
|
-
--slider-thumb-shadow-active: 0 0 0
|
|
586
|
+
--slider-thumb-shadow-focus: 0 0 0 2px color-mix(in oklab, var(--color-primary) 25%, transparent);
|
|
587
|
+
--slider-thumb-shadow-active: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
|
|
588
588
|
--slider-tick-color: var(--gray-400);
|
|
589
589
|
--slider-label-color: var(--text-default);
|
|
590
590
|
--slider-thumb-label-bg: var(--gray-900);
|
|
@@ -722,6 +722,14 @@
|
|
|
722
722
|
--time-picker-option-selected-bg: var(--color-primary);
|
|
723
723
|
--time-picker-option-selected-text: var(--white);
|
|
724
724
|
--time-picker-option-selected-hover: color-mix(in oklab, var(--color-primary) 85%, var(--background-main));
|
|
725
|
+
--time-picker-scrollbar-track: var(--gray-100);
|
|
726
|
+
--time-picker-scrollbar-thumb: var(--gray-400);
|
|
727
|
+
--time-picker-scrollbar-thumb-hover: var(--gray-500);
|
|
728
|
+
--time-picker-btn-cancel-text: var(--gray-600);
|
|
729
|
+
--time-picker-btn-cancel-hover: var(--gray-100);
|
|
730
|
+
--time-picker-btn-confirm-bg: var(--color-primary);
|
|
731
|
+
--time-picker-btn-confirm-text: var(--white);
|
|
732
|
+
--time-picker-btn-confirm-hover: var(--primary-dark);
|
|
725
733
|
|
|
726
734
|
/* ==========================================================================
|
|
727
735
|
* SÉMANTIQUES DS TREE
|
|
@@ -922,4 +930,26 @@
|
|
|
922
930
|
--colorpicker-input-border: var(--border-default);
|
|
923
931
|
--colorpicker-input-text: var(--text-default);
|
|
924
932
|
--colorpicker-preset-border: var(--border-default);
|
|
933
|
+
|
|
934
|
+
/* ==========================================================================
|
|
935
|
+
* SIDEBAR
|
|
936
|
+
* ======================================================================== */
|
|
937
|
+
--sidebar-bg: var(--white);
|
|
938
|
+
--sidebar-border: var(--gray-200);
|
|
939
|
+
--sidebar-text: var(--gray-800);
|
|
940
|
+
--sidebar-icon-color: var(--gray-500);
|
|
941
|
+
--sidebar-item-hover-bg: var(--gray-100);
|
|
942
|
+
--sidebar-item-active-bg: color-mix(in oklab, var(--color-primary) 10%, var(--white));
|
|
943
|
+
--sidebar-item-active-text: var(--color-primary);
|
|
944
|
+
--sidebar-item-radius: var(--radius-1-5);
|
|
945
|
+
--sidebar-header-bg: var(--white);
|
|
946
|
+
--sidebar-header-padding: var(--space-4);
|
|
947
|
+
--sidebar-footer-bg: var(--white);
|
|
948
|
+
--sidebar-footer-padding: var(--space-4);
|
|
949
|
+
--sidebar-body-padding: var(--space-2);
|
|
950
|
+
--sidebar-backdrop-bg: rgba(0, 0, 0, 0.5);
|
|
951
|
+
--sidebar-shadow: var(--shadow-3);
|
|
952
|
+
--sidebar-trigger-shadow: var(--shadow-2);
|
|
953
|
+
--sidebar-scrollbar-thumb: var(--gray-300);
|
|
954
|
+
--sidebar-scrollbar-thumb-hover: var(--gray-400);
|
|
925
955
|
}
|
|
@@ -42,16 +42,16 @@ $gray-900: #171717;
|
|
|
42
42
|
$white: #ffffff;
|
|
43
43
|
$black: #000000;
|
|
44
44
|
|
|
45
|
-
// Couleurs de feedback
|
|
46
|
-
$success: #
|
|
47
|
-
$warning: #
|
|
48
|
-
$error: #
|
|
49
|
-
$info: #
|
|
45
|
+
// Couleurs de feedback (Tailwind-inspired, modern/minimalist)
|
|
46
|
+
$success: #22c55e;
|
|
47
|
+
$warning: #f97316;
|
|
48
|
+
$error: #ef4444;
|
|
49
|
+
$info: #3b82f6;
|
|
50
50
|
|
|
51
|
-
// Couleurs de marque
|
|
52
|
-
$primary: #
|
|
53
|
-
$secondary: #
|
|
54
|
-
$alt: #
|
|
51
|
+
// Couleurs de marque (modern indigo palette)
|
|
52
|
+
$primary: #6366f1;
|
|
53
|
+
$secondary: #f59e0b;
|
|
54
|
+
$alt: #14b8a6;
|
|
55
55
|
|
|
56
56
|
// === SPACING ===
|
|
57
57
|
|
|
@@ -76,11 +76,11 @@ $radius-3: 12px;
|
|
|
76
76
|
$radius-4: 20px;
|
|
77
77
|
$radius-round: 999px;
|
|
78
78
|
|
|
79
|
-
// === SHADOWS ===
|
|
79
|
+
// === SHADOWS (subtle, modern) ===
|
|
80
80
|
|
|
81
|
-
$shadow-1: 0 1px 2px rgba(0,0,0,.
|
|
82
|
-
$shadow-2: 0
|
|
83
|
-
$shadow-3: 0
|
|
81
|
+
$shadow-1: 0 1px 2px rgba(0,0,0,.05);
|
|
82
|
+
$shadow-2: 0 4px 12px rgba(0,0,0,.08);
|
|
83
|
+
$shadow-3: 0 12px 32px rgba(0,0,0,.12);
|
|
84
84
|
|
|
85
85
|
// === Z-INDEX ===
|
|
86
86
|
|
|
@@ -90,15 +90,15 @@ $z-index-3: 300;
|
|
|
90
90
|
$z-index-4: 400;
|
|
91
91
|
$z-index-full: 999;
|
|
92
92
|
|
|
93
|
-
// === ANIMATIONS ===
|
|
93
|
+
// === ANIMATIONS (faster, smoother) ===
|
|
94
94
|
|
|
95
|
-
$duration-fast:
|
|
96
|
-
$duration-normal:
|
|
97
|
-
$duration-slow:
|
|
95
|
+
$duration-fast: 120ms;
|
|
96
|
+
$duration-normal: 200ms;
|
|
97
|
+
$duration-slow: 400ms;
|
|
98
98
|
|
|
99
|
-
$easing-default:
|
|
100
|
-
$easing-in:
|
|
101
|
-
$easing-out:
|
|
99
|
+
$easing-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
100
|
+
$easing-in: cubic-bezier(0.4, 0, 1, 1);
|
|
101
|
+
$easing-out: cubic-bezier(0, 0, 0.2, 1);
|
|
102
102
|
|
|
103
103
|
// === TYPOGRAPHY ===
|
|
104
104
|
|
|
@@ -909,3 +909,22 @@ $notification-title-size: $font-size-3;
|
|
|
909
909
|
$notification-title-weight: 600;
|
|
910
910
|
|
|
911
911
|
$notification-message-size: $font-size-2;
|
|
912
|
+
|
|
913
|
+
// === SIDEBAR ===
|
|
914
|
+
|
|
915
|
+
$sidebar-width-sm: 200px;
|
|
916
|
+
$sidebar-width-md: 240px;
|
|
917
|
+
$sidebar-width-lg: 280px;
|
|
918
|
+
$sidebar-width-collapsed: 64px;
|
|
919
|
+
|
|
920
|
+
$sidebar-item-height: 44px;
|
|
921
|
+
$sidebar-item-padding: $space-2 $space-4;
|
|
922
|
+
$sidebar-item-radius: $radius-1-5;
|
|
923
|
+
$sidebar-nested-indent: 20px;
|
|
924
|
+
|
|
925
|
+
$sidebar-badge-size: 20px;
|
|
926
|
+
|
|
927
|
+
$sidebar-transition-duration: 200ms;
|
|
928
|
+
|
|
929
|
+
$sidebar-header-padding: $space-4;
|
|
930
|
+
$sidebar-footer-padding: $space-4;
|
|
@@ -19,18 +19,18 @@
|
|
|
19
19
|
|
|
20
20
|
/* === CUSTOM THEME PLACEHOLDERS === */
|
|
21
21
|
--custom-bg: #ffffff;
|
|
22
|
-
--custom-bg-secondary: #
|
|
23
|
-
--custom-bg-header: #
|
|
24
|
-
--custom-text-default: #
|
|
25
|
-
--custom-text-muted: #
|
|
26
|
-
--custom-text-disabled: #
|
|
27
|
-
--custom-text-disabled-alt: #
|
|
28
|
-
--custom-text-subtle: #
|
|
29
|
-
--custom-border: #
|
|
30
|
-
--custom-border-subtle: #
|
|
31
|
-
--custom-border-strong: #
|
|
32
|
-
--custom-accent-primary: #
|
|
33
|
-
--custom-accent-secondary: #
|
|
22
|
+
--custom-bg-secondary: #f8fafc;
|
|
23
|
+
--custom-bg-header: #f1f5f9;
|
|
24
|
+
--custom-text-default: #0f172a;
|
|
25
|
+
--custom-text-muted: #475569;
|
|
26
|
+
--custom-text-disabled: #94a3b8;
|
|
27
|
+
--custom-text-disabled-alt: #cbd5e1;
|
|
28
|
+
--custom-text-subtle: #64748b;
|
|
29
|
+
--custom-border: #e2e8f0;
|
|
30
|
+
--custom-border-subtle: #f1f5f9;
|
|
31
|
+
--custom-border-strong: #cbd5e1;
|
|
32
|
+
--custom-accent-primary: #6366f1;
|
|
33
|
+
--custom-accent-secondary: #f59e0b;
|
|
34
34
|
|
|
35
35
|
/* === TYPOGRAPHY === */
|
|
36
36
|
--font-family-base: #{$font-family-base};
|
|
@@ -124,12 +124,12 @@
|
|
|
124
124
|
--focus-color: var(--color-secondary);
|
|
125
125
|
|
|
126
126
|
/* === RGB VALUES (for rgba() with custom opacity) === */
|
|
127
|
-
--color-primary-rgb:
|
|
128
|
-
--color-secondary-rgb:
|
|
129
|
-
--success-rgb:
|
|
130
|
-
--warning-rgb:
|
|
131
|
-
--error-rgb:
|
|
132
|
-
--info-rgb:
|
|
127
|
+
--color-primary-rgb: 99, 102, 241;
|
|
128
|
+
--color-secondary-rgb: 245, 158, 11;
|
|
129
|
+
--success-rgb: 34, 197, 94;
|
|
130
|
+
--warning-rgb: 249, 115, 22;
|
|
131
|
+
--error-rgb: 239, 68, 68;
|
|
132
|
+
--info-rgb: 59, 130, 246;
|
|
133
133
|
--black-rgb: 0, 0, 0;
|
|
134
134
|
--white-rgb: 255, 255, 255;
|
|
135
135
|
|
|
@@ -890,6 +890,20 @@
|
|
|
890
890
|
--segmented-segment-gap: #{$segmented-segment-gap};
|
|
891
891
|
--segmented-border-radius: #{$segmented-border-radius};
|
|
892
892
|
--segmented-active-shadow: #{$segmented-active-shadow};
|
|
893
|
+
|
|
894
|
+
/* === SIDEBAR === */
|
|
895
|
+
--sidebar-width-sm: #{$sidebar-width-sm};
|
|
896
|
+
--sidebar-width-md: #{$sidebar-width-md};
|
|
897
|
+
--sidebar-width-lg: #{$sidebar-width-lg};
|
|
898
|
+
--sidebar-width-collapsed: #{$sidebar-width-collapsed};
|
|
899
|
+
--sidebar-item-height: #{$sidebar-item-height};
|
|
900
|
+
--sidebar-item-padding: #{$sidebar-item-padding};
|
|
901
|
+
--sidebar-item-radius: #{$sidebar-item-radius};
|
|
902
|
+
--sidebar-nested-indent: #{$sidebar-nested-indent};
|
|
903
|
+
--sidebar-badge-size: #{$sidebar-badge-size};
|
|
904
|
+
--sidebar-transition-duration: #{$sidebar-transition-duration};
|
|
905
|
+
--sidebar-header-padding: #{$sidebar-header-padding};
|
|
906
|
+
--sidebar-footer-padding: #{$sidebar-footer-padding};
|
|
893
907
|
}
|
|
894
908
|
|
|
895
909
|
/* === ACCESSIBILITY: REDUCED MOTION === */
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
// ============================================================================
|
|
2
|
-
// DS-ANGULAR — Storybook Global Styles
|
|
3
|
-
// ============================================================================
|
|
4
|
-
//
|
|
5
|
-
// Ce fichier importe tous les styles nécessaires pour Storybook.
|
|
6
|
-
// Il est référencé dans angular.json pour les targets storybook.
|
|
7
|
-
//
|
|
8
|
-
// ============================================================================
|
|
9
|
-
|
|
10
|
-
// Import des tokens (variables CSS sur :root)
|
|
11
|
-
@use './tokens/tokens';
|
|
12
|
-
|
|
13
|
-
// Import des thèmes (variables sur :root.theme-light et :root.theme-dark)
|
|
14
|
-
@use './themes/light';
|
|
15
|
-
@use './themes/dark';
|
|
16
|
-
@use './themes/custom';
|
|
17
|
-
|
|
18
|
-
:root,
|
|
19
|
-
body {
|
|
20
|
-
font-size: var(--font-size-m, 1rem);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
:root[data-typography='small'],
|
|
24
|
-
body[data-typography='small'] {
|
|
25
|
-
font-size: var(--font-size-s, 0.875rem);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
:root[data-typography='large'],
|
|
29
|
-
body[data-typography='large'] {
|
|
30
|
-
font-size: var(--font-size-l, 1.5rem);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
:root[data-density='compact'],
|
|
34
|
-
body[data-density='compact'] {
|
|
35
|
-
--btn-height-md: var(--btn-height-sm);
|
|
36
|
-
--input-height-md: var(--input-height-sm);
|
|
37
|
-
--space-4: var(--space-3);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
:root[data-density='comfortable'],
|
|
41
|
-
body[data-density='comfortable'] {
|
|
42
|
-
--btn-height-md: var(--btn-height-lg);
|
|
43
|
-
--input-height-md: var(--input-height-lg);
|
|
44
|
-
--space-4: var(--space-6);
|
|
45
|
-
}
|