@takeoff-design/tokens 0.1.0-beta.0 → 0.1.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 (7) hide show
  1. package/dist/css/ajet/theme.css +16 -6
  2. package/dist/css/aviation/theme.css +16 -6
  3. package/dist/css/default/theme.css +16 -6
  4. package/dist/css/sarp/theme.css +16 -6
  5. package/dist/css/technology/theme.css +16 -6
  6. package/dist/scss/_components.scss +16 -6
  7. package/package.json +1 -1
package/dist/css/ajet/theme.css CHANGED
@@ -4678,15 +4678,20 @@ body {
4678
4678
  overflow-y: auto;
4679
4679
  padding: 0.25rem;
4680
4680
  border: 1px solid var(--border-light);
4681
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
4681
+ border-radius: var(--radius-m-base, 0.5rem);
4682
4682
  background-color: var(--static-light);
4683
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
4683
+ box-shadow: 0 8px 20px 0 rgba(82, 88, 102, 0.04), 0 6px 12px -2px rgba(82, 88, 102, 0.04), 0 2px 2px -1px rgba(82, 88, 102, 0.04);
4684
4684
  outline: none;
4685
4685
  }
4686
4686
  .tk-select-content[data-size=large] {
4687
4687
  font-size: var(--desktop-body-m-base-size);
4688
4688
  line-height: var(--desktop-body-m-base-line-height);
4689
4689
  }
