@jonsoc/ui 1.1.34 → 1.1.49

package/src/components/button.css

@@ -1,165 +1,165 @@
-[data-component="button"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--radius-md);
-  text-decoration: none;
-  user-select: none;
-  cursor: default;
-  outline: none;
-  white-space: nowrap;
-
-  &[data-variant="primary"] {
-    background-color: var(--icon-strong-base);
-    border-color: var(--border-weak-base);
-    color: var(--icon-invert-base);
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-invert-base);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--icon-strong-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--icon-strong-focus);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--icon-strong-active);
-    }
-    &:disabled {
-      background-color: var(--icon-strong-disabled);
-
-      [data-slot="icon-svg"] {
-        color: var(--icon-invert-base);
-      }
-    }
-  }
-
-  &[data-variant="ghost"] {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--text-strong);
-
-    &:hover:not(:disabled) {
-      background-color: var(--surface-raised-base-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--surface-raised-base-hover);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--surface-raised-base-active);
-    }
-    &:disabled {
-      color: var(--text-weak);
-      opacity: 0.7;
-      cursor: not-allowed;
-    }
-    &[data-selected="true"]:not(:disabled) {
-      background-color: var(--surface-raised-base-hover);
-    }
-    &[data-active="true"] {
-      background-color: var(--surface-raised-base-active);
-    }
-  }
-
-  &[data-variant="secondary"] {
-    border: transparent;
-    background-color: var(--button-secondary-base);
-    color: var(--text-strong);
-    box-shadow: var(--shadow-xs-border);
-
-    &:hover:not(:disabled) {
-      background-color: var(--button-secondary-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
-    &:focus-visible:not(:active) {
-      background-color: var(--button-secondary-base);
-      box-shadow: var(--shadow-xs-border-focus);
-    }
-    &:focus-visible:active {
-      box-shadow: none;
-    }
-    &:active:not(:disabled) {
-      background-color: var(--button-secondary-base);
-      scale: 0.99;
-      transition: all 150ms ease-out;
-    }
-    &:disabled {
-      border-color: var(--border-disabled);
-      background-color: var(--surface-disabled);
-      color: var(--text-weak);
-      cursor: not-allowed;
-    }
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-strong-base);
-    }
-  }
-
-  &[data-size="small"] {
-    height: 22px;
-    padding: 0 8px;
-    &[data-icon] {
-      padding: 0 12px 0 4px;
-    }
-
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-large);
-    gap: 4px;
-
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &[data-size="normal"] {
-    height: 24px;
-    line-height: 24px;
-    padding: 0 6px;
-    &[data-icon] {
-      padding: 0 12px 0 4px;
-    }
-
-    font-size: var(--font-size-small);
-    gap: 6px;
-
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &[data-size="large"] {
-    height: 32px;
-    padding: 6px 12px;
-
-    &[data-icon] {
-      padding: 0 12px 0 8px;
-    }
-
-    gap: 8px;
-
-    /* text-14-medium */
-    font-family: var(--font-family-sans);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 142.857% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
+[data-component="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  user-select: none;
+  cursor: default;
+  outline: none;
+  white-space: nowrap;
+
+  &[data-variant="primary"] {
+    background-color: var(--icon-strong-base);
+    border-color: var(--border-weak-base);
+    color: var(--icon-invert-base);
+
+    [data-slot="icon-svg"] {
+      color: var(--icon-invert-base);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--icon-strong-hover);
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--icon-strong-focus);
+    }
+    &:active:not(:disabled) {
+      background-color: var(--icon-strong-active);
+    }
+    &:disabled {
+      background-color: var(--icon-strong-disabled);
+
+      [data-slot="icon-svg"] {
+        color: var(--icon-invert-base);
+      }
+    }
+  }
+
+  &[data-variant="ghost"] {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--text-strong);
+
+    &:hover:not(:disabled) {
+      background-color: var(--surface-raised-base-hover);
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--surface-raised-base-hover);
+    }
+    &:active:not(:disabled) {
+      background-color: var(--surface-raised-base-active);
+    }
+    &:disabled {
+      color: var(--text-weak);
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+    &[data-selected="true"]:not(:disabled) {
+      background-color: var(--surface-raised-base-hover);
+    }
+    &[data-active="true"] {
+      background-color: var(--surface-raised-base-active);
+    }
+  }
+
+  &[data-variant="secondary"] {
+    border: transparent;
+    background-color: var(--button-secondary-base);
+    color: var(--text-strong);
+    box-shadow: var(--shadow-xs-border);
+
+    &:hover:not(:disabled) {
+      background-color: var(--button-secondary-hover);
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--button-secondary-base);
+    }
+    &:focus-visible:not(:active) {
+      background-color: var(--button-secondary-base);
+      box-shadow: var(--shadow-xs-border-focus);
+    }
+    &:focus-visible:active {
+      box-shadow: none;
+    }
+    &:active:not(:disabled) {
+      background-color: var(--button-secondary-base);
+      scale: 0.99;
+      transition: all 150ms ease-out;
+    }
+    &:disabled {
+      border-color: var(--border-disabled);
+      background-color: var(--surface-disabled);
+      color: var(--text-weak);
+      cursor: not-allowed;
+    }
+
+    [data-slot="icon-svg"] {
+      color: var(--icon-strong-base);
+    }
+  }
+
+  &[data-size="small"] {
+    height: 22px;
+    padding: 0 8px;
+    &[data-icon] {
+      padding: 0 12px 0 4px;
+    }
+
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-large);
+    gap: 4px;
+
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &[data-size="normal"] {
+    height: 24px;
+    line-height: 24px;
+    padding: 0 6px;
+    &[data-icon] {
+      padding: 0 12px 0 4px;
+    }
+
+    font-size: var(--font-size-small);
+    gap: 6px;
+
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &[data-size="large"] {
+    height: 32px;
+    padding: 6px 12px;
+
+    &[data-icon] {
+      padding: 0 12px 0 8px;
+    }
+
+    gap: 8px;
+
+    /* text-14-medium */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 142.857% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

package/src/components/card.css

@@ -1,29 +1,29 @@
-[data-component="card"] {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--surface-inset-base);
-  border: 1px solid var(--border-weaker-base);
-  transition: background-color 0.15s ease;
-  border-radius: var(--radius-md);
-  padding: 6px 12px;
-  overflow: clip;
-
-  &[data-variant="error"] {
-    background-color: var(--surface-critical-weak);
-    border: 1px solid var(--border-critical-base);
-    color: rgba(218, 51, 25, 0.6);
-
-    /* text-12-regular */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
-
-    &[data-component="icon"] {
-      color: var(--icon-critical-active);
-    }
-  }
-}
+[data-component="card"] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--surface-inset-base);
+  border: 1px solid var(--border-weaker-base);
+  transition: background-color 0.15s ease;
+  border-radius: var(--radius-md);
+  padding: 6px 12px;
+  overflow: clip;
+
+  &[data-variant="error"] {
+    background-color: var(--surface-critical-weak);
+    border: 1px solid var(--border-critical-base);
+    color: rgba(218, 51, 25, 0.6);
+
+    /* text-12-regular */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    &[data-component="icon"] {
+      color: var(--icon-critical-active);
+    }
+  }
+}

