@salesmind-ai/design-system 0.1.9 → 0.1.10

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/dist/index.css CHANGED
@@ -3221,6 +3221,11 @@
3221
3221
  color: var(--text-primary);
3222
3222
  line-height: var(--line-height-normal);
3223
3223
  }
3224
+ .ds-command__input:focus,
3225
+ .ds-command__input:focus-visible {
3226
+ outline: none;
3227
+ box-shadow: none;
3228
+ }
3224
3229
  .ds-command__input::placeholder {
3225
3230
  color: var(--text-secondary);
3226
3231
  }
@@ -3773,12 +3778,152 @@
3773
3778
  .ds-grid {
3774
3779
  display: grid;
3775
3780
  }
3781
+ .ds-grid--cols-1 {
3782
+ grid-template-columns: repeat(1, 1fr);
3783
+ }
3784
+ .ds-grid--cols-2 {
3785
+ grid-template-columns: repeat(1, 1fr);
3786
+ }
3787
+ @media (min-width: 640px) {
3788
+ .ds-grid--cols-2 {
3789
+ grid-template-columns: repeat(2, 1fr);
3790
+ }
3791
+ }
3792
+ .ds-grid--cols-3 {
3793
+ grid-template-columns: repeat(1, 1fr);
3794
+ }
3795
+ @media (min-width: 640px) {
3796
+ .ds-grid--cols-3 {
3797
+ grid-template-columns: repeat(2, 1fr);
3798
+ }
3799
+ }
3800
+ @media (min-width: 1024px) {
3801
+ .ds-grid--cols-3 {
3802
+ grid-template-columns: repeat(3, 1fr);
3803
+ }
3804
+ }
3805
+ .ds-grid--cols-4 {
3806
+ grid-template-columns: repeat(1, 1fr);
3807
+ }
3808
+ @media (min-width: 640px) {
3809
+ .ds-grid--cols-4 {
3810
+ grid-template-columns: repeat(2, 1fr);
3811
+ }
3812
+ }
3813
+ @media (min-width: 1024px) {
3814
+ .ds-grid--cols-4 {
3815
+ grid-template-columns: repeat(4, 1fr);
3816
+ }
3817
+ }
3818
+ .ds-grid--cols-5 {
3819
+ grid-template-columns: repeat(1, 1fr);
3820
+ }
3821
+ @media (min-width: 640px) {
3822
+ .ds-grid--cols-5 {
3823
+ grid-template-columns: repeat(2, 1fr);
3824
+ }
3825
+ }
3826
+ @media (min-width: 768px) {
3827
+ .ds-grid--cols-5 {
3828
+ grid-template-columns: repeat(3, 1fr);
3829
+ }
3830
+ }
3831
+ @media (min-width: 1280px) {
3832
+ .ds-grid--cols-5 {
3833
+ grid-template-columns: repeat(5, 1fr);
3834
+ }
3835
+ }
3836
+ .ds-grid--cols-6 {
3837
+ grid-template-columns: repeat(1, 1fr);
3838
+ }
3839
+ @media (min-width: 640px) {
3840
+ .ds-grid--cols-6 {
3841
+ grid-template-columns: repeat(2, 1fr);
3842
+ }
3843
+ }
3844
+ @media (min-width: 768px) {
3845
+ .ds-grid--cols-6 {
3846
+ grid-template-columns: repeat(3, 1fr);
3847
+ }
3848
+ }
3849
+ @media (min-width: 1280px) {
3850
+ .ds-grid--cols-6 {
3851
+ grid-template-columns: repeat(6, 1fr);
3852
+ }
3853
+ }
3854
+ @media (min-width: 1920px) {
3855
+ .ds-grid--cols-3:not(.ds-grid--fixed) {
3856
+ grid-template-columns: repeat(4, 1fr);
3857
+ }
3858
+ }
3859
+ @media (min-width: 2560px) {
3860
+ .ds-grid--cols-2:not(.ds-grid--fixed) {
3861
+ grid-template-columns: repeat(3, 1fr);
3862
+ }
3863
+ .ds-grid--cols-3:not(.ds-grid--fixed) {
3864
+ grid-template-columns: repeat(4, 1fr);
3865
+ }
3866
+ .ds-grid--cols-4:not(.ds-grid--fixed) {
3867
+ grid-template-columns: repeat(5, 1fr);
3868
+ }
3869
+ .ds-grid--cols-5:not(.ds-grid--fixed) {
3870
+ grid-template-columns: repeat(6, 1fr);
3871
+ }
3872
+ .ds-grid--cols-6:not(.ds-grid--fixed) {
3873
+ grid-template-columns: repeat(8, 1fr);
3874
+ }
3875
+ }
3876
+ @media (min-width: 3840px) {
3877
+ .ds-grid--cols-2:not(.ds-grid--fixed) {
3878
+ grid-template-columns: repeat(3, 1fr);
3879
+ }
3880
+ .ds-grid--cols-3:not(.ds-grid--fixed) {
3881
+ grid-template-columns: repeat(5, 1fr);
3882
+ }
3883
+ .ds-grid--cols-4:not(.ds-grid--fixed) {
3884
+ grid-template-columns: repeat(6, 1fr);
3885
+ }
3886
+ .ds-grid--cols-5:not(.ds-grid--fixed) {
3887
+ grid-template-columns: repeat(8, 1fr);
3888
+ }
3889
+ .ds-grid--cols-6:not(.ds-grid--fixed) {
3890
+ grid-template-columns: repeat(10, 1fr);
3891
+ }
3892
+ }
3893
+ :root {
3894
+ --container-default-max: 1200px;
3895
+ }
3896
+ @media (min-width: 1537px) {
3897
+ :root {
3898
+ --container-default-max: 1400px;
3899
+ }
3900
+ }
3901
+ @media (min-width: 1921px) {
3902
+ :root {
3903
+ --container-default-max: 1600px;
3904
+ }
3905
+ }
3906
+ @media (min-width: 2561px) {
3907
+ :root {
3908
+ --container-default-max: 1920px;
3909
+ }
3910
+ }
3776
3911
  .ds-container {
3777
3912
  width: 100%;
3778
3913
  margin-left: auto;
3779
3914
  margin-right: auto;
3780
- padding-left: var(--space-4);
3781
- padding-right: var(--space-4);
3915
+ padding-left: var(--container-padding-x, var(--space-4));
3916
+ padding-right: var(--container-padding-x, var(--space-4));
3917
+ }
3918
+ @media (min-width: 1537px) {
3919
+ .ds-container {
3920
+ --container-padding-x: var(--space-6);
3921
+ }
3922
+ }
3923
+ @media (min-width: 2561px) {
3924
+ .ds-container {
3925
+ --container-padding-x: var(--space-8);
3926
+ }
3782
3927
  }