4690
+ .tk-select-content[data-size=large] .tk-select-item {
4691
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
4692
+ gap: var(--dropdown-items-basic-large-gap);
4693
+ border-radius: var(--dropdown-items-basic-large-radius);
4694
+ }
4690
4695
  .tk-select-content[data-size=base] {
4691
4696
  font-size: var(--desktop-body-s-size);
4692
4697
  line-height: var(--desktop-body-s-line-height);
@@ -4695,20 +4700,25 @@ body {
4695
4700
  font-size: var(--desktop-body-xs-size);
4696
4701
  line-height: var(--desktop-body-xs-line-height);
4697
4702
  }
4703
+ .tk-select-content[data-size=small] .tk-select-item {
4704
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
4705
+ gap: var(--dropdown-items-basic-small-gap);
4706
+ border-radius: var(--dropdown-items-basic-small-radius);
4707
+ }
4698
4708
 
4699
4709
  .tk-select-item {
4700
4710
  display: flex;
4701
4711
  align-items: center;
4702
- gap: 0.5rem;
4703
- padding: 0.375rem 0.5rem;
4704
- border-radius: 0.25rem;
4705
4712
  color: var(--text-darkest);
4706
4713
  cursor: pointer;
4707
4714
  user-select: none;
4708
4715
  outline: none;
4716
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
4717
+ gap: var(--dropdown-items-basic-base-gap);
4718
+ border-radius: var(--dropdown-items-basic-base-radius);
4709
4719
  }
4710
4720
  .tk-select-item[data-highlighted] {
4711
- background-color: var(--background-light);
4721
+ background-color: var(--background-lightest);
4712
4722
  }
4713
4723
  .tk-select-item[data-state=checked] {
4714
4724
  color: var(--states-info-base);
package/dist/css/aviation/theme.css CHANGED
@@ -4678,15 +4678,20 @@ body {
4678
4678
  overflow-y: auto;
4679
4679
  padding: 0.25rem;
4680
4680
  border: 1px solid var(--border-light);
4681
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
4681
+ border-radius: var(--radius-m-base, 0.5rem);
4682
4682
  background-color: var(--static-light);
4683
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
4683
+ box-shadow: 0 8px 20px 0 rgba(82, 88, 102, 0.04), 0 6px 12px -2px rgba(82, 88, 102, 0.04), 0 2px 2px -1px rgba(82, 88, 102, 0.04);
4684
4684
  outline: none;
4685
4685
  }
4686
4686
  .tk-select-content[data-size=large] {
4687
4687
  font-size: var(--desktop-body-m-base-size);
4688
4688
  line-height: var(--desktop-body-m-base-line-height);
4689
4689
  }
4690
+ .tk-select-content[data-size=large] .tk-select-item {
4691
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
4692
+ gap: var(--dropdown-items-basic-large-gap);
4693
+ border-radius: var(--dropdown-items-basic-large-radius);
4694
+ }
4690
4695
  .tk-select-content[data-size=base] {
4691
4696
  font-size: var(--desktop-body-s-size);
4692
4697
  line-height: var(--desktop-body-s-line-height);
@@ -4695,20 +4700,25 @@ body {
4695
4700
  font-size: var(--desktop-body-xs-size);
4696
4701
  line-height: var(--desktop-body-xs-line-height);
4697
4702
  }
4703
+ .tk-select-content[data-size=small] .tk-select-item {
4704
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
4705
+ gap: var(--dropdown-items-basic-small-gap);
4706
+ border-radius: var(--dropdown-items-basic-small-radius);
4707
+ }
4698
4708
 
4699
4709
  .tk-select-item {
4700
4710
  display: flex;
4701
4711
  align-items: center;
4702
- gap: 0.5rem;
4703
- padding: 0.375rem 0.5rem;
4704
- border-radius: 0.25rem;
4705
4712
  color: var(--text-darkest);
4706
4713
  cursor: pointer;
4707
4714
  user-select: none;
4708
4715
  outline: none;
4716
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
4717
+ gap: var(--dropdown-items-basic-base-gap);
4718
+ border-radius: var(--dropdown-items-basic-base-radius);
4709
4719
  }
4710
4720
  .tk-select-item[data-highlighted] {
4711
- background-color: var(--background-light);
4721
+ background-color: var(--background-lightest);
4712
4722
  }
4713
4723
  .tk-select-item[data-state=checked] {
4714
4724
  color: var(--states-info-base);
package/dist/css/default/theme.css CHANGED
@@ -4678,15 +4678,20 @@ body {
4678
4678
  overflow-y: auto;
4679
4679
  padding: 0.25rem;
4680
4680
  border: 1px solid var(--border-light);
4681
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
4681
+ border-radius: var(--radius-m-base, 0.5rem);
4682
4682
  background-color: var(--static-light);
4683
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
4683
+ box-shadow: 0 8px 20px 0 rgba(82, 88, 102, 0.04), 0 6px 12px -2px rgba(82, 88, 102, 0.04), 0 2px 2px -1px rgba(82, 88, 102, 0.04);
4684
4684
  outline: none;
4685
4685
  }
4686
4686
  .tk-select-content[data-size=large] {
4687
4687
  font-size: var(--desktop-body-m-base-size);
4688
4688
  line-height: var(--desktop-body-m-base-line-height);
4689
4689
  }
4690
+ .tk-select-content[data-size=large] .tk-select-item {
4691
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
4692
+ gap: var(--dropdown-items-basic-large-gap);
4693
+ border-radius: var(--dropdown-items-basic-large-radius);
4694
+ }
4690
4695
  .tk-select-content[data-size=base] {
4691
4696
  font-size: var(--desktop-body-s-size);
4692
4697
  line-height: var(--desktop-body-s-line-height);
@@ -4695,20 +4700,25 @@ body {
4695
4700
  font-size: var(--desktop-body-xs-size);
4696
4701
  line-height: var(--desktop-body-xs-line-height);
4697
4702
  }
4703
+ .tk-select-content[data-size=small] .tk-select-item {
4704
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
4705
+ gap: var(--dropdown-items-basic-small-gap);
4706
+ border-radius: var(--dropdown-items-basic-small-radius);
4707
+ }
4698
4708
 
4699
4709
  .tk-select-item {
4700
4710
  display: flex;
4701
4711
  align-items: center;
4702
- gap: 0.5rem;
4703
- padding: 0.375rem 0.5rem;
4704
- border-radius: 0.25rem;
4705
4712
  color: var(--text-darkest);
4706
4713
  cursor: pointer;
4707
4714
  user-select: none;
4708
4715
  outline: none;
4716
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
4717
+ gap: var(--dropdown-items-basic-base-gap);
4718
+ border-radius: var(--dropdown-items-basic-base-radius);
4709
4719
  }
4710
4720
  .tk-select-item[data-highlighted] {
4711
- background-color: var(--background-light);
4721
+ background-color: var(--background-lightest);
4712
4722
  }
4713
4723
  .tk-select-item[data-state=checked] {
4714
4724
  color: var(--states-info-base);
package/dist/css/sarp/theme.css CHANGED
@@ -4678,15 +4678,20 @@ body {
4678
4678
  overflow-y: auto;
4679
4679
  padding: 0.25rem;
4680
4680
  border: 1px solid var(--border-light);
4681
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
4681
+ border-radius: var(--radius-m-base, 0.5rem);
4682
4682
  background-color: var(--static-light);
4683
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
4683
+ box-shadow: 0 8px 20px 0 rgba(82, 88, 102, 0.04), 0 6px 12px -2px rgba(82, 88, 102, 0.04), 0 2px 2px -1px rgba(82, 88, 102, 0.04);
4684
4684
  outline: none;
4685
4685
  }
4686
4686
  .tk-select-content[data-size=large] {
4687
4687
  font-size: var(--desktop-body-m-base-size);
4688
4688
  line-height: var(--desktop-body-m-base-line-height);
4689
4689
  }
4690
+ .tk-select-content[data-size=large] .tk-select-item {
4691
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
4692
+ gap: var(--dropdown-items-basic-large-gap);
4693
+ border-radius: var(--dropdown-items-basic-large-radius);
4694
+ }
4690
4695
  .tk-select-content[data-size=base] {
4691
4696
  font-size: var(--desktop-body-s-size);
4692
4697
  line-height: var(--desktop-body-s-line-height);
@@ -4695,20 +4700,25 @@ body {
4695
4700
  font-size: var(--desktop-body-xs-size);
4696
4701
  line-height: var(--desktop-body-xs-line-height);
4697
4702
  }
4703
+ .tk-select-content[data-size=small] .tk-select-item {
4704
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
4705
+ gap: var(--dropdown-items-basic-small-gap);
4706
+ border-radius: var(--dropdown-items-basic-small-radius);
4707
+ }
4698
4708
 
4699
4709
  .tk-select-item {
4700
4710
  display: flex;
4701
4711
  align-items: center;
4702
- gap: 0.5rem;
4703
- padding: 0.375rem 0.5rem;
4704
- border-radius: 0.25rem;
4705
4712
  color: var(--text-darkest);
4706
4713
  cursor: pointer;
4707
4714
  user-select: none;
4708
4715
  outline: none;
4716
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
4717
+ gap: var(--dropdown-items-basic-base-gap);
4718
+ border-radius: var(--dropdown-items-basic-base-radius);
4709
4719
  }
4710
4720
  .tk-select-item[data-highlighted] {
4711
- background-color: var(--background-light);
4721
+ background-color: var(--background-lightest);
4712
4722
  }
4713
4723
  .tk-select-item[data-state=checked] {
4714
4724
  color: var(--states-info-base);
package/dist/css/technology/theme.css CHANGED
@@ -4678,15 +4678,20 @@ body {
4678
4678
  overflow-y: auto;
4679
4679
  padding: 0.25rem;
4680
4680
  border: 1px solid var(--border-light);
4681
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
4681
+ border-radius: var(--radius-m-base, 0.5rem);
4682
4682
  background-color: var(--static-light);
4683
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
4683
+ box-shadow: 0 8px 20px 0 rgba(82, 88, 102, 0.04), 0 6px 12px -2px rgba(82, 88, 102, 0.04), 0 2px 2px -1px rgba(82, 88, 102, 0.04);
4684
4684
  outline: none;
4685
4685
  }
4686
4686
  .tk-select-content[data-size=large] {
4687
4687
  font-size: var(--desktop-body-m-base-size);
4688
4688
  line-height: var(--desktop-body-m-base-line-height);
4689
4689
  }
4690
+ .tk-select-content[data-size=large] .tk-select-item {
4691
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
4692
+ gap: var(--dropdown-items-basic-large-gap);
4693
+ border-radius: var(--dropdown-items-basic-large-radius);
4694
+ }
4690
4695
  .tk-select-content[data-size=base] {
4691
4696
  font-size: var(--desktop-body-s-size);
4692
4697
  line-height: var(--desktop-body-s-line-height);
@@ -4695,20 +4700,25 @@ body {
4695
4700
  font-size: var(--desktop-body-xs-size);
4696
4701
  line-height: var(--desktop-body-xs-line-height);
4697
4702
  }
4703
+ .tk-select-content[data-size=small] .tk-select-item {
4704
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
4705
+ gap: var(--dropdown-items-basic-small-gap);
4706
+ border-radius: var(--dropdown-items-basic-small-radius);
4707
+ }
4698
4708
 
4699
4709
  .tk-select-item {
4700
4710
  display: flex;
4701
4711
  align-items: center;
4702
- gap: 0.5rem;
4703
- padding: 0.375rem 0.5rem;
4704
- border-radius: 0.25rem;
4705
4712
  color: var(--text-darkest);
4706
4713
  cursor: pointer;
4707
4714
  user-select: none;
4708
4715
  outline: none;
4716
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
4717
+ gap: var(--dropdown-items-basic-base-gap);
4718
+ border-radius: var(--dropdown-items-basic-base-radius);
4709
4719
  }
4710
4720
  .tk-select-item[data-highlighted] {
4711
- background-color: var(--background-light);
4721
+ background-color: var(--background-lightest);
4712
4722
  }
4713
4723
  .tk-select-item[data-state=checked] {
4714
4724
  color: var(--states-info-base);
package/dist/scss/_components.scss CHANGED
@@ -2790,15 +2790,20 @@ body {
2790
2790
  overflow-y: auto;
2791
2791
  padding: 0.25rem;
2792
2792
  border: 1px solid var(--border-light);
2793
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
2793
+ border-radius: var(--radius-m-base, 0.5rem);
2794
2794
  background-color: var(--static-light);
2795
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
2795
+ box-shadow: 0 8px 20px 0 rgba(82, 88, 102, 0.04), 0 6px 12px -2px rgba(82, 88, 102, 0.04), 0 2px 2px -1px rgba(82, 88, 102, 0.04);
2796
2796
  outline: none;
2797
2797
  }
2798
2798
  .tk-select-content[data-size=large] {
2799
2799
  font-size: var(--desktop-body-m-base-size);
2800
2800
  line-height: var(--desktop-body-m-base-line-height);
2801
2801
  }
2802
+ .tk-select-content[data-size=large] .tk-select-item {
2803
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
2804
+ gap: var(--dropdown-items-basic-large-gap);
2805
+ border-radius: var(--dropdown-items-basic-large-radius);
2806
+ }
2802
2807
  .tk-select-content[data-size=base] {
2803
2808
  font-size: var(--desktop-body-s-size);
2804
2809
  line-height: var(--desktop-body-s-line-height);
@@ -2807,20 +2812,25 @@ body {
2807
2812
  font-size: var(--desktop-body-xs-size);
2808
2813
  line-height: var(--desktop-body-xs-line-height);
2809
2814
  }
2815
+ .tk-select-content[data-size=small] .tk-select-item {
2816
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
2817
+ gap: var(--dropdown-items-basic-small-gap);
2818
+ border-radius: var(--dropdown-items-basic-small-radius);
2819
+ }
2810
2820
 
2811
2821
  .tk-select-item {
2812
2822
  display: flex;
2813
2823
  align-items: center;
2814
- gap: 0.5rem;
2815
- padding: 0.375rem 0.5rem;
2816
- border-radius: 0.25rem;
2817
2824
  color: var(--text-darkest);
2818
2825
  cursor: pointer;
2819
2826
  user-select: none;
2820
2827
  outline: none;
2828
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
2829
+ gap: var(--dropdown-items-basic-base-gap);
2830
+ border-radius: var(--dropdown-items-basic-base-radius);
2821
2831
  }
2822
2832
  .tk-select-item[data-highlighted] {
2823
- background-color: var(--background-light);
2833
+ background-color: var(--background-lightest);
2824
2834
  }
2825
2835
  .tk-select-item[data-state=checked] {
2826
2836
  color: var(--states-info-base);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@takeoff-design/tokens",
3
- "version": "0.1.0-beta.0",
3
+ "version": "0.1.0",
4
4
  "description": "Design tokens, CSS variables, SCSS, JS exports, and component recipe styles for Takeoff Design.",
5
5
  "type": "module",
6
6
  "author": "Turkish Technology Frontend Infrastructure Team <takeoffui@thy.com>",