@latitude-ui/widgets 0.0.22 → 0.0.24

package/styles/_colors.scss

@@ -1,99 +0,0 @@
-$icon-color: #6d6e6f !default;
-$icon-color-hover: #1e1f21 !default;
-$icon-color-active: #1e1f21 !default;
-$icon-color-strong: #6d6e6f !default;
-$icon-color-disabled: #afabac !default;
-$icon-color-foreground: #ffffff !default;
-
-$text-color: #1e1f21 !default;
-$text-color-strong: #555555 !default;
-$text-color-subtle: #6d6e6f !default;
-$text-color-subtle-hover: #1e1f21 !default;
-$text-color-disabled: #afabac !default;
-$text-color-foreground: #ffffff !default;
-
-$shadow-color: rgba(109, 110, 111, .1) !default;
-$shadow-color-weak: rgba(109, 110, 111, .08) !default;
-$shadow-color-strong: rgba(109, 110, 111, .12) !default;
-
-$outline-color: #edeae9 !default;
-$outline-color-hover: #afabac !default;
-$outline-color-active: #6d6e6f !default;
-$outline-color-strong: #cfcbcb !default;
-
-$background-color: #ffffff !default;
-$background-color-hover: rgba(55, 23, 23, .03) !default;
-$background-color-active: rgba(55, 23, 23, .05) !default;
-$background-color-strong: #f5f3f3 !default;
-$background-color-subtle: #f9f8f8 !default;
-$background-color-subtle-hover: rgba(55, 23, 23, .05) !default;
-$background-color-subtle-active: rgba(55, 23, 23, .06) !default;
-
-$primary-color: #4573d2 !default;
-$primary-color-hover: #426dc6 !default;
-$primary-color-active: #3f66ba !default;
-
-$primary-color-weak: #f1f2fc !default;
-$primary-color-weak-hover: #e7e9fc !default;
-$primary-color-weak-active: #dbe0fd !default;
-
-$danger-color: #fa5252 !default;
-$danger-color-hover: #fa5252 !default;
-$danger-color-active: #fa5252 !default;
-
-$box-shadow-small: 0 0 0 1px #edeae9, 0 1px 4px 0 rgba(109, 110, 111, .08);
-$box-shadow-medium: 0 0 0 1px #edeae9, 0 3px 8px 0 rgba(109, 110, 111, .1);
-$box-shadow-medium-hover: 0 0 0 1px #afabac, 0 3px 8px 0 rgba(109, 110, 111, .1);
-$box-shadow-medium-active: 0 0 0 1px #6d6e6f, 0 3px 8px 0 rgba(109, 110, 111, .1);
-$box-shadow-large: 0 0 0 1px #edeae9, 0 6px 12px 0 rgba(109, 110, 111, .12);
-
-:root {
-  --lat-icon-color: #{$icon-color};
-  --lat-icon-color-hover: #{$icon-color-hover};
-  --lat-icon-color-active: #{$icon-color-active};
-  --lat-icon-color-strong: #{$icon-color-strong};
-  --lat-icon-color-disabled: #{$icon-color-disabled};
-  --lat-icon-color-foreground: #{$icon-color-foreground};
-
-  --lat-text-color: #{$text-color};
-  --lat-text-color-strong: #{$text-color-strong};
-  --lat-text-color-subtle: #{$text-color-subtle};
-  --lat-text-color-subtle-hover: #{$text-color-subtle-hover};
-  --lat-text-color-disabled: #{$text-color-disabled};
-  --lat-text-color-foreground: #{$text-color-foreground};
-
-  --lat-shadow-color: #{$shadow-color};
-  --lat-shadow-color-weak: #{$shadow-color-weak};
-  --lat-shadow-color-strong: #{$shadow-color-strong};
-
-  --lat-outline-color: #{$outline-color};
-  --lat-outline-color-hover: #{$outline-color-hover};
-  --lat-outline-color-active: #{$outline-color-active};
-  --lat-outline-color-strong: #{$outline-color-strong};
-
-  --lat-background-color: #{$background-color};
-  --lat-background-color-hover: #{$background-color-hover};
-  --lat-background-color-active: #{$background-color-active};
-  --lat-background-color-strong: #{$background-color-strong};
-  --lat-background-color-subtle: #{$background-color-subtle};
-  --lat-background-color-subtle-hover: #{$background-color-subtle-hover};
-  --lat-background-color-subtle-active: #{$background-color-subtle-active};
-
-  --lat-primary-color: #{$primary-color};
-  --lat-primary-color-hover: #{$primary-color-hover};
-  --lat-primary-color-active: #{$primary-color-active};
-
-  --lat-primary-color-weak: #{$primary-color-weak};
-  --lat-primary-color-weak-hover: #{$primary-color-weak-hover};
-  --lat-primary-color-weak-active: #{$primary-color-weak-active};
-
-  --lat-danger-color: #{$danger-color};
-  --lat-danger-color-hover: #{$danger-color-hover};
-  --lat-danger-color-active: #{$danger-color-active};
-
-  --lat-box-shadow-small: #{$box-shadow-small};
-  --lat-box-shadow-medium: #{$box-shadow-medium};
-  --lat-box-shadow-medium-hover: #{$box-shadow-medium-hover};
-  --lat-box-shadow-medium-active: #{$box-shadow-medium-active};
-  --lat-box-shadow-large: #{$box-shadow-large};
-}

