@takeoff-design/tokens 0.1.0-beta.0 → 0.1.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.
Files changed (7) hide show
  1. package/dist/css/ajet/theme.css +16 -11
  2. package/dist/css/aviation/theme.css +16 -11
  3. package/dist/css/default/theme.css +16 -11
  4. package/dist/css/sarp/theme.css +16 -11
  5. package/dist/css/technology/theme.css +16 -11
  6. package/dist/scss/_components.scss +16 -11
  7. package/package.json +1 -1
package/dist/css/ajet/theme.css CHANGED
@@ -1945,8 +1945,6 @@ body {
1945
1945
  outline: none;
1946
1946
  overflow: hidden;
1947
1947
  position: relative;
1948
- width: fit-content;
1949
- max-width: 100%;
1950
1948
  border: 1px solid transparent;
1951
1949
  text-decoration: none;
1952
1950
  white-space: nowrap;
@@ -1956,9 +1954,6 @@ body {
1956
1954
  transition: all 200ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
1957
1955
  cursor: pointer;
1958
1956
  }
1959
- .tk-button[data-full-width] {
1960
- width: 100%;
1961
- }
1962
1957
  .tk-button[data-underline] .tk-button-label {
1963
1958
  text-decoration: underline;
1964
1959
  }
@@ -4678,15 +4673,20 @@ body {
4678
4673
  overflow-y: auto;
4679
4674
  padding: 0.25rem;
4680
4675
  border: 1px solid var(--border-light);
4681
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
4676
+ border-radius: var(--radius-m-base, 0.5rem);
4682
4677
  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);
4678
+ 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
4679
  outline: none;
4685
4680
  }
4686
4681
  .tk-select-content[data-size=large] {
4687
4682
  font-size: var(--desktop-body-m-base-size);
4688
4683
  line-height: var(--desktop-body-m-base-line-height);
4689
4684
  }
