@takeoff-design/tokens 0.3.0 → 0.4.0

package/dist/scss/_components.scss

@@ -209,7 +209,6 @@ body {
   width: 100%;
   height: 100%;
   fill: currentColor;
-  stroke: currentColor;
 }
 .tk-button .tk-button-content-symbol {
   display: inline-flex;
@@ -1564,6 +1563,7 @@ body {
 .tk-alert[data-variant=success][data-type=gradient] {
   color: var(--text-darkest);
   background: linear-gradient(270deg, var(--background-lightest, #f9fafc) 89%, var(--states-success-sub-base, #a0e6ba) 100%);
+  border-color: var(--states-success-base);
 }
 .tk-alert[data-variant=warning] {
   border-color: var(--states-warning-sub-base);
@@ -1585,6 +1585,7 @@ body {
 .tk-alert[data-variant=warning][data-type=gradient] {
   color: var(--text-darkest);
   background: linear-gradient(270deg, var(--background-lightest, #f9fafc) 89%, var(--states-warning-sub-base, #f6de95) 100%);
+  border-color: var(--states-warning-base);
 }
 .tk-alert[data-variant=info] {
   border-color: var(--states-info-sub-base);
@@ -1606,6 +1607,7 @@ body {
 .tk-alert[data-variant=info][data-type=gradient] {
   color: var(--text-darkest);
   background: linear-gradient(270deg, var(--background-lightest, #f9fafc) 89%, var(--states-info-sub-base, #abc9fb) 100%);
+  border-color: var(--states-info-base);
 }
 .tk-alert[data-variant=danger] {
   border-color: var(--states-danger-sub-base);
@@ -1627,6 +1629,7 @@ body {
 .tk-alert[data-variant=danger][data-type=gradient] {
   color: var(--text-darkest);
   background: linear-gradient(270deg, var(--background-lightest, #f9fafc) 89%, var(--states-danger-sub-base, #ffaca7) 100%);
+  border-color: var(--states-danger-base);
 }
 .tk-alert[data-variant=neutral] {
   border-color: var(--border-sub-base);
@@ -1648,12 +1651,16 @@ body {
 .tk-alert[data-variant=neutral][data-type=gradient] {
   color: var(--text-darkest);
   background: linear-gradient(270deg, var(--background-lightest, #f9fafc) 89%, var(--background-sub-base, #cacfd8) 100%);
+  border-color: var(--background-sub-base);
 }
 .tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-title,
 .tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-description,
 .tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-action {
   color: var(--text-lightest);
 }
+.tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-action.tk-button {
+  color: var(--text-lightest);
+}
 .tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-action:hover,
 .tk-alert[data-type=filled]:not([data-variant=neutral]) .tk-alert-close:hover {
   background-color: var(--overlay-white-light);
@@ -1698,6 +1705,8 @@ body {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  align-self: flex-start;
+  margin-inline-start: auto;
   border: 0;
   border-radius: var(--radius-m-base);
   background: transparent;
@@ -2826,18 +2835,6 @@ body {
 .tk-drawer-panel[data-placement=bottom][data-state=closed] {
   transform: translateY(100%);
 }
-.tk-drawer-panel[data-placement=full-screen] {
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 0;
-  transition: none;
-  transform: none;
-}
-.tk-drawer-panel[data-placement=full-screen][data-state=closed] {
-  transform: scale(0.95);
-  opacity: 0;
-}
 
 .tk-drawer-header {
   display: flex;
@@ -2981,6 +2978,10 @@ body {
   gap: var(--dropdown-items-basic-large-gap);
   border-radius: var(--dropdown-items-basic-large-radius);
 }
+.tk-dropdown-content[data-size=large] .tk-dropdown-label {
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+}
 .tk-dropdown-content[data-size=base] {
   font-size: var(--desktop-body-s-size);
   line-height: var(--desktop-body-s-line-height);
@@ -2994,6 +2995,9 @@ body {
   gap: var(--dropdown-items-basic-small-gap);
   border-radius: var(--dropdown-items-basic-small-radius);
 }
+.tk-dropdown-content[data-size=small] .tk-dropdown-label {
+  font-size: 11px;
+}
 
 .tk-dropdown-viewport {
   display: flex;
@@ -3049,16 +3053,23 @@ body {
 }
 
 .tk-dropdown-label {
-  padding-inline: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-l);
+  padding-inline: var(--spacing-m-base);
   padding-block: 0.25rem;
   font-size: var(--desktop-body-xs-size);
   line-height: var(--desktop-body-xs-line-height);
-  font-weight: 500;
-  color: var(--text-sub-base);
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
+  font-weight: 400;
+  color: var(--text-dark);
   user-select: none;
 }
+.tk-dropdown-label::after {
+  content: "";
+  flex: 1 1 auto;
+  height: 1px;
+  background-color: var(--border-light);
+}
 
 .tk-dropdown-separator {
   flex-shrink: 0;
@@ -3089,18 +3100,21 @@ body {
   width: 100%;
 }
 .tk-field .tk-field-label {
+  padding: var(--input-external-label-large-label-v-padding) var(--input-external-label-large-label-h-padding);
   color: var(--text-darkest);
   font-weight: 400;
   font-size: var(--desktop-label-m-base-size);
   line-height: var(--desktop-label-m-base-line-height);
   cursor: default;
 }
+.tk-field:has(> [data-size=small]) > .tk-field-label {
+  padding: var(--input-external-label-small-label-v-padding) var(--input-external-label-small-label-h-padding);
+}
 .tk-field .tk-field-asterisk {
   color: var(--states-danger-base);
   font-size: var(--desktop-label-s-size);
   font-weight: 300;
   line-height: var(--desktop-label-s-line-height);
-  margin-inline-start: 0.125rem;
 }
 .tk-field[data-disabled] .tk-field-label {
   color: var(--text-sub-base);
@@ -3116,7 +3130,6 @@ body {
   font-size: var(--desktop-body-xs-size);
   line-height: var(--desktop-body-xs-line-height);
   font-weight: 400;
-  margin-block-start: var(--spacing-xxs);
 }
 .tk-field .tk-field-description-icon,
 .tk-field .tk-field-error-message-icon {
@@ -3125,8 +3138,9 @@ body {
   justify-content: center;
   flex-shrink: 0;
   height: var(--desktop-body-xs-line-height);
-  font-size: 0.875rem;
+  font-size: var(--desktop-body-xs-size);
   line-height: 1;
+  transform: translateY(-1px);
 }
 .tk-field .tk-field-description {
   color: var(--text-base);
@@ -3413,6 +3427,9 @@ body {
   min-height: 3rem;
   height: auto;
 }
+.tk-input[data-size=large]:has(.tk-input-chips) .tk-chip {
+  height: var(--desktop-body-m-base-line-height);
+}
 .tk-input[data-size=large] .tk-input-field {
   font-size: var(--desktop-body-m-base-size);
   line-height: var(--desktop-body-m-base-line-height);
@@ -3462,6 +3479,9 @@ body {
   min-height: 2.5rem;
   height: auto;
 }
+.tk-input[data-size=base]:has(.tk-input-chips) .tk-chip {
+  height: var(--desktop-body-s-line-height);
+}
 .tk-input[data-size=base] .tk-input-field {
   font-size: var(--desktop-body-s-size);
   line-height: var(--desktop-body-s-line-height);
@@ -3511,6 +3531,9 @@ body {
   min-height: 2rem;
   height: auto;
 }
+.tk-input[data-size=small]:has(.tk-input-chips) .tk-chip {
+  height: var(--desktop-body-xs-line-height);
+}
 .tk-input[data-size=small] .tk-input-field {
   font-size: var(--desktop-body-xs-size);
   line-height: var(--desktop-body-xs-line-height);
@@ -3588,6 +3611,7 @@ body {
   line-height: var(--desktop-label-m-base-line-height);
   cursor: default;
   margin: 0;
+  padding: var(--input-external-label-large-label-v-padding) var(--input-external-label-large-label-h-padding);
 }
 .tk-label[for] {
   cursor: pointer;
@@ -3598,7 +3622,6 @@ body {
   font-size: var(--desktop-label-s-size);
   font-weight: 300;
   line-height: var(--desktop-label-s-line-height);
-  margin-inline-start: 0.125rem;
 }
 .tk-label[data-disabled], .tk-label[data-readonly] {
   color: var(--text-sub-base);
@@ -3720,6 +3743,10 @@ body {
   gap: var(--dropdown-items-basic-large-gap);
   border-radius: var(--dropdown-items-basic-large-radius);
 }
+.tk-select-content[data-size=large] .tk-select-label {
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+}
 .tk-select-content[data-size=base] {
   font-size: var(--desktop-body-s-size);
   line-height: var(--desktop-body-s-line-height);
@@ -3733,6 +3760,9 @@ body {
   gap: var(--dropdown-items-basic-small-gap);
   border-radius: var(--dropdown-items-basic-small-radius);
 }
+.tk-select-content[data-size=small] .tk-select-label {
+  font-size: 11px;
+}
 
 .tk-select-viewport {
   display: flex;
@@ -3798,16 +3828,23 @@ body {
 }
 
 .tk-select-label {
-  padding-inline: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-l);
+  padding-inline: var(--spacing-m-base);
   padding-block: 0.25rem;
   font-size: var(--desktop-body-xs-size);
   line-height: var(--desktop-body-xs-line-height);
-  font-weight: 500;
-  color: var(--text-sub-base);
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
+  font-weight: 400;
+  color: var(--text-dark);
   user-select: none;
 }
+.tk-select-label::after {
+  content: "";
+  flex: 1 1 auto;
+  height: 1px;
+  background-color: var(--border-light);
+}
 
 .tk-select-separator {
   flex-shrink: 0;
@@ -5139,6 +5176,9 @@ body {
 .tk-checkbox[data-invalid][data-focus][data-checked]:not([data-disabled]) .tk-checkbox-indicator, .tk-checkbox[data-invalid][data-focus][data-indeterminate]:not([data-disabled]) .tk-checkbox-indicator {
   border-color: var(--states-danger-light);
 }
+.tk-checkbox .tk-checkbox-icon svg {
+  flex: none;
+}
 .tk-checkbox[data-size=base] .tk-checkbox-indicator {
   width: 20px;
   height: 20px;
@@ -5149,6 +5189,14 @@ body {
   width: 12px;
   height: 12px;
 }
+.tk-checkbox[data-size=base] .tk-checkbox-icon svg {
+  width: 22px;
+  height: 22px;
+}
+.tk-checkbox[data-size=base][data-indeterminate] .tk-checkbox-icon svg {
+  width: 14px;
+  height: 14px;
+}
 .tk-checkbox[data-size=small] .tk-checkbox-indicator {
   width: 16px;
   height: 16px;
@@ -5159,6 +5207,14 @@ body {
   width: 10px;
   height: 10px;
 }
+.tk-checkbox[data-size=small] .tk-checkbox-icon svg {
+  width: 18px;
+  height: 18px;
+}
+.tk-checkbox[data-size=small][data-indeterminate] .tk-checkbox-icon svg {
+  width: 12px;
+  height: 12px;
+}
 
 .tk-chip {
   font-family: var(--family-body, "tk-text", sans-serif);
@@ -5203,7 +5259,6 @@ body {
   width: 100%;
   height: 100%;
   fill: currentColor;
-  stroke: currentColor;
 }
 .tk-chip .tk-chip-remove {
   appearance: none;
@@ -5219,7 +5274,7 @@ body {
   cursor: pointer;
 }
 .tk-chip[data-size=small] {
-  min-height: 20px;
+  height: 20px;
   font-size: var(--desktop-body-xs-size);
   line-height: var(--desktop-body-xs-line-height);
   border-radius: var(--chips-small-radius);
@@ -5235,7 +5290,7 @@ body {
   padding-inline-end: var(--chips-small-v-padding);
 }
 .tk-chip[data-size=base] {
-  min-height: 24px;
+  height: 24px;
   font-size: var(--desktop-body-s-size);
   line-height: var(--desktop-body-s-line-height);
   border-radius: var(--chips-base-radius);
@@ -5251,7 +5306,7 @@ body {
   padding-inline-end: var(--chips-base-v-padding);
 }
 .tk-chip[data-size=large] {
-  min-height: 28px;
+  height: 28px;
   font-size: var(--desktop-body-m-base-size);
   line-height: var(--desktop-body-m-base-line-height);
   border-radius: var(--chips-large-radius);
@@ -6113,6 +6168,11 @@ body {
   border-bottom: 0;
   border-inline-end: 1px solid var(--background-light);
 }
+.tk-tabs-list[data-type=divided]:not([data-orientation=vertical]) {
+  border-bottom: 0;
+  padding-block-end: 1px;
+  background-image: linear-gradient(to top, var(--border-light) 1px, transparent 1px);
+}
 .tk-tabs-list[data-type=compact] {
   gap: 0;
   border-bottom: 0;
@@ -6250,6 +6310,13 @@ body {
 .tk-tabs-trigger[data-type=divided]:hover:not([data-disabled], :disabled, [aria-disabled=true]):not([data-orientation=vertical]), .tk-tabs-trigger[data-type=divided][data-state=active]:not([data-orientation=vertical]) {
   box-shadow: var(--effect-1-default-base);
 }
+.tk-tabs-trigger[data-type=divided]:not([data-orientation=vertical]) {
+  border-bottom: 1px solid var(--border-light);
+  margin-block-end: -1px;
+}
+.tk-tabs-trigger[data-type=divided][data-state=active]:not([data-orientation=vertical]) {
+  border-bottom-color: var(--static-light);
+}
 .tk-tabs-trigger[data-type=divided]::after {
   display: none;
 }
@@ -7770,3 +7837,206 @@ body {
   background-color: color-mix(in srgb, var(--static-light) 60%, transparent);
   z-index: 4;
 }
+
+.tk-upload {
+  font-family: var(--family-body, "tk-text", sans-serif);
+  display: flex;
+  flex-direction: column;
+  gap: var(--upload-card-gap);
+  width: 100%;
+  box-sizing: border-box;
+}
+.tk-upload:not([data-disabled]):not([data-readonly]) .tk-upload-dropzone:hover {
+  background: var(--background-lightest);
+}
+.tk-upload:not([data-disabled]) .tk-upload-item:hover {
+  background: var(--background-lightest);
+}
+.tk-upload[data-disabled] .tk-upload-dropzone {
+  --tk-upload-dropzone-mark: var(--icon-sub-base);
+  --tk-upload-dropzone-support: var(--text-sub-base);
+  border-color: var(--border-light);
+  background: var(--background-lightest);
+  color: var(--text-sub-base);
+  cursor: not-allowed;
+}
+.tk-upload[data-invalid] .tk-upload-dropzone {
+  border-color: var(--states-danger-base);
+}
+.tk-upload[data-invalid] .tk-upload-item {
+  border-color: var(--states-danger-sub-base);
+}
+
+.tk-upload-dropzone {
+  --tk-upload-dropzone-mark: var(--primary-base);
+  --tk-upload-dropzone-support: var(--text-base);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--upload-basic-gap);
+  padding: var(--upload-basic-v-padding) var(--upload-basic-h-padding);
+  text-align: center;
+  border: 1px dashed var(--border-sub-base);
+  border-radius: var(--radius-m-base);
+  background: transparent;
+  color: var(--text-darkest);
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+  box-sizing: border-box;
+  cursor: default;
+  transition: border-color 160ms ease, background-color 160ms ease;
+}
+
+.tk-upload-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-m-base);
+}
+
+.tk-upload-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--upload-card-gap);
+}
+.tk-upload-list::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.tk-upload-list::-webkit-scrollbar-track {
+  background: var(--background-lightest);
+  border-radius: 2px;
+}
+.tk-upload-list::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: var(--secondary-sub-base);
+}
+.tk-upload-list::-webkit-scrollbar-thumb:hover {
+  background: var(--secondary-dark);
+}
+.tk-upload-list::-webkit-scrollbar-corner {
+  background: var(--background-lightest);
+}
+
+.tk-upload-item {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: var(--upload-card-gap);
+  padding: var(--upload-card-v-padding) var(--upload-card-h-padding);
+  border: 1px solid var(--border-sub-base);
+  border-radius: var(--radius-m-base);
+  background: var(--static-light);
+  box-sizing: border-box;
+  transition: border-color 160ms ease, background-color 160ms ease;
+}
+.tk-upload-item[data-status=completed] .tk-upload-item-status svg {
+  color: var(--states-success-base);
+}
+.tk-upload-item[data-status=error] .tk-upload-item-status svg {
+  color: var(--states-danger-base);
+}
+
+.tk-upload-item-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--upload-card-content-gap) var(--spacing-m-base);
+}
+.tk-upload-item-content .tk-upload-item-name {
+  flex: 1 1 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--desktop-body-s-size);
+  line-height: var(--desktop-body-s-line-height);
+  color: var(--text-darkest);
+}
+.tk-upload-item-content .tk-upload-item-size {
+  font-size: var(--desktop-body-xs-size);
+  font-weight: 300;
+  line-height: var(--desktop-body-xs-line-height);
+  color: var(--text-base);
+}
+.tk-upload-item-content .tk-upload-item-status {
+  flex: 0 1 auto;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--desktop-body-xs-size);
+  font-weight: 300;
+  line-height: var(--desktop-body-xs-line-height);
+  color: var(--text-base);
+}
+.tk-upload-item-content .tk-upload-item-status svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+.tk-upload-item-content .tk-upload-item-status .tk-spinner {
+  flex-shrink: 0;
+  --tk-spinner-size: 16px;
+}
+.tk-upload-item-content .tk-upload-item-progress {
+  flex-basis: 100%;
+}
+.tk-upload-item-content .tk-upload-item-progress .tk-progress {
+  inline-size: 100%;
+}
+
+.tk-upload-item-preview {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  border-radius: var(--radius-s);
+  color: var(--text-sub-base);
+  box-sizing: border-box;
+}
+.tk-upload-item-preview .tk-upload-item-preview-image,
+.tk-upload-item-preview img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: var(--background-light);
+}
+.tk-upload-item-preview .tk-upload-item-preview-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.tk-upload-item-preview .tk-upload-item-preview-extension {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--background-light);
+  font-size: var(--desktop-body-xs-size);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.tk-upload-item-actions {
+  margin-inline-start: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+.tk-upload-item-actions:empty {
+  display: none;
+}
+
+.tk-upload-item-action {
+  flex-shrink: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takeoff-design/tokens",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Design tokens, CSS variables, SCSS, JS exports, and component recipe styles for Takeoff Design.",
   "type": "module",
   "author": "Turkish Technology Frontend Infrastructure Team <takeoffui@thy.com>",