package/styles/_defaults.scss

@@ -1,135 +0,0 @@
-
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: var(--lat-font-family-sans, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'), sans-serif;
-
-  font-size: 16px;
-  font-weight: var(--lat-font-weight-normal, 450);
-  line-height: 24px;
-
-  -webkit-text-size-adjust: 100%;
-  tab-size: 4;
-}
-
-
-body {
-  margin: 0;
-}
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-
-code,
-kbd,
-samp,
-pre {
-  font-family: var(--lat-font-famiy-monospace, ui-monospace, SFMono-Regular, inherit Consolas, 'Liberation Mono', Menlo), monospace;
-  font-size: 1em;
-}
-
-
-small {
-  font-size: 80%;
-}
-
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-
-table {
-  border-color: currentcolor;
-}
-
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button;
-}
-
-
-legend {
-  padding: 0;
-}
-
-
-progress {
-  vertical-align: baseline;
-}
-
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-
-[type='search'] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-
-
-summary {
-  display: list-item;
-}
-
-.lat-root {
-  display: flex;
-
-  overflow: hidden;
-  box-sizing: border-box;
-
-  width: var(--lat-layout-width, 100vw);
-  height: var(--lat-layout-height, 100vw);
-}
-
-
-

package/styles/_index.scss

@@ -1,11 +0,0 @@
-@use "colors";
-@use "typography";
-
-@use "defaults";
-
-@use "button";
-@use "icons";
-@use "listbox";
-
-@use "forms";
-

package/styles/_typography.scss

@@ -1,37 +0,0 @@
-$font-family-sans: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !default;
-$font-family-monospace: "Berkeley Mono", "SFMono Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
-
-$font-size-tiny: 0.625rem !default;
-$font-size-small: 0.75rem !default;
-$font-size-normal: 0.875rem !default;
-$font-size-medium: 1rem !default;
-$font-size-large: 1.25rem !default;
-
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-medium: 500 !default;
-$font-weight-semibold: 600 !default;
-$font-weight-bold: 700 !default;
-
-
-:root {
-  --lat-font-family-sans: #{$font-family-sans};
-  --lat-font-family-monospace: #{$font-family-monospace};
-
-  --lat-font-size-tiny: #{$font-size-tiny};
-  --lat-font-size-small: #{$font-size-small};
-  --lat-font-size-normal: #{$font-size-normal};
-  --lat-font-size-medium: #{$font-size-medium};
-  --lat-font-size-large: #{$font-size-large};
-
-  --lat-font-weight-light: #{$font-weight-light};
-  --lat-font-weight-normal: #{$font-weight-normal};
-  --lat-font-weight-medium: #{$font-weight-medium};
-  --lat-font-weight-semibold: #{$font-weight-semibold};
-  --lat-font-weight-bold: #{$font-weight-bold};
-
-  --lat-font-size: var(--lat-font-size-medium);
-  --lat-font-family: var(--lat-font-family-sans);
-  --lat-font-weight: var(--lat-font-weight-normal);
-
-}

package/styles/button/_index.scss