3783
3928
  .ds-section-block {
3784
3929
  position: relative;
@@ -4606,6 +4751,51 @@
4606
4751
  gap: var(--space-2);
4607
4752
  }
4608
4753
  }
4754
+ @media (min-width: 1920px) {
4755
+ .ds-navbar-v2__container {
4756
+ padding: var(--space-3) var(--space-8);
4757
+ }
4758
+ .ds-navbar-v2__tabs {
4759
+ gap: var(--space-2);
4760
+ padding: var(--space-3);
4761
+ }
4762
+ .ds-navbar-v2__tab {
4763
+ padding: var(--space-3) var(--space-5);
4764
+ min-width: 72px;
4765
+ }
4766
+ .ds-navbar-v2__actions {
4767
+ gap: var(--space-4);
4768
+ }
4769
+ .ds-navbar-v2__mega-panel {
4770
+ padding: var(--space-8);
4771
+ min-width: 320px;
4772
+ }
4773
+ }
4774
+ @media (min-width: 2560px) {
4775
+ .ds-navbar-v2__container {
4776
+ padding: var(--space-4) var(--space-10);
4777
+ }
4778
+ .ds-navbar-v2__tabs {
4779
+ gap: var(--space-3);
4780
+ padding: var(--space-4);
4781
+ }
4782
+ .ds-navbar-v2__tab {
4783
+ padding: var(--space-4) var(--space-6);
4784
+ min-width: 80px;
4785
+ font-size: var(--font-size-sm);
4786
+ }
4787
+ .ds-navbar-v2__tab-icon {
4788
+ width: 1.75rem;
4789
+ height: 1.75rem;
4790
+ }
4791
+ .ds-navbar-v2__actions {
4792
+ gap: var(--space-5);
4793
+ }
4794
+ .ds-navbar-v2__mega-panel {
4795
+ padding: var(--space-10);
4796
+ min-width: 360px;
4797
+ }
4798
+ }
4609
4799
  @media (max-width: 767px) {
4610
4800
  .ds-navbar-v2 {
4611
4801
  padding: 0;
@@ -4806,6 +4996,55 @@
4806
4996
  font-size: var(--font-size-2xl);
4807
4997
  }
4808
4998
  }
