kedhar-ui 0.2.1 → 0.3.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.
Files changed (9) hide show
  1. package/dist/kedhar-ui-amber.css +217 -3
  2. package/dist/kedhar-ui-emerald.css +217 -3
  3. package/dist/kedhar-ui-indigo.css +217 -3
  4. package/dist/kedhar-ui-slate.css +217 -3
  5. package/dist/kedhar-ui.css +217 -3
  6. package/package.json +1 -1
  7. package/src/styles/base.css +15 -1
  8. package/src/styles/components.css +201 -2
  9. package/src/styles/tokens.css +1 -0
package/dist/kedhar-ui-indigo.css CHANGED
@@ -44,6 +44,7 @@
44
44
  --ks-leading-tight: 1.25;
45
45
  --ks-leading-normal: 1.5;
46
46
  --ks-leading-relaxed: 1.625;
47
+ --ks-leading-body: 1.7;
47
48
 
48
49
  --ks-weight-normal: 400;
49
50
  --ks-weight-medium: 500;
@@ -110,7 +111,7 @@ body {
110
111
  padding: 0;
111
112
  font-family: var(--ks-font-sans);
112
113
  font-size: var(--ks-text-base);
113
- line-height: var(--ks-leading-normal);
114
+ line-height: var(--ks-leading-body);
114
115
  color: var(--ks-color-text);
115
116
  background-color: var(--ks-color-bg);
116
117
  -webkit-font-smoothing: antialiased;
@@ -131,6 +132,20 @@ a:hover {
131
132
  color: var(--ks-color-primary-hover);
132
133
  }
133
134
 
135
+ /* Underline animation for inline links */
136
+ .ks-link-underline {
137
+ background-image: linear-gradient(var(--ks-color-primary), var(--ks-color-primary));
138
+ background-size: 0% 2px;
139
+ background-repeat: no-repeat;
140
+ background-position: left bottom;
141
+ transition: background-size var(--ks-duration-normal) var(--ks-ease-out);
142
+ padding-bottom: 2px;
143
+ }
144
+
145
+ .ks-link-underline:hover {
146
+ background-size: 100% 2px;
147
+ }
148
+
134
149
  /* ─── Images ───────────────────────────────────────────────── */
135
150
  img {
136
151
  max-width: 100%;
@@ -381,6 +396,7 @@ pre {
381
396
  border: 1px solid var(--ks-color-border);
382
397
  border-radius: var(--ks-radius-lg);
383
398
  padding: var(--ks-space-6);
399
+ box-shadow: var(--ks-shadow-sm);
384
400
  transition:
385
401
  box-shadow var(--ks-duration-normal) var(--ks-ease-out),
386
402
  border-color var(--ks-duration-normal) var(--ks-ease-out),
@@ -389,8 +405,8 @@ pre {
389
405
 
390
406
  .ks-card-hover:hover {
391
407
  border-color: var(--ks-color-primary-alpha);
392
- box-shadow: var(--ks-shadow-md);
393
- transform: translateY(-2px);
408
+ box-shadow: var(--ks-shadow-lg);
409
+ transform: translateY(-3px);
394
410
  }
395
411
 
396
412
 
@@ -734,6 +750,204 @@ pre {
734
750
  border: 0;
735
751
  }
736
752
 
753
+
754
+ /* ══════════════════════════════════════════════════════════════
755
+ 11. Reveal Animations
756
+ ══════════════════════════════════════════════════════════════
757
+ Scroll-triggered reveal via IntersectionObserver + .visible class.
758
+ ══════════════════════════════════════════════════════════════ */
759
+ .ks-reveal {
760
+ opacity: 0;
761
+ transform: translateY(24px);
762
+ transition:
763
+ opacity var(--ks-duration-slow) var(--ks-ease-out),
764
+ transform var(--ks-duration-slow) var(--ks-ease-out);
765
+ }
766
+
767
+ .ks-reveal-up {
768
+ opacity: 0;
769
+ transform: translateY(40px);
770
+ transition:
771
+ opacity var(--ks-duration-slow) var(--ks-ease-out),
772
+ transform var(--ks-duration-slow) var(--ks-ease-out);
773
+ }
774
+
775
+ .ks-reveal.visible,
776
+ .ks-reveal-up.visible {
777
+ opacity: 1;
778
+ transform: translateY(0);
779
+ }
780
+
781
+ /* Stagger children */
782
+ .ks-stagger > * {
783
+ opacity: 0;
784
+ transform: translateY(20px);
785
+ transition:
786
+ opacity var(--ks-duration-slow) var(--ks-ease-out),
787
+ transform var(--ks-duration-slow) var(--ks-ease-out);
788
+ }
789
+
790
+ .ks-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
791
+ .ks-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
792
+ .ks-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
793
+ .ks-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
794
+ .ks-stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
795
+ .ks-stagger.visible > *:nth-child(6) { transition-delay: 400ms; }
796
+ .ks-stagger.visible > *:nth-child(7) { transition-delay: 480ms; }
797
+ .ks-stagger.visible > *:nth-child(8) { transition-delay: 560ms; }
798
+ .ks-stagger.visible > *:nth-child(9) { transition-delay: 640ms; }
799
+ .ks-stagger.visible > *:nth-child(10) { transition-delay: 720ms; }
800
+
801
+ .ks-stagger.visible > * {
802
+ opacity: 1;
803
+ transform: translateY(0);
804
+ }
805
+
806
+
807
+ /* ══════════════════════════════════════════════════════════════
808
+ 12. Hero Section
809
+ ══════════════════════════════════════════════════════════════ */
810
+ .ks-hero {
811
+ min-height: 70vh;
812
+ display: flex;
813
+ align-items: center;
814
+ justify-content: center;
815
+ text-align: center;
816
+ padding: var(--ks-space-16) var(--ks-space-4);
817
+ position: relative;
818
+ overflow: hidden;
819
+ }
820
+
821
+ .ks-hero-gradient {
822
+ position: absolute;
823
+ inset: 0;
824
+ pointer-events: none;
825
+ z-index: 0;
826
+ }
827
+
828
+ .ks-hero-gradient::before {
829
+ content: '';
830
+ position: absolute;
831
+ top: -50%;
832
+ left: -50%;
833
+ width: 200%;
834
+ height: 200%;
835
+ background: radial-gradient(ellipse at 30% 50%, var(--ks-color-primary-alpha) 0%, transparent 60%),
836
+ radial-gradient(ellipse at 70% 50%, var(--ks-color-primary-light) 0%, transparent 50%);
837
+ opacity: 0.6;
838
+ }
839
+
840
+ .dark .ks-hero-gradient::before {
841
+ opacity: 0.3;
842
+ }
843
+
844
+ .ks-hero-content {
845
+ position: relative;
846
+ z-index: 1;
847
+ max-width: 720px;
848
+ }
849
+
850
+ .ks-hero-badge {
851
+ display: inline-flex;
852
+ align-items: center;
853
+ gap: var(--ks-space-1);
854
+ padding: var(--ks-space-1) var(--ks-space-3);
855
+ border-radius: var(--ks-radius-full);
856
+ font-size: var(--ks-text-sm);
857
+ font-weight: var(--ks-weight-medium);
858
+ color: var(--ks-color-primary);
859
+ background: var(--ks-color-primary-alpha);
860
+ margin-bottom: var(--ks-space-4);
861
+ }
862
+
863
+ .ks-hero h1 {
864
+ font-size: clamp(2rem, 5vw, 3.5rem);
865
+ font-weight: var(--ks-weight-bold);
866
+ letter-spacing: -0.03em;
867
+ line-height: 1.1;
868
+ color: var(--ks-color-text);
869
+ margin: 0 0 var(--ks-space-4);
870
+ }
871
+
872
+ .ks-hero p {
873
+ font-size: clamp(1rem, 2vw, 1.2rem);
874
+ color: var(--ks-color-text-muted);
875
+ line-height: var(--ks-leading-relaxed);
876
+ max-width: 560px;
877
+ margin: 0 auto var(--ks-space-8);
878
+ }
879
+
880
+ .ks-hero-actions {
881
+ display: flex;
882
+ gap: var(--ks-space-3);
883
+ justify-content: center;
884
+ flex-wrap: wrap;
885
+ }
886
+
887
+
888
+ /* ══════════════════════════════════════════════════════════════
889
+ 13. Section Header
890
+ ══════════════════════════════════════════════════════════════ */
891
+ .ks-section-header {
892
+ text-align: center;
893
+ margin-bottom: var(--ks-space-10);
894
+ }
895
+
896
+ .ks-section-header h2 {
897
+ font-size: var(--ks-text-3xl);
898
+ font-weight: var(--ks-weight-bold);
899
+ color: var(--ks-color-text);
900
+ letter-spacing: -0.02em;
901
+ margin: 0 0 var(--ks-space-2);
902
+ }
903
+
904
+ @media (min-width: 640px) {
905
+ .ks-section-header h2 {
906
+ font-size: var(--ks-text-4xl);
907
+ }
908
+ }
909
+
910
+ .ks-section-header p {
911
+ color: var(--ks-color-text-muted);
912
+ max-width: 480px;
913
+ margin: 0 auto;
914
+ }
915
+
916
+ .ks-section-divider {
917
+ width: 48px;
918
+ height: 3px;
919
+ border-radius: var(--ks-radius-full);
920
+ background: var(--ks-color-primary);
921
+ margin: var(--ks-space-3) auto 0;
922
+ }
923
+
924
+
925
+ /* ══════════════════════════════════════════════════════════════
926
+ 14. Button Active State
927
+ ══════════════════════════════════════════════════════════════ */
928
+ .ks-btn:active {
929
+ transform: scale(0.97);
930
+ }
931
+
932
+
933
+ /* ══════════════════════════════════════════════════════════════
934
+ 15. Nav Link Active Indicator
935
+ ══════════════════════════════════════════════════════════════ */
936
+ .ks-nav-links a.active,
937
+ .ks-nav-links a[aria-current="page"] {
938
+ color: var(--ks-color-text);
939
+ }
940
+
941
+ .ks-nav-links a.active::after,
942
+ .ks-nav-links a[aria-current="page"]::after {
943
+ content: '';
944
+ display: block;
945
+ height: 2px;
946
+ border-radius: var(--ks-radius-full);
947
+ background: var(--ks-color-primary);
948
+ margin-top: 2px;
949
+ }
950
+
737
951
  /* ══════════════════════════════════════════════════════════════
738
952
  Theme: Indigo — Portfolio site
739
953
  ══════════════════════════════════════════════════════════════ */
package/dist/kedhar-ui-slate.css CHANGED
@@ -44,6 +44,7 @@
44
44
  --ks-leading-tight: 1.25;
45
45
  --ks-leading-normal: 1.5;
46
46
  --ks-leading-relaxed: 1.625;
47
+ --ks-leading-body: 1.7;
47
48
 
48
49
  --ks-weight-normal: 400;
49
50
  --ks-weight-medium: 500;
@@ -110,7 +111,7 @@ body {
110
111
  padding: 0;
111
112
  font-family: var(--ks-font-sans);
112
113
  font-size: var(--ks-text-base);
113
- line-height: var(--ks-leading-normal);
114
+ line-height: var(--ks-leading-body);
114
115
  color: var(--ks-color-text);
115
116
  background-color: var(--ks-color-bg);
116
117
  -webkit-font-smoothing: antialiased;
@@ -131,6 +132,20 @@ a:hover {
131
132
  color: var(--ks-color-primary-hover);
132
133
  }
133
134
 
135
+ /* Underline animation for inline links */
136
+ .ks-link-underline {
137
+ background-image: linear-gradient(var(--ks-color-primary), var(--ks-color-primary));
138
+ background-size: 0% 2px;
139
+ background-repeat: no-repeat;
140
+ background-position: left bottom;
141
+ transition: background-size var(--ks-duration-normal) var(--ks-ease-out);
142
+ padding-bottom: 2px;
143
+ }
144
+
145
+ .ks-link-underline:hover {
146
+ background-size: 100% 2px;
147
+ }
148
+
134
149
  /* ─── Images ───────────────────────────────────────────────── */
135
150
  img {
136
151
  max-width: 100%;
@@ -381,6 +396,7 @@ pre {
381
396
  border: 1px solid var(--ks-color-border);
382
397
  border-radius: var(--ks-radius-lg);
383
398
  padding: var(--ks-space-6);
399
+ box-shadow: var(--ks-shadow-sm);
384
400
  transition:
385
401
  box-shadow var(--ks-duration-normal) var(--ks-ease-out),
386
402
  border-color var(--ks-duration-normal) var(--ks-ease-out),
@@ -389,8 +405,8 @@ pre {
389
405
 
390
406
  .ks-card-hover:hover {
391
407
  border-color: var(--ks-color-primary-alpha);
392
- box-shadow: var(--ks-shadow-md);
393
- transform: translateY(-2px);
408
+ box-shadow: var(--ks-shadow-lg);
409
+ transform: translateY(-3px);
394
410
  }
395
411
 
396
412
 
@@ -734,6 +750,204 @@ pre {
734
750
  border: 0;
735
751
  }
736
752
 
753
+
754
+ /* ══════════════════════════════════════════════════════════════
755
+ 11. Reveal Animations
756
+ ══════════════════════════════════════════════════════════════
757
+ Scroll-triggered reveal via IntersectionObserver + .visible class.
758
+ ══════════════════════════════════════════════════════════════ */
759
+ .ks-reveal {
760
+ opacity: 0;
761
+ transform: translateY(24px);
762
+ transition:
763
+ opacity var(--ks-duration-slow) var(--ks-ease-out),
764
+ transform var(--ks-duration-slow) var(--ks-ease-out);
765
+ }
766
+
767
+ .ks-reveal-up {
768
+ opacity: 0;
769
+ transform: translateY(40px);
770
+ transition:
771
+ opacity var(--ks-duration-slow) var(--ks-ease-out),
772
+ transform var(--ks-duration-slow) var(--ks-ease-out);
773
+ }
774
+
775
+ .ks-reveal.visible,
776
+ .ks-reveal-up.visible {
777
+ opacity: 1;
778
+ transform: translateY(0);
779
+ }
780
+
781
+ /* Stagger children */
782
+ .ks-stagger > * {
783
+ opacity: 0;
784
+ transform: translateY(20px);
785
+ transition:
786
+ opacity var(--ks-duration-slow) var(--ks-ease-out),
787
+ transform var(--ks-duration-slow) var(--ks-ease-out);
788
+ }
789
+
790
+ .ks-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
791
+ .ks-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
792
+ .ks-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
793
+ .ks-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
794
+ .ks-stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
795
+ .ks-stagger.visible > *:nth-child(6) { transition-delay: 400ms; }
796
+ .ks-stagger.visible > *:nth-child(7) { transition-delay: 480ms; }
797
+ .ks-stagger.visible > *:nth-child(8) { transition-delay: 560ms; }
798
+ .ks-stagger.visible > *:nth-child(9) { transition-delay: 640ms; }
799
+ .ks-stagger.visible > *:nth-child(10) { transition-delay: 720ms; }
800
+
801
+ .ks-stagger.visible > * {
802
+ opacity: 1;
803
+ transform: translateY(0);
804
+ }
805
+
806
+
807
+ /* ══════════════════════════════════════════════════════════════
808
+ 12. Hero Section
809
+ ══════════════════════════════════════════════════════════════ */
810
+ .ks-hero {
811
+ min-height: 70vh;
812
+ display: flex;
813
+ align-items: center;
814
+ justify-content: center;
815
+ text-align: center;
816
+ padding: var(--ks-space-16) var(--ks-space-4);
817
+ position: relative;
818
+ overflow: hidden;
819
+ }
820
+
821
+ .ks-hero-gradient {
822
+ position: absolute;
823
+ inset: 0;
824
+ pointer-events: none;
825
+ z-index: 0;
826
+ }
827
+
828
+ .ks-hero-gradient::before {
829
+ content: '';
830
+ position: absolute;
831
+ top: -50%;
832
+ left: -50%;
833
+ width: 200%;
834
+ height: 200%;
835
+ background: radial-gradient(ellipse at 30% 50%, var(--ks-color-primary-alpha) 0%, transparent 60%),
836
+ radial-gradient(ellipse at 70% 50%, var(--ks-color-primary-light) 0%, transparent 50%);
837
+ opacity: 0.6;
838
+ }
839
+
840
+ .dark .ks-hero-gradient::before {
841
+ opacity: 0.3;
842
+ }
843
+
844
+ .ks-hero-content {
845
+ position: relative;
846
+ z-index: 1;
847
+ max-width: 720px;
848
+ }
849
+
850
+ .ks-hero-badge {
851
+ display: inline-flex;
852
+ align-items: center;
853
+ gap: var(--ks-space-1);
854
+ padding: var(--ks-space-1) var(--ks-space-3);
855
+ border-radius: var(--ks-radius-full);
856
+ font-size: var(--ks-text-sm);
857
+ font-weight: var(--ks-weight-medium);
858
+ color: var(--ks-color-primary);
859
+ background: var(--ks-color-primary-alpha);
860
+ margin-bottom: var(--ks-space-4);
861
+ }
862
+
863
+ .ks-hero h1 {
864
+ font-size: clamp(2rem, 5vw, 3.5rem);
865
+ font-weight: var(--ks-weight-bold);
866
+ letter-spacing: -0.03em;
867
+ line-height: 1.1;
868
+ color: var(--ks-color-text);
869
+ margin: 0 0 var(--ks-space-4);
870
+ }
871
+
872
+ .ks-hero p {
873
+ font-size: clamp(1rem, 2vw, 1.2rem);
874
+ color: var(--ks-color-text-muted);
875
+ line-height: var(--ks-leading-relaxed);
876
+ max-width: 560px;
877
+ margin: 0 auto var(--ks-space-8);
878
+ }
879
+
880
+ .ks-hero-actions {
881
+ display: flex;
882
+ gap: var(--ks-space-3);
883
+ justify-content: center;
884
+ flex-wrap: wrap;
885
+ }
886
+
887
+
888
+ /* ══════════════════════════════════════════════════════════════
889
+ 13. Section Header
890
+ ══════════════════════════════════════════════════════════════ */
891
+ .ks-section-header {
892
+ text-align: center;
893
+ margin-bottom: var(--ks-space-10);
894
+ }
895
+
896
+ .ks-section-header h2 {
897
+ font-size: var(--ks-text-3xl);
898
+ font-weight: var(--ks-weight-bold);
899
+ color: var(--ks-color-text);
900
+ letter-spacing: -0.02em;
901
+ margin: 0 0 var(--ks-space-2);
902
+ }
903
+
904
+ @media (min-width: 640px) {
905
+ .ks-section-header h2 {
906
+ font-size: var(--ks-text-4xl);
907
+ }
908
+ }
909
+
910
+ .ks-section-header p {
911
+ color: var(--ks-color-text-muted);
912
+ max-width: 480px;
913
+ margin: 0 auto;
914
+ }
915
+
916
+ .ks-section-divider {
917
+ width: 48px;
918
+ height: 3px;
919
+ border-radius: var(--ks-radius-full);
920
+ background: var(--ks-color-primary);
921
+ margin: var(--ks-space-3) auto 0;
922
+ }
923
+
924
+
925
+ /* ══════════════════════════════════════════════════════════════
926
+ 14. Button Active State
927
+ ══════════════════════════════════════════════════════════════ */
928
+ .ks-btn:active {
929
+ transform: scale(0.97);
930
+ }
931
+
932
+
933
+ /* ══════════════════════════════════════════════════════════════
934
+ 15. Nav Link Active Indicator
935
+ ══════════════════════════════════════════════════════════════ */
936
+ .ks-nav-links a.active,
937
+ .ks-nav-links a[aria-current="page"] {
938
+ color: var(--ks-color-text);
939
+ }
940
+
941
+ .ks-nav-links a.active::after,
942
+ .ks-nav-links a[aria-current="page"]::after {
943
+ content: '';
944
+ display: block;
945
+ height: 2px;
946
+ border-radius: var(--ks-radius-full);
947
+ background: var(--ks-color-primary);
948
+ margin-top: 2px;
949
+ }
950
+
737
951
  /* ══════════════════════════════════════════════════════════════
738
952
  Theme: Slate — mssql-scripts site (neutral / technical)
739
953
  ══════════════════════════════════════════════════════════════ */