package/src/components/checkbox.css

@@ -1,121 +1,121 @@
-[data-component="checkbox"] {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  cursor: default;
-
-  [data-slot="checkbox-checkbox-input"] {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  [data-slot="checkbox-checkbox-control"] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    padding: 2px;
-    aspect-ratio: 1;
-    flex-shrink: 0;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--border-weak-base);
-    /* background-color: var(--surface-weak); */
-  }
-
-  [data-slot="checkbox-checkbox-indicator"] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    color: var(--icon-base);
-    opacity: 0;
-  }
-
-  /* [data-slot="checkbox-checkbox-content"] { */
-  /* } */
-
-  [data-slot="checkbox-checkbox-label"] {
-    user-select: none;
-    color: var(--text-base);
-
-    /* text-12-regular */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="checkbox-checkbox-description"] {
-    color: var(--text-base);
-    font-family: var(--font-family-sans);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="checkbox-checkbox-error"] {
-    color: var(--text-error);
-    font-family: var(--font-family-sans);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"] {
-    border-color: var(--border-hover);
-    background-color: var(--surface-hover);
-  }
-
-  &:focus-within:not([data-readonly]) [data-slot="checkbox-checkbox-control"] {
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 2px var(--surface-focus);
-  }
-
-  &[data-checked] [data-slot="checkbox-checkbox-control"],
-  &[data-indeterminate] [data-slot="checkbox-checkbox-control"] {
-    border-color: var(--border-base);
-    background-color: var(--surface-weak);
-  }
-
-  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"],
-  &[data-indeterminate]:hover:not([data-disabled]) [data-slot="checkbox-checkbox-control"] {
-    border-color: var(--border-hover);
-    background-color: var(--surface-hover);
-  }
-
-  &[data-checked] [data-slot="checkbox-checkbox-indicator"],
-  &[data-indeterminate] [data-slot="checkbox-checkbox-indicator"] {
-    opacity: 1;
-  }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-  }
-
-  &[data-disabled] [data-slot="checkbox-checkbox-control"] {
-    border-color: var(--border-disabled);
-    background-color: var(--surface-disabled);
-  }
-
-  &[data-invalid] [data-slot="checkbox-checkbox-control"] {
-    border-color: var(--border-error);
-  }
-
-  &[data-readonly] {
-    cursor: default;
-    pointer-events: none;
-  }
-}
+[data-component="checkbox"] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: default;
+
+  [data-slot="checkbox-checkbox-input"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  [data-slot="checkbox-checkbox-control"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 2px;
+    aspect-ratio: 1;
+    flex-shrink: 0;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-weak-base);
+    /* background-color: var(--surface-weak); */
+  }
+
+  [data-slot="checkbox-checkbox-indicator"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--icon-base);
+    opacity: 0;
+  }
+
+  /* [data-slot="checkbox-checkbox-content"] { */
+  /* } */
+
+  [data-slot="checkbox-checkbox-label"] {
+    user-select: none;
+    color: var(--text-base);
+
+    /* text-12-regular */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="checkbox-checkbox-description"] {
+    color: var(--text-base);
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="checkbox-checkbox-error"] {
+    color: var(--text-error);
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-hover);
+    background-color: var(--surface-hover);
+  }
+
+  &:focus-within:not([data-readonly]) [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 2px var(--surface-focus);
+  }
+
+  &[data-checked] [data-slot="checkbox-checkbox-control"],
+  &[data-indeterminate] [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-base);
+    background-color: var(--surface-weak);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"],
+  &[data-indeterminate]:hover:not([data-disabled]) [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-hover);
+    background-color: var(--surface-hover);
+  }
+
+  &[data-checked] [data-slot="checkbox-checkbox-indicator"],
+  &[data-indeterminate] [data-slot="checkbox-checkbox-indicator"] {
+    opacity: 1;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  &[data-disabled] [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-disabled);
+    background-color: var(--surface-disabled);
+  }
+
+  &[data-invalid] [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-error);
+  }
+
+  &[data-readonly] {
+    cursor: default;
+    pointer-events: none;
+  }
+}

package/src/components/code.css

@@ -1,4 +1,4 @@
-[data-component="code"] {
-  content-visibility: auto;
-  overflow: hidden;
-}
+[data-component="code"] {
+  content-visibility: auto;
+  overflow: hidden;
+}