jvetrau-ds 0.1.16 → 0.1.17

package/components/attach/attach.css

@@ -0,0 +1,141 @@
+.attach {
+  /* color */
+  --attachment-color: var(--color-text);
+  --attachment-item-bg: var(--color-control);
+  --attachment-border-color: var(--color-line);
+  --attachment-size-color: var(--color-text-note);
+
+  color: var(--attachment-color);
+
+  /* typography */
+  --attachment-font-family: var(--font-control-family);
+  --attachment-font-size: var(--font-control);
+  --attachment-font-weight: var(--font-control-weight);
+  --attachment-line-height: var(--font-control-line);
+  --attachment-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--attachment-font-family);
+  font-size: var(--attachment-font-size);
+  font-weight: var(--attachment-font-weight);
+  line-height: var(--attachment-line-height);
+  letter-spacing: var(--attachment-letter-spacing);
+
+  /* size */
+  --attachment-gap: var(--margin-control);
+  --attachment-item-gap: var(--margin-icon);
+  --attachment-item-padding: var(--padding-control-vert);
+  --attachment-preview-max-width: 240px;
+  --attachment-preview-max-height: 180px;
+
+  /* border */
+  --attachment-radius: var(--radius-control);
+  --attachment-border-width: var(--size-border-width-base);
+
+  /* depth */
+
+  /* motion */
+}
+
+.attach__list {
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--attachment-gap);
+  margin: 0;
+  padding: 0;
+
+  /* border */
+  list-style: none;
+}
+
+.attach__item {
+  /* color */
+  background: var(--attachment-item-bg);
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--attachment-item-gap);
+  padding: var(--attachment-item-padding);
+
+  /* border */
+  border:
+    var(--attachment-border-width)
+    solid
+    var(--attachment-border-color);
+  border-radius: var(--attachment-radius);
+}
+
+.attach__link {
+  /* color */
+  color: inherit;
+
+  /* size */
+  min-width: 0;
+
+  /* typography */
+  text-decoration: none;
+}
+
+.attach__link:hover .attach__name {
+  text-decoration: underline;
+}
+
+.attach__preview {
+  /* size */
+  display: block;
+  max-width: var(--attachment-preview-max-width);
+  max-height: var(--attachment-preview-max-height);
+  object-fit: contain;
+
+  /* border */
+  border-radius: var(--attachment-radius);
+}
+
+.attach__file {
+  /* size */
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.attach__name {
+  /* size */
+  overflow: hidden;
+
+  /* typography */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attach__size {
+  /* color */
+  color: var(--attachment-size-color);
+
+  /* typography */
+  font-size: 0.85em;
+}
+
+.attach__remove {
+  /* color */
+  background: transparent;
+  color: inherit;
+
+  /* typography */
+  font: inherit;
+
+  /* size */
+  flex-shrink: 0;
+  padding: 0;
+
+  /* border */
+  border: 0;
+
+  /* motion */
+  cursor: pointer;
+}
+
+.attach__remove:hover {
+  text-decoration: underline;
+}

package/components/avatar/avatar.css

@@ -0,0 +1,69 @@
+.avatar {
+  /* color */
+  --avatar-bg: var(--color-control);
+  --avatar-color: var(--color-text-control);
+
+  background: var(--avatar-bg);
+  color: var(--avatar-color);
+
+  /* typography */
+  --avatar-font-family: var(--font-control-family);
+  --avatar-font-size: var(--font-control);
+  --avatar-font-weight: var(--font-control-weight);
+  --avatar-line-height: var(--font-control-line);
+  --avatar-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--avatar-font-family);
+  font-size: var(--avatar-font-size);
+  font-weight: var(--avatar-font-weight);
+  line-height: var(--avatar-line-height);
+  letter-spacing: var(--avatar-letter-spacing);
+
+  /* size */
+  --avatar-size: 48px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  overflow: hidden;
+
+  /* border */
+  --avatar-radius: 50%;
+
+  border-radius: var(--avatar-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.avatar--button {
+  /* color */
+
+  /* typography */
+  font: inherit;
+
+  /* size */
+  padding: 0;
+
+  /* border */
+  border: 0;
+
+  /* motion */
+  cursor: pointer;
+}
+
+.avatar__image {
+  /* size */
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar__initials {
+  /* typography */
+  text-transform: uppercase;
+}

package/components/button/button.css

@@ -0,0 +1,104 @@
+.button {
+  /* color */
+  --button-bg: var(--color-primary-2);
+  --button-color: var(--color-text-primary-2);
+  --button-bg-disabled: var(--color-bg-disabled);
+  --button-color-disabled: var(--color-text-disabled, var(--color-text-control));
+
+  background: var(--button-bg);
+  color: var(--button-color);
+
+  /* typography */
+  --button-font-family: var(--font-control-family);
+  --button-font-weight: var(--font-control-weight);
+  --button-font-size: var(--font-control);
+  --button-line-height: var(--font-control-line);
+  --button-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--button-font-family);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  line-height: var(--button-line-height);
+  letter-spacing: var(--button-letter-spacing);
+
+  /* size */
+  --button-gap: var(--margin-icon);
+  --button-height: var(--size-control-height);
+  --button-padding-x: var(--padding-control-button-horz);
+  --button-padding-icon-only: var(--padding-control-button-icon-horz);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--button-gap);
+  min-height: var(--button-height);
+  padding-inline: var(--button-padding-x);
+
+  /* border */
+  --button-radius: var(--radius-control-button);
+  --button-focus-width: var(--size-border-width-base);
+  --button-focus-offset: var(--size-border-width-base);
+
+  border: 0;
+  border-radius: var(--button-radius);
+
+  /* depth */
+
+  /* motion */
+  --button-opacity-hover: 0.8;
+  --button-opacity-active: 0.6;
+  --button-opacity-disabled: 0.6;
+  --button-transition-duration: 0.2s;
+
+  cursor: pointer;
+  user-select: none;
+  transition: opacity var(--button-transition-duration) ease;
+}
+
+.button__icon {
+  /* color */
+
+  /* typography */
+  line-height: 0;
+
+  /* size */
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.button:hover {
+  opacity: var(--button-opacity-hover);
+}
+
+.button:focus-visible {
+  outline: var(--button-focus-width) solid var(--button-bg);
+  outline-offset: var(--button-focus-offset);
+}
+
+.button:active {
+  opacity: var(--button-opacity-active);
+}
+
+.button:disabled,
+.button--disabled {
+  background: var(--button-bg-disabled);
+  color: var(--button-color-disabled);
+  opacity: var(--button-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.button--primary {
+  --button-bg: var(--color-primary-2);
+  --button-color: var(--color-text-primary-2);
+}
+
+.button--icon-only {
+  padding-inline: var(--button-padding-icon-only);
+}

package/components/button-icon/button-icon.css

@@ -0,0 +1,67 @@
+.button-icon {
+  /* color */
+  --button-icon-bg: transparent;
+  --button-icon-color: var(--color-text);
+  --button-icon-bg-disabled: transparent;
+  --button-icon-color-disabled: var(--color-text-disabled);
+
+  background: var(--button-icon-bg);
+  color: var(--button-icon-color);
+
+  /* typography */
+
+  /* size */
+  --button-icon-size: 32px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
+  padding: 0;
+
+  /* border */
+  --button-icon-radius: var(--radius-control);
+  --button-icon-focus-width: var(--size-border-width-min);
+  --button-icon-focus-offset: 2px;
+
+  border: 0;
+  border-radius: var(--button-icon-radius);
+
+  /* depth */
+
+  /* motion */
+  --button-icon-transition-duration: var(--motion-duration1);
+  --button-icon-opacity-hover: 0.8;
+  --button-icon-opacity-active: 0.7;
+
+  cursor: pointer;
+  user-select: none;
+  transition: opacity var(--button-icon-transition-duration);
+}
+
+.button-icon__icon {
+  /* size */
+  flex-shrink: 0;
+}
+
+.button-icon:hover {
+  opacity: var(--button-icon-opacity-hover);
+}
+
+.button-icon:focus-visible {
+  outline: var(--button-icon-focus-width) solid currentColor;
+  outline-offset: var(--button-icon-focus-offset);
+}
+
+.button-icon:active {
+  opacity: var(--button-icon-opacity-active);
+}
+
+.button-icon:disabled,
+.button-icon--disabled {
+  background: var(--button-icon-bg-disabled);
+  color: var(--button-icon-color-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}

package/components/card/card.css

@@ -0,0 +1,128 @@
+.card {
+  /* color */
+  --card-bg: var(--color-bg-container);
+  --card-color: var(--color-text-container);
+
+  background: var(--card-bg);
+  color: var(--card-color);
+
+  /* typography */
+
+  /* size */
+  --card-width: 100%;
+  --card-padding: var(--padding-container);
+  --card-gap: var(--margin-container-item);
+  --card-title-gap: var(--font-h2-margin);
+  --card-content-min-height: 200px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: var(--card-gap);
+  width: var(--card-width);
+  padding: var(--card-padding);
+
+  /* border */
+  --card-radius: var(--radius-container);
+
+  border-radius: var(--card-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__header {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-title-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__title {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2);
+  font-weight: var(--font-h2-weight);
+  line-height: var(--font-h2-line);
+  letter-spacing: var(--font-h2-letter-spacing);
+
+  /* size */
+  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__description {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family: var(--font-lead-family);
+  font-size: var(--font-lead);
+  font-weight: var(--font-lead-weight);
+  line-height: var(--font-lead-line);
+  letter-spacing: var(--font-lead-letter-spacing);
+
+  /* size */
+  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__content {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  min-height: var(--card-content-min-height);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__actions {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  gap: var(--margin-control);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/components/checkbox/checkbox.css

@@ -0,0 +1,80 @@
+.checkbox {
+  /* color */
+  --checkbox-label-color: var(--color-text);
+
+  color: var(--checkbox-label-color);
+
+  /* typography */
+  --checkbox-font-family: var(--font-body-family);
+  --checkbox-font-weight: var(--font-body-weight);
+  --checkbox-font-size: var(--font-body);
+  --checkbox-line-height: var(--font-body-line);
+  --checkbox-letter-spacing: var(--font-body-letter-spacing);
+
+  font-family: var(--checkbox-font-family);
+  font-size: var(--checkbox-font-size);
+  font-weight: var(--checkbox-font-weight);
+  line-height: var(--checkbox-line-height);
+  letter-spacing: var(--checkbox-letter-spacing);
+
+  /* size */
+  --checkbox-gap: var(--margin-choice);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--checkbox-gap);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+  --checkbox-opacity-disabled: 0.6;
+}
+
+.checkbox__input {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: var(--size-control-checkbox);
+  height: var(--size-control-checkbox);
+  margin: 0;
+  flex-shrink: 0;
+
+  /* border */
+  --сheckbox-radius: var(--radius-control);
+  --сheckbox-focus-width: var(--size-border-width-base);
+  --сheckbox-focus-offset: var(--size-border-width-base);
+
+  border: var(--сheckbox-border-width) solid var(--сheckbox-border-color);
+  border-radius: var(--сheckbox-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.checkbox__label {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.checkbox--disabled {
+  opacity: var(--checkbox-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.checkbox__input:disabled {
+  cursor: not-allowed;
+}