4999
+ @media (min-width: 1920px) {
5000
+ .ds-section {
5001
+ padding: var(--space-20) 0;
5002
+ }
5003
+ .ds-section--padding-sm {
5004
+ padding: var(--space-10) 0;
5005
+ }
5006
+ .ds-section--padding-md {
5007
+ padding: var(--space-20) 0;
5008
+ }
5009
+ .ds-section--padding-lg {
5010
+ padding: calc(var(--space-20) * 1.25) 0;
5011
+ }
5012
+ .ds-section-header {
5013
+ margin-bottom: var(--space-16);
5014
+ }
5015
+ .ds-section-header__title {
5016
+ font-size: var(--font-size-4xl);
5017
+ }
5018
+ }
5019
+ @media (min-width: 2560px) {
5020
+ .ds-section {
5021
+ padding: calc(var(--space-20) * 1.5) 0;
5022
+ }
5023
+ .ds-section--padding-lg {
5024
+ padding: calc(var(--space-20) * 1.75) 0;
5025
+ }
5026
+ .ds-section-header {
5027
+ margin-bottom: var(--space-20);
5028
+ gap: var(--space-6);
5029
+ }
5030
+ .ds-section-header__title {
5031
+ font-size: var(--font-size-5xl);
5032
+ }
5033
+ .ds-section-header__subtitle {
5034
+ font-size: var(--font-size-xl);
5035
+ }
5036
+ }
5037
+ @media (min-width: 3840px) {
5038
+ .ds-section {
5039
+ padding: calc(var(--space-20) * 2) 0;
5040
+ }
5041
+ .ds-section--padding-lg {
5042
+ padding: calc(var(--space-20) * 2.5) 0;
5043
+ }
5044
+ .ds-section-header__title {
5045
+ font-size: var(--font-size-6xl);
5046
+ }
5047
+ }
4809
5048
 
4810
5049
  /* src/components/HeroSection/HeroSection.css */
4811
5050
  .ds-hero {
@@ -5000,6 +5239,42 @@
5000
5239
  align-items: flex-start;
5001
5240
  text-align: left;
5002
5241
  }
5242
+ @media (min-width: 1920px) {
5243
+ .ds-hero__content {
5244
+ gap: var(--space-8);
5245
+ }
5246
+ .ds-hero__subtitle {
5247
+ font-size: var(--font-size-xl);
5248
+ max-width: 65ch;
5249
+ }
5250
+ .ds-hero__actions {
5251
+ gap: var(--space-5);
5252
+ margin-top: var(--space-6);
5253
+ }
5254
+ .ds-hero--center .ds-hero__content {
5255
+ max-width: 1000px;
5256
+ margin-bottom: var(--space-20);
5257
+ }
5258
+ }
5259
+ @media (min-width: 2560px) {
5260
+ .ds-hero__content {
5261
+ gap: var(--space-10);
5262
+ }
5263
+ .ds-hero__subtitle {
5264
+ font-size: var(--font-size-2xl);
5265
+ max-width: 70ch;
5266
+ }
5267
+ .ds-hero__actions {
5268
+ gap: var(--space-6);
5269
+ margin-top: var(--space-8);
5270
+ }
5271
+ .ds-hero--center .ds-hero__content {
5272
+ max-width: 1100px;
5273
+ }
5274
+ .ds-hero__float {
5275
+ max-width: 400px;
5276
+ }
5277
+ }
5003
5278
 
5004
5279
  /* src/components/FeatureSection/FeatureSection.css */
5005
5280
  .ds-feature-section {
@@ -5279,6 +5554,41 @@
5279
5554
  gap: var(--space-10);
5280
5555
  }
5281
5556
  }
5557
+ @media (min-width: 1920px) {
5558
+ .ds-footer__grid {
5559
+ gap: var(--space-12);
5560
+ }
5561
+ .ds-footer__cta {
5562
+ padding: var(--space-20) 0 var(--space-16);
5563
+ }
5564
+ .ds-footer__cta-content {
5565
+ max-width: 720px;
5566
+ }
5567
+ .ds-footer__nav {
5568
+ padding: var(--space-16) 0;
5569
+ }
5570
+ }
5571
+ @media (min-width: 2560px) {
5572
+ .ds-footer__grid {
5573
+ gap: var(--space-16);
5574
+ }
5575
+ .ds-footer__cta {
5576
+ padding: var(--space-20) 0 var(--space-20);
5577
+ }
5578
+ .ds-footer__cta-headline {
5579
+ font-size: var(--font-size-4xl);
5580
+ }
5581
+ .ds-footer__cta-content {
5582
+ max-width: 800px;
5583
+ gap: var(--space-6);
5584
+ }
5585
+ .ds-footer__nav {
5586
+ padding: var(--space-20) 0;
5587
+ }
5588
+ .ds-footer__authority {
5589
+ padding: var(--space-10) 0;
5590
+ }
5591
+ }
5282
5592
  .ds-footer__mobile-nav {
5283
5593
  display: block;
5284
5594
  }
@@ -5560,6 +5870,51 @@
5560
5870
  outline-offset: 2px;