4685
+ .tk-select-content[data-size=large] .tk-select-item {
4686
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
4687
+ gap: var(--dropdown-items-basic-large-gap);
4688
+ border-radius: var(--dropdown-items-basic-large-radius);
4689
+ }
4690
4690
  .tk-select-content[data-size=base] {
4691
4691
  font-size: var(--desktop-body-s-size);
4692
4692
  line-height: var(--desktop-body-s-line-height);
@@ -4695,20 +4695,25 @@ body {
4695
4695
  font-size: var(--desktop-body-xs-size);
4696
4696
  line-height: var(--desktop-body-xs-line-height);
4697
4697
  }
4698
+ .tk-select-content[data-size=small] .tk-select-item {
4699
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
4700
+ gap: var(--dropdown-items-basic-small-gap);
4701
+ border-radius: var(--dropdown-items-basic-small-radius);
4702
+ }
4698
4703
 
4699
4704
  .tk-select-item {
4700
4705
  display: flex;
4701
4706
  align-items: center;
4702
- gap: 0.5rem;
4703
- padding: 0.375rem 0.5rem;
4704
- border-radius: 0.25rem;
4705
4707
  color: var(--text-darkest);
4706
4708
  cursor: pointer;
4707
4709
  user-select: none;
4708
4710
  outline: none;
4711
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
4712
+ gap: var(--dropdown-items-basic-base-gap);
4713
+ border-radius: var(--dropdown-items-basic-base-radius);
4709
4714
  }
4710
4715
  .tk-select-item[data-highlighted] {
4711
- background-color: var(--background-light);
4716
+ background-color: var(--background-lightest);
4712
4717
  }
4713
4718
  .tk-select-item[data-state=checked] {
4714
4719
  color: var(--states-info-base);
package/dist/css/aviation/theme.css CHANGED
@@ -1945,8 +1945,6 @@ body {
1945
1945
  outline: none;
1946
1946
  overflow: hidden;
1947
1947
  position: relative;
1948
- width: fit-content;
1949
- max-width: 100%;
1950
1948
  border: 1px solid transparent;
1951
1949
  text-decoration: none;
1952
1950
  white-space: nowrap;
@@ -1956,9 +1954,6 @@ body {
1956
1954
  transition: all 200ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
1957
1955
  cursor: pointer;
1958
1956
  }
1959
- .tk-button[data-full-width] {
1960
- width: 100%;
1961
- }
1962
1957
  .tk-button[data-underline] .tk-button-label {
1963
1958
  text-decoration: underline;
1964
1959
  }
@@ -4678,15 +4673,20 @@ body {
4678
4673
  overflow-y: auto;
4679
4674
  padding: 0.25rem;
4680
4675
  border: 1px solid var(--border-light);
4681
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
4676
+ border-radius: var(--radius-m-base, 0.5rem);
4682
4677
  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);
4678
+ 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
4679
  outline: none;
4685
4680
  }
4686
4681
  .tk-select-content[data-size=large] {
4687
4682
  font-size: var(--desktop-body-m-base-size);
4688
4683
  line-height: var(--desktop-body-m-base-line-height);
4689
4684
  }
4685
+ .tk-select-content[data-size=large] .tk-select-item {
4686
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
4687
+ gap: var(--dropdown-items-basic-large-gap);
4688
+ border-radius: var(--dropdown-items-basic-large-radius);
4689
+ }
4690
4690
  .tk-select-content[data-size=base] {
4691
4691
  font-size: var(--desktop-body-s-size);
4692
4692
  line-height: var(--desktop-body-s-line-height);
@@ -4695,20 +4695,25 @@ body {
4695
4695
  font-size: var(--desktop-body-xs-size);
4696
4696
  line-height: var(--desktop-body-xs-line-height);
4697
4697
  }
4698
+ .tk-select-content[data-size=small] .tk-select-item {
4699
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
4700
+ gap: var(--dropdown-items-basic-small-gap);
4701
+ border-radius: var(--dropdown-items-basic-small-radius);
4702
+ }
4698
4703
 
4699
4704
  .tk-select-item {
4700
4705
  display: flex;
4701
4706
  align-items: center;
4702
- gap: 0.5rem;
4703
- padding: 0.375rem 0.5rem;
4704
- border-radius: 0.25rem;
4705
4707
  color: var(--text-darkest);
4706
4708
  cursor: pointer;
4707
4709
  user-select: none;
4708
4710
  outline: none;
4711
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
4712
+ gap: var(--dropdown-items-basic-base-gap);
4713
+ border-radius: var(--dropdown-items-basic-base-radius);
4709
4714
  }
4710
4715
  .tk-select-item[data-highlighted] {
4711
- background-color: var(--background-light);
4716
+ background-color: var(--background-lightest);
4712
4717
  }
4713
4718
  .tk-select-item[data-state=checked] {
4714
4719
  color: var(--states-info-base);
package/dist/css/default/theme.css CHANGED
@@ -1945,8 +1945,6 @@ body {
1945
1945
  outline: none;
1946
1946
  overflow: hidden;
1947
1947
  position: relative;
1948
- width: fit-content;
1949
- max-width: 100%;
1950
1948
  border: 1px solid transparent;
1951
1949
  text-decoration: none;
1952
1950
  white-space: nowrap;
@@ -1956,9 +1954,6 @@ body {
1956
1954
  transition: all 200ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
1957
1955
  cursor: pointer;
1958
1956
  }
1959
- .tk-button[data-full-width] {
1960
- width: 100%;
1961
- }
1962
1957
  .tk-button[data-underline] .tk-button-label {
1963
1958
  text-decoration: underline;
1964
1959
  }
@@ -4678,15 +4673,20 @@ body {
4678
4673
  overflow-y: auto;
4679
4674
  padding: 0.25rem;
4680
4675
  border: 1px solid var(--border-light);
4681
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
4676
+ border-radius: var(--radius-m-base, 0.5rem);
4682
4677
  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);
4678
+ 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
4679
  outline: none;
4685
4680
  }
4686
4681
  .tk-select-content[data-size=large] {
4687
4682
  font-size: var(--desktop-body-m-base-size);
4688
4683
  line-height: var(--desktop-body-m-base-line-height);
4689
4684
  }
4685
+ .tk-select-content[data-size=large] .tk-select-item {
4686
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
4687
+ gap: var(--dropdown-items-basic-large-gap);
4688
+ border-radius: var(--dropdown-items-basic-large-radius);
4689
+ }
4690
4690
  .tk-select-content[data-size=base] {
4691
4691
  font-size: var(--desktop-body-s-size);
4692
4692
  line-height: var(--desktop-body-s-line-height);
@@ -4695,20 +4695,25 @@ body {
4695
4695
  font-size: var(--desktop-body-xs-size);
4696
4696
  line-height: var(--desktop-body-xs-line-height);
4697
4697
  }
4698
+ .tk-select-content[data-size=small] .tk-select-item {
4699
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
4700
+ gap: var(--dropdown-items-basic-small-gap);
4701
+ border-radius: var(--dropdown-items-basic-small-radius);
4702
+ }
4698
4703
 
4699
4704
  .tk-select-item {
4700
4705
  display: flex;
4701
4706
  align-items: center;
4702
- gap: 0.5rem;
4703
- padding: 0.375rem 0.5rem;
4704
- border-radius: 0.25rem;
4705
4707
  color: var(--text-darkest);
4706
4708
  cursor: pointer;
4707
4709
  user-select: none;
4708
4710
  outline: none;
4711
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
4712
+ gap: var(--dropdown-items-basic-base-gap);
4713
+ border-radius: var(--dropdown-items-basic-base-radius);
4709
4714
  }
4710
4715
  .tk-select-item[data-highlighted] {
4711
- background-color: var(--background-light);
4716
+ background-color: var(--background-lightest);
4712
4717
  }
4713
4718
  .tk-select-item[data-state=checked] {
4714
4719
  color: var(--states-info-base);
package/dist/css/sarp/theme.css CHANGED
@@ -1945,8 +1945,6 @@ body {
1945
1945
  outline: none;
1946
1946
  overflow: hidden;
1947
1947
  position: relative;
1948
- width: fit-content;
1949
- max-width: 100%;
1950
1948
  border: 1px solid transparent;
1951
1949
  text-decoration: none;
1952
1950
  white-space: nowrap;
@@ -1956,9 +1954,6 @@ body {
1956
1954
  transition: all 200ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
1957
1955
  cursor: pointer;
1958
1956
  }
1959
- .tk-button[data-full-width] {
1960
- width: 100%;
1961
- }
1962
1957
  .tk-button[data-underline] .tk-button-label {
1963
1958
  text-decoration: underline;
1964
1959
  }
@@ -4678,15 +4673,20 @@ body {
4678
4673
  overflow-y: auto;
4679
4674
  padding: 0.25rem;
4680
4675
  border: 1px solid var(--border-light);
4681
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
4676
+ border-radius: var(--radius-m-base, 0.5rem);
4682
4677
  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);
4678
+ 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
4679
  outline: none;
4685
4680
  }
4686
4681
  .tk-select-content[data-size=large] {
4687
4682
  font-size: var(--desktop-body-m-base-size);
4688
4683
  line-height: var(--desktop-body-m-base-line-height);
4689
4684
  }
4685
+ .tk-select-content[data-size=large] .tk-select-item {
4686
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
4687
+ gap: var(--dropdown-items-basic-large-gap);
4688
+ border-radius: var(--dropdown-items-basic-large-radius);
4689
+ }
4690
4690
  .tk-select-content[data-size=base] {
4691
4691
  font-size: var(--desktop-body-s-size);
4692
4692
  line-height: var(--desktop-body-s-line-height);
@@ -4695,20 +4695,25 @@ body {
4695
4695
  font-size: var(--desktop-body-xs-size);
4696
4696
  line-height: var(--desktop-body-xs-line-height);
4697
4697
  }
4698
+ .tk-select-content[data-size=small] .tk-select-item {
4699
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
4700
+ gap: var(--dropdown-items-basic-small-gap);
4701
+ border-radius: var(--dropdown-items-basic-small-radius);
4702
+ }
4698
4703
 
4699
4704
  .tk-select-item {
4700
4705
  display: flex;
4701
4706
  align-items: center;
4702
- gap: 0.5rem;
4703
- padding: 0.375rem 0.5rem;
4704
- border-radius: 0.25rem;
4705
4707
  color: var(--text-darkest);
4706
4708
  cursor: pointer;
4707
4709
  user-select: none;
4708
4710
  outline: none;
4711
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
4712
+ gap: var(--dropdown-items-basic-base-gap);
4713
+ border-radius: var(--dropdown-items-basic-base-radius);
4709
4714
  }
4710
4715
  .tk-select-item[data-highlighted] {
4711
- background-color: var(--background-light);
4716
+ background-color: var(--background-lightest);
4712
4717
  }
4713
4718
  .tk-select-item[data-state=checked] {
4714
4719
  color: var(--states-info-base);
package/dist/css/technology/theme.css CHANGED
@@ -1945,8 +1945,6 @@ body {
1945
1945
  outline: none;
1946
1946
  overflow: hidden;
1947
1947
  position: relative;
1948
- width: fit-content;
1949
- max-width: 100%;
1950
1948
  border: 1px solid transparent;
1951
1949
  text-decoration: none;
1952
1950
  white-space: nowrap;
@@ -1956,9 +1954,6 @@ body {
1956
1954
  transition: all 200ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
1957
1955
  cursor: pointer;
1958
1956
  }
1959
- .tk-button[data-full-width] {
1960
- width: 100%;
1961
- }
1962
1957
  .tk-button[data-underline] .tk-button-label {
1963
1958
  text-decoration: underline;
1964
1959
  }
@@ -4678,15 +4673,20 @@ body {
4678
4673
  overflow-y: auto;
4679
4674
  padding: 0.25rem;
4680
4675
  border: 1px solid var(--border-light);
4681
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
4676
+ border-radius: var(--radius-m-base, 0.5rem);
4682
4677
  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);
4678
+ 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
4679
  outline: none;
4685
4680
  }
4686
4681
  .tk-select-content[data-size=large] {
4687
4682
  font-size: var(--desktop-body-m-base-size);
4688
4683
  line-height: var(--desktop-body-m-base-line-height);
4689
4684
  }
4685
+ .tk-select-content[data-size=large] .tk-select-item {
4686
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
4687
+ gap: var(--dropdown-items-basic-large-gap);
4688
+ border-radius: var(--dropdown-items-basic-large-radius);
4689
+ }
4690
4690
  .tk-select-content[data-size=base] {
4691
4691
  font-size: var(--desktop-body-s-size);
4692
4692
  line-height: var(--desktop-body-s-line-height);
@@ -4695,20 +4695,25 @@ body {
4695
4695
  font-size: var(--desktop-body-xs-size);
4696
4696
  line-height: var(--desktop-body-xs-line-height);
4697
4697
  }
4698
+ .tk-select-content[data-size=small] .tk-select-item {
4699
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
4700
+ gap: var(--dropdown-items-basic-small-gap);
4701
+ border-radius: var(--dropdown-items-basic-small-radius);
4702
+ }
4698
4703
 
4699
4704
  .tk-select-item {
4700
4705
  display: flex;
4701
4706
  align-items: center;
4702
- gap: 0.5rem;
4703
- padding: 0.375rem 0.5rem;
4704
- border-radius: 0.25rem;
4705
4707
  color: var(--text-darkest);
4706
4708
  cursor: pointer;
4707
4709
  user-select: none;
4708
4710
  outline: none;
4711
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
4712
+ gap: var(--dropdown-items-basic-base-gap);
4713
+ border-radius: var(--dropdown-items-basic-base-radius);
4709
4714
  }
4710
4715
  .tk-select-item[data-highlighted] {
4711
- background-color: var(--background-light);
4716
+ background-color: var(--background-lightest);
4712
4717
  }
4713
4718
  .tk-select-item[data-state=checked] {
4714
4719
  color: var(--states-info-base);
package/dist/scss/_components.scss CHANGED
@@ -57,8 +57,6 @@ body {
57
57
  outline: none;
58
58
  overflow: hidden;
59
59
  position: relative;
60
- width: fit-content;
61
- max-width: 100%;
62
60
  border: 1px solid transparent;
63
61
  text-decoration: none;
64
62
  white-space: nowrap;
@@ -68,9 +66,6 @@ body {
68
66
  transition: all 200ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
69
67
  cursor: pointer;
70
68
  }
71
- .tk-button[data-full-width] {
72
- width: 100%;
73
- }
74
69
  .tk-button[data-underline] .tk-button-label {
75
70
  text-decoration: underline;
76
71
  }
@@ -2790,15 +2785,20 @@ body {
2790
2785
  overflow-y: auto;
2791
2786
  padding: 0.25rem;
2792
2787
  border: 1px solid var(--border-light);
2793
- border-radius: var(--input-external-label-base-text-area-radius, 0.5rem);
2788
+ border-radius: var(--radius-m-base, 0.5rem);
2794
2789
  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);
2790
+ 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
2791
  outline: none;
2797
2792
  }
2798
2793
  .tk-select-content[data-size=large] {
2799
2794
  font-size: var(--desktop-body-m-base-size);
2800
2795
  line-height: var(--desktop-body-m-base-line-height);
2801
2796
  }
2797
+ .tk-select-content[data-size=large] .tk-select-item {
2798
+ padding: var(--dropdown-items-basic-large-v-padding) var(--dropdown-items-basic-large-h-padding);
2799
+ gap: var(--dropdown-items-basic-large-gap);
2800
+ border-radius: var(--dropdown-items-basic-large-radius);
2801
+ }
2802
2802
  .tk-select-content[data-size=base] {
2803
2803
  font-size: var(--desktop-body-s-size);
2804
2804
  line-height: var(--desktop-body-s-line-height);
@@ -2807,20 +2807,25 @@ body {
2807
2807
  font-size: var(--desktop-body-xs-size);
2808
2808
  line-height: var(--desktop-body-xs-line-height);
2809
2809
  }
2810
+ .tk-select-content[data-size=small] .tk-select-item {
2811
+ padding: var(--dropdown-items-basic-small-v-padding) var(--dropdown-items-basic-small-h-padding);
2812
+ gap: var(--dropdown-items-basic-small-gap);
2813
+ border-radius: var(--dropdown-items-basic-small-radius);
2814
+ }
2810
2815
 
2811
2816
  .tk-select-item {
2812
2817
  display: flex;
2813
2818
  align-items: center;
2814
- gap: 0.5rem;
2815
- padding: 0.375rem 0.5rem;
2816
- border-radius: 0.25rem;
2817
2819
  color: var(--text-darkest);
2818
2820
  cursor: pointer;
2819
2821
  user-select: none;
2820
2822
  outline: none;
2823
+ padding: var(--dropdown-items-basic-base-v-padding) var(--dropdown-items-basic-base-h-padding);
2824
+ gap: var(--dropdown-items-basic-base-gap);
2825
+ border-radius: var(--dropdown-items-basic-base-radius);
2821
2826
  }
2822
2827
  .tk-select-item[data-highlighted] {
2823
- background-color: var(--background-light);
2828
+ background-color: var(--background-lightest);
2824
2829
  }
2825
2830
  .tk-select-item[data-state=checked] {
2826
2831
  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.1",
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>",