@@ -1,199 +0,0 @@
-
-lat-button {
-  overflow: hidden;
-  position: relative;
-
-  box-sizing: border-box;
-
-  display: inline-flex;
-
-  gap: 4px;
-  flex-shrink: 0;
-
-  align-items: center;
-  justify-content: center;
-
-  margin: 0;
-  padding: 0;
-
-  outline: none;
-
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  vertical-align: top;
-  text-decoration: none;
-  touch-action: manipulation;
-
-  border-width: 0;
-  border-color: transparent;
-  border-style: solid;
-  border-radius: 4px;
-
-  font-family: var(--lat-font-family-sans), sans-serif;
-  font-weight: var(--lat-font-weight-normal);
-  line-height: normal;
-
-  transition-property: background, border, color, fill, opacity;
-  transition-duration: 0.2s;
-
-  &[data-size] {
-    height: var(--lat-button-height);
-    padding: var(--lat-button-padding);
-    font-size: var(--lat-button-font-size);
-    line-height: var(--lat-button-line-height);
-  }
-
-  &[data-onlyicon="true"] {
-    width: var(--lat-button-height);
-    min-width: var(--lat-button-height);
-  }
-
-  &[data-size="sm"] {
-    --lat-button-height: 24px;
-    --lat-button-padding: 0 8px;
-    --lat-button-font-size: 12px;
-    --lat-button-line-height: 24px;
-  }
-
-  &[data-size="md"] {
-    --lat-button-height: 28px;
-    --lat-button-padding: 0 8px;
-    --lat-button-font-size: 12px;
-    --lat-button-line-height: 28px;
-  }
-
-  &[data-size="lg"] {
-    --lat-button-height: 32px;
-    --lat-button-padding: 0 10px;
-    --lat-button-font-size: 14px;
-    --lat-button-line-height: 32px;
-  }
-
-  &[data-variant="action"] {
-    fill: #ffffff;
-    color: #ffffff;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--lat-primary-color);
-    background-color: var(--lat-primary-color);
-
-    &:hover {
-      fill: #ffffff;
-      color: #ffffff;
-      border-color: var(--lat-primary-color-hover);
-      background-color: var(--lat-primary-color-hover);
-    }
-
-    &:active {
-      fill: #ffffff;
-      color: #ffffff;
-      border-color: var(--lat-primary-color-active);
-      background-color: var(--lat-primary-color-active);
-    }
-
-    &:focus-visible {
-    }
-  }
-
-  &[data-variant="default"] {
-    fill: var(--lat-icon-color);
-    color: var(--lat-text-color);
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--lat-outline-color-strong);
-    background-color: #ffffff;
-
-    &:hover {
-      fill: var(--lat-icon-hover);
-      color: var(--lat-text-color);
-      border-color: var(--lat-outline-color-hover);
-      background-color: var(--lat-background-color-subtle);
-    }
-
-    &:active {
-      fill: var(--lat-icon-hover);
-      color: var(--lat-text-color);
-      border-color: var(--lat-outline-color-active);
-      background-color: var(--lat-background-color-strong);
-    }
-
-    &:focus-visible {
-    }
-  }
-
-  &[data-variant="text"] {
-    fill: var(--lat-text-color);
-    color: var(--lat-text-color);
-    border-color: transparent;
-    background-color: transparent;
-
-    &:hover {
-      fill: var(--lat-text-color);
-      color: var(--lat-text-color);
-      border-color: var(--lat-background-color-hover);
-      background-color: var(--lat-background-color-hover);
-    }
-
-    &:active {
-      fill: var(--lat-text-color);
-      color: var(--lat-text-color);
-      border-color: var(--lat-background-color-active);
-      background-color: var(--lat-background-color-active);
-    }
-
-    &:focus-visible {
-    }
-  }
-
-  &[data-variant="subtle"] {
-    fill: var(--lat-text-color-subtle);
-    color: var(--lat-text-color-subtle);
-    border-color: transparent;
-    background-color: transparent;
-
-    &:hover {
-      fill: var(--lat-text-color);
-      color: var(--lat-text-color);
-      border-color: var(--lat-background-color-subtle-hover);
-      background-color: var(--lat-background-color-subtle-hover);
-    }
-
-    &:active {
-      fill: var(--lat-text-color);
-      color: var(--lat-text-color);
-      border-color: var(--lat-background-color-subtle-active);
-      background-color: var(--lat-background-color-subtle-active);
-    }
-
-    &:focus-visible {
-    }
-  }
-
-  &[data-variant="danger"] {
-
-  }
-
-  &[data-variant="success"] {
-
-  }
-
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-
-    fill: var(--lat-text-color-disabled);
-    color: var(--lat-text-color-disabled);
-    background: #ffffff;
-    border-color: var(--lat-outline-color);
-
-    &:hover,
-    &:active,
-    &:focus-visible {
-      fill: var(--lat-text-color-disabled);
-      color: var(--lat-text-color-disabled);
-      background: #ffffff;
-      border-color: var(--lat-outline-color);
-    }
-  }
-
-}