@kksdev/ds-angular 1.5.0 → 1.7.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/fesm2022/kksdev-ds-angular.mjs +4295 -212
- package/fesm2022/kksdev-ds-angular.mjs.map +1 -1
- package/index.d.ts +1854 -115
- package/package.json +2 -2
- package/src/styles/storybook.scss +13 -0
- package/src/styles/themes/_custom.scss +101 -0
- package/src/styles/themes/_dark.scss +82 -11
- package/src/styles/themes/_light.scss +77 -6
- package/src/styles/tokens/_primitives.scss +20 -20
- package/src/styles/tokens/_semantic.scss +92 -0
- package/src/styles/tokens/_tokens.scss +93 -18
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.0",
|
|
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",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
// ============================================================================
|
|
9
9
|
|
|
10
10
|
// Import des tokens (variables CSS sur :root)
|
|
11
|
+
// Note: @use doit toujours être en premier en SCSS
|
|
11
12
|
@use './tokens/tokens';
|
|
12
13
|
|
|
13
14
|
// Import des thèmes (variables sur :root.theme-light et :root.theme-dark)
|
|
@@ -15,6 +16,9 @@
|
|
|
15
16
|
@use './themes/dark';
|
|
16
17
|
@use './themes/custom';
|
|
17
18
|
|
|
19
|
+
// Import des styles CDK Overlay (nécessaire pour modal, dropdown, tooltip, etc.)
|
|
20
|
+
@import '@angular/cdk/overlay-prebuilt.css';
|
|
21
|
+
|
|
18
22
|
:root,
|
|
19
23
|
body {
|
|
20
24
|
font-size: var(--font-size-m, 1rem);
|
|
@@ -43,3 +47,12 @@ body[data-density='comfortable'] {
|
|
|
43
47
|
--input-height-md: var(--input-height-lg);
|
|
44
48
|
--space-4: var(--space-6);
|
|
45
49
|
}
|
|
50
|
+
|
|
51
|
+
// ============================================================================
|
|
52
|
+
// CDK Overlay Panel Classes
|
|
53
|
+
// ============================================================================
|
|
54
|
+
// Ces styles sont globaux car les overlays CDK sont rendus au niveau du document
|
|
55
|
+
|
|
56
|
+
.ds-time-picker-panel-overlay {
|
|
57
|
+
z-index: 1000;
|
|
58
|
+
}
|
|
@@ -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 */
|
|
@@ -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
|
* ======================================================================== */
|
|
@@ -688,8 +708,8 @@
|
|
|
688
708
|
--drawer-bg: var(--gray-800);
|
|
689
709
|
--drawer-border: var(--gray-700);
|
|
690
710
|
--drawer-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
|
|
691
|
-
--drawer-header-bg: var(--gray-
|
|
692
|
-
--drawer-footer-bg: var(--gray-
|
|
711
|
+
--drawer-header-bg: var(--gray-700);
|
|
712
|
+
--drawer-footer-bg: var(--gray-700);
|
|
693
713
|
--drawer-title-color: var(--gray-100);
|
|
694
714
|
--drawer-body-color: var(--gray-200);
|
|
695
715
|
--drawer-close-color: var(--gray-400);
|
|
@@ -704,7 +724,7 @@
|
|
|
704
724
|
* ======================================================================== */
|
|
705
725
|
--time-picker-panel-bg: var(--gray-800);
|
|
706
726
|
--time-picker-panel-border: var(--gray-700);
|
|
707
|
-
--time-picker-column-bg: var(--gray-
|
|
727
|
+
--time-picker-column-bg: var(--gray-700);
|
|
708
728
|
--time-picker-column-border: var(--gray-700);
|
|
709
729
|
--time-picker-option-text: var(--gray-200);
|
|
710
730
|
--time-picker-option-hover: var(--gray-700);
|
|
@@ -712,6 +732,14 @@
|
|
|
712
732
|
--time-picker-option-selected-bg: var(--color-primary);
|
|
713
733
|
--time-picker-option-selected-text: var(--white);
|
|
714
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));
|
|
715
743
|
|
|
716
744
|
/* ==========================================================================
|
|
717
745
|
* SÉMANTIQUES DS TREE
|
|
@@ -775,7 +803,7 @@
|
|
|
775
803
|
* ======================================================================== */
|
|
776
804
|
--transfer-bg: var(--gray-800);
|
|
777
805
|
--transfer-border-color: var(--gray-700);
|
|
778
|
-
--transfer-header-bg: var(--gray-
|
|
806
|
+
--transfer-header-bg: var(--gray-700);
|
|
779
807
|
--transfer-header-border-color: var(--gray-700);
|
|
780
808
|
--transfer-title-color: var(--gray-100);
|
|
781
809
|
--transfer-count-color: var(--gray-400);
|
|
@@ -791,8 +819,8 @@
|
|
|
791
819
|
--transfer-search-clear-color: var(--gray-400);
|
|
792
820
|
--transfer-search-clear-hover: var(--gray-100);
|
|
793
821
|
|
|
794
|
-
--transfer-item-border: var(--gray-
|
|
795
|
-
--transfer-item-hover-bg: var(--gray-
|
|
822
|
+
--transfer-item-border: var(--gray-700);
|
|
823
|
+
--transfer-item-hover-bg: var(--gray-700);
|
|
796
824
|
--transfer-item-selected-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
|
|
797
825
|
--transfer-item-selected-hover-bg: color-mix(in oklab, var(--color-primary) 20%, var(--gray-800));
|
|
798
826
|
--transfer-item-label-color: var(--gray-100);
|
|
@@ -845,7 +873,7 @@
|
|
|
845
873
|
--calendar-bg: var(--gray-800);
|
|
846
874
|
--calendar-border: var(--gray-700);
|
|
847
875
|
|
|
848
|
-
--calendar-header-bg: var(--gray-
|
|
876
|
+
--calendar-header-bg: var(--gray-700);
|
|
849
877
|
|
|
850
878
|
--calendar-nav-btn-border: var(--gray-600);
|
|
851
879
|
--calendar-nav-btn-color: var(--gray-300);
|
|
@@ -869,13 +897,13 @@
|
|
|
869
897
|
--calendar-day-bg: transparent;
|
|
870
898
|
--calendar-day-border: transparent;
|
|
871
899
|
--calendar-day-color: var(--gray-100);
|
|
872
|
-
--calendar-day-hover-bg: var(--gray-
|
|
900
|
+
--calendar-day-hover-bg: var(--gray-700);
|
|
873
901
|
--calendar-day-hover-border: var(--gray-600);
|
|
874
902
|
--calendar-day-other-month-color: var(--gray-600);
|
|
875
903
|
--calendar-day-today-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
|
|
876
904
|
--calendar-day-today-border: var(--color-primary);
|
|
877
905
|
--calendar-day-today-color: var(--color-primary);
|
|
878
|
-
--calendar-day-disabled-bg: var(--gray-
|
|
906
|
+
--calendar-day-disabled-bg: var(--gray-700);
|
|
879
907
|
|
|
880
908
|
--calendar-event-dot-color: var(--gray-500);
|
|
881
909
|
--calendar-event-title-color: var(--gray-300);
|
|
@@ -886,9 +914,52 @@
|
|
|
886
914
|
--calendar-month-bg: transparent;
|
|
887
915
|
--calendar-month-border: var(--gray-700);
|
|
888
916
|
--calendar-month-color: var(--gray-100);
|
|
889
|
-
--calendar-month-hover-bg: var(--gray-
|
|
917
|
+
--calendar-month-hover-bg: var(--gray-700);
|
|
890
918
|
--calendar-month-hover-border: var(--gray-600);
|
|
891
919
|
--calendar-month-current-bg: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
|
|
892
920
|
--calendar-month-current-border: var(--color-primary);
|
|
893
921
|
--calendar-month-current-color: var(--color-primary);
|
|
922
|
+
|
|
923
|
+
/* ==========================================================================
|
|
924
|
+
* SÉMANTIQUES DS COLOR PICKER
|
|
925
|
+
* ======================================================================== */
|
|
926
|
+
--colorpicker-bg: var(--gray-800);
|
|
927
|
+
--colorpicker-border: var(--gray-700);
|
|
928
|
+
--colorpicker-border-hover: var(--gray-600);
|
|
929
|
+
--colorpicker-text: var(--gray-100);
|
|
930
|
+
--colorpicker-placeholder: var(--gray-500);
|
|
931
|
+
--colorpicker-icon: var(--gray-400);
|
|
932
|
+
--colorpicker-clear-icon: var(--gray-400);
|
|
933
|
+
--colorpicker-preview-border: var(--gray-700);
|
|
934
|
+
--colorpicker-action-hover-bg: var(--gray-700);
|
|
935
|
+
--colorpicker-focus-shadow: color-mix(in oklab, var(--color-primary) 25%, transparent);
|
|
936
|
+
|
|
937
|
+
--colorpicker-panel-bg: var(--gray-800);
|
|
938
|
+
--colorpicker-panel-border: var(--gray-700);
|
|
939
|
+
--colorpicker-input-bg: var(--gray-700);
|
|
940
|
+
--colorpicker-input-border: var(--gray-700);
|
|
941
|
+
--colorpicker-input-text: var(--gray-100);
|
|
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);
|
|
894
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);
|
|
@@ -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);
|
|
@@ -702,6 +722,14 @@
|
|
|
702
722
|
--time-picker-option-selected-bg: var(--color-primary);
|
|
703
723
|
--time-picker-option-selected-text: var(--white);
|
|
704
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);
|
|
705
733
|
|
|
706
734
|
/* ==========================================================================
|
|
707
735
|
* SÉMANTIQUES DS TREE
|
|
@@ -881,4 +909,47 @@
|
|
|
881
909
|
--calendar-month-current-bg: var(--blue-50);
|
|
882
910
|
--calendar-month-current-border: var(--color-primary);
|
|
883
911
|
--calendar-month-current-color: var(--color-primary);
|
|
912
|
+
|
|
913
|
+
/* ==========================================================================
|
|
914
|
+
* SÉMANTIQUES DS COLOR PICKER
|
|
915
|
+
* ======================================================================== */
|
|
916
|
+
--colorpicker-bg: var(--background-main);
|
|
917
|
+
--colorpicker-border: var(--border-default);
|
|
918
|
+
--colorpicker-border-hover: var(--border-strong);
|
|
919
|
+
--colorpicker-text: var(--text-default);
|
|
920
|
+
--colorpicker-placeholder: var(--text-muted);
|
|
921
|
+
--colorpicker-icon: var(--text-muted);
|
|
922
|
+
--colorpicker-clear-icon: var(--text-muted);
|
|
923
|
+
--colorpicker-preview-border: var(--border-default);
|
|
924
|
+
--colorpicker-action-hover-bg: var(--surface-hover);
|
|
925
|
+
--colorpicker-focus-shadow: color-mix(in oklab, var(--color-primary) 25%, transparent);
|
|
926
|
+
|
|
927
|
+
--colorpicker-panel-bg: var(--background-main);
|
|
928
|
+
--colorpicker-panel-border: var(--border-default);
|
|
929
|
+
--colorpicker-input-bg: var(--background-main);
|
|
930
|
+
--colorpicker-input-border: var(--border-default);
|
|
931
|
+
--colorpicker-input-text: var(--text-default);
|
|
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);
|
|
884
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
|
|
|
@@ -448,6 +448,41 @@ $datepicker-nav-size-sm: 24px;
|
|
|
448
448
|
$datepicker-nav-size-md: 32px;
|
|
449
449
|
$datepicker-nav-size-lg: 40px;
|
|
450
450
|
|
|
451
|
+
// === COLOR PICKER ===
|
|
452
|
+
|
|
453
|
+
$colorpicker-height-sm: 32px;
|
|
454
|
+
$colorpicker-height-md: 40px;
|
|
455
|
+
$colorpicker-height-lg: 48px;
|
|
456
|
+
|
|
457
|
+
$colorpicker-padding-sm: $space-1 $space-2;
|
|
458
|
+
$colorpicker-padding-md: $space-2;
|
|
459
|
+
$colorpicker-padding-lg: $space-3;
|
|
460
|
+
|
|
461
|
+
$colorpicker-font-size-sm: $font-size-2;
|
|
462
|
+
$colorpicker-font-size-md: $font-size-3;
|
|
463
|
+
$colorpicker-font-size-lg: $font-size-4;
|
|
464
|
+
|
|
465
|
+
$colorpicker-preview-size-sm: 20px;
|
|
466
|
+
$colorpicker-preview-size-md: 28px;
|
|
467
|
+
$colorpicker-preview-size-lg: 36px;
|
|
468
|
+
|
|
469
|
+
$colorpicker-action-size-sm: 20px;
|
|
470
|
+
$colorpicker-action-size-md: 24px;
|
|
471
|
+
$colorpicker-action-size-lg: 28px;
|
|
472
|
+
|
|
473
|
+
$colorpicker-gap: $space-2;
|
|
474
|
+
$colorpicker-radius: $radius-2;
|
|
475
|
+
|
|
476
|
+
$colorpicker-panel-width: 300px;
|
|
477
|
+
$colorpicker-panel-padding: $space-4;
|
|
478
|
+
$colorpicker-panel-gap: $space-3;
|
|
479
|
+
$colorpicker-panel-radius: $radius-2;
|
|
480
|
+
$colorpicker-panel-shadow: $shadow-3;
|
|
481
|
+
|
|
482
|
+
$colorpicker-spectrum-height: 180px;
|
|
483
|
+
$colorpicker-slider-height: 12px;
|
|
484
|
+
$colorpicker-preset-size: 28px;
|
|
485
|
+
|
|
451
486
|
// === SLIDER ===
|
|
452
487
|
|
|
453
488
|
$slider-track-height-sm: 4px;
|
|
@@ -498,6 +533,21 @@ $file-upload-padding-sm: $space-6;
|
|
|
498
533
|
$file-upload-padding-md: $space-8;
|
|
499
534
|
$file-upload-padding-lg: $space-10;
|
|
500
535
|
|
|
536
|
+
// === INPUT NUMBER ===
|
|
537
|
+
|
|
538
|
+
$input-number-height-sm: 32px;
|
|
539
|
+
$input-number-height-md: 40px;
|
|
540
|
+
$input-number-height-lg: 48px;
|
|
541
|
+
|
|
542
|
+
$input-number-btn-size-sm: 28px;
|
|
543
|
+
$input-number-btn-size-md: 36px;
|
|
544
|
+
$input-number-btn-size-lg: 44px;
|
|
545
|
+
|
|
546
|
+
$input-number-btn-bg: $gray-100;
|
|
547
|
+
$input-number-btn-hover: $gray-200;
|
|
548
|
+
$input-number-btn-active: $gray-300;
|
|
549
|
+
$input-number-btn-disabled: $gray-50;
|
|
550
|
+
|
|
501
551
|
$file-upload-radius: $radius-2;
|
|
502
552
|
$file-upload-file-radius: $radius-2;
|
|
503
553
|
|
|
@@ -645,6 +695,29 @@ $password-strength-bar-radius: $radius-1;
|
|
|
645
695
|
$password-strength-label-font-size: $font-size-2;
|
|
646
696
|
$password-strength-label-gap: $space-2;
|
|
647
697
|
|
|
698
|
+
// === SEGMENTED CONTROL ===
|
|
699
|
+
|
|
700
|
+
$segmented-height-sm: 32px;
|
|
701
|
+
$segmented-height-md: 40px;
|
|
702
|
+
$segmented-height-lg: 48px;
|
|
703
|
+
|
|
704
|
+
$segmented-padding-sm: $space-2;
|
|
705
|
+
$segmented-padding-md: $space-3;
|
|
706
|
+
$segmented-padding-lg: $space-4;
|
|
707
|
+
|
|
708
|
+
$segmented-font-size-sm: $font-size-2;
|
|
709
|
+
$segmented-font-size-md: $font-size-3;
|
|
710
|
+
$segmented-font-size-lg: $font-size-4;
|
|
711
|
+
|
|
712
|
+
$segmented-icon-size-sm: 14px;
|
|
713
|
+
$segmented-icon-size-md: 16px;
|
|
714
|
+
$segmented-icon-size-lg: 18px;
|
|
715
|
+
|
|
716
|
+
$segmented-gap: 4px;
|
|
717
|
+
$segmented-segment-gap: $space-2;
|
|
718
|
+
$segmented-border-radius: $radius-2;
|
|
719
|
+
$segmented-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
720
|
+
|
|
648
721
|
// === TIMELINE ===
|
|
649
722
|
|
|
650
723
|
$timeline-dot-size-sm: 20px;
|
|
@@ -836,3 +909,22 @@ $notification-title-size: $font-size-3;
|
|
|
836
909
|
$notification-title-weight: 600;
|
|
837
910
|
|
|
838
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;
|