5561
5871
  border-radius: 2px;
5562
5872
  }
5873
+ .ds-footer__bottom-extra {
5874
+ display: flex;
5875
+ align-items: center;
5876
+ justify-content: center;
5877
+ gap: var(--space-4);
5878
+ flex-wrap: wrap;
5879
+ margin-top: var(--space-4);
5880
+ padding-top: var(--space-4);
5881
+ border-top: 1px solid var(--rim-light-bottom, rgba(255 255 255 / 0.06));
5882
+ }
5883
+ .ds-footer__bottom-extra-label {
5884
+ font-family: var(--font-family);
5885
+ font-size: var(--font-size-xs);
5886
+ color: var(--text-tertiary);
5887
+ white-space: nowrap;
5888
+ }
5889
+ .ds-footer__bottom-extra-icons {
5890
+ display: flex;
5891
+ align-items: center;
5892
+ gap: var(--space-2);
5893
+ }
5894
+ .ds-footer__ai-icon {
5895
+ display: inline-flex;
5896
+ align-items: center;
5897
+ justify-content: center;
5898
+ width: 28px;
5899
+ height: 28px;
5900
+ border-radius: var(--radius-full, 9999px);
5901
+ background: var(--bg-tertiary, rgba(255 255 255 / 0.06));
5902
+ color: var(--text-tertiary);
5903
+ transition: color var(--transition-fast), background var(--transition-fast);
5904
+ text-decoration: none;
5905
+ }
5906
+ .ds-footer__ai-icon:hover {
5907
+ color: var(--text-primary);
5908
+ background: var(--bg-secondary, rgba(255 255 255 / 0.1));
5909
+ }
5910
+ .ds-footer__ai-icon:focus-visible {
5911
+ outline: 2px solid var(--color-accent, currentColor);
5912
+ outline-offset: 2px;
5913
+ }
5914
+ .ds-footer__ai-icon svg {
5915
+ width: 16px;
5916
+ height: 16px;
5917
+ }
5563
5918
  .ds-footer__company-info {
5564
5919
  font-family: var(--font-family);
5565
5920
  font-size: var(--font-size-xs);
@@ -11845,6 +12200,65 @@
11845
12200
  letter-spacing: var(--letter-spacing-wide);
11846
12201
  color: var(--text-tertiary);
11847
12202
  }
12203
+ @media (max-width: 767px) {
12204
+ .ds-comparison-table__scroll {
12205
+ overflow-x: visible;
12206
+ }
12207
+ .ds-comparison-table__table {
12208
+ table-layout: auto;
12209
+ }
12210
+ .ds-comparison-table__head {
12211
+ display: none;
12212
+ }
12213
+ .ds-comparison-table__body {
12214
+ display: flex;
12215
+ flex-direction: column;
12216
+ gap: var(--space-4);
12217
+ padding: var(--space-4);
12218
+ }
12219
+ .ds-comparison-table__row {
12220
+ display: flex;
12221
+ flex-direction: column;
12222
+ gap: var(--space-2);
12223
+ padding: var(--space-4);
12224
+ border: 1px solid var(--glass-base-hover);
12225
+ border-radius: var(--radius-button);
12226
+ border-bottom: 1px solid var(--glass-base-hover);
12227
+ }
12228
+ .ds-comparison-table__row-label {
12229
+ padding: 0;
12230
+ font-weight: var(--font-weight-semibold);
12231
+ color: var(--text-primary);
12232
+ white-space: normal;
12233
+ font-size: var(--font-size-sm);
12234
+ }
12235
+ .ds-comparison-table__cell {
12236
+ padding: var(--space-1) 0;
12237
+ text-align: left;
12238
+ display: flex;
12239
+ justify-content: space-between;
12240
+ align-items: center;
12241
+ }
12242
+ .ds-comparison-table__category-row {
12243
+ padding: var(--space-2) var(--space-4) 0;
12244
+ border-bottom: none;
12245
+ }
12246
+ .ds-comparison-table__category {
12247
+ padding: 0;
12248
+ }
12249
+ }
12250
+ @media (min-width: 1920px) {
12251
+ .ds-comparison-table__corner,
12252
+ .ds-comparison-table__col-header {
12253
+ padding: var(--space-8) var(--space-6);
12254
+ }
12255
+ .ds-comparison-table__row-label {
12256
+ padding: var(--space-5) var(--space-8);
12257
+ }
12258
+ .ds-comparison-table__cell {
12259
+ padding: var(--space-5) var(--space-6);
12260
+ }
12261
+ }
11848
12262
  @media (prefers-contrast: more) {
11849
12263
  .ds-comparison-table {
11850
12264
  background: var(--hc-surface);