@skygraph/styles 0.2.4 → 0.6.6

package/components/switch.css

@@ -1,75 +1,75 @@
-.sg-switch {
-  /* Off state uses a dedicated token so demos can rebrand without
-   * touching `--sg-color-text-disabled` (which is also used by the
-   * disabled visual state — overriding it makes every control look
-   * disabled). */
-  --sg-switch-bg: color-mix(in srgb, var(--sg-color-text) 25%, transparent);
-  --sg-switch-bg-checked: var(--sg-color-primary);
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  min-width: 44px;
-  height: 22px;
-  padding: 0;
-  border: none;
-  border-radius: 11px;
-  background: var(--sg-switch-bg);
-  cursor: pointer;
-  transition: background var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-switch-small {
-  min-width: 28px;
-  height: 16px;
-  border-radius: 8px;
-}
-
-.sg-switch-checked {
-  background: var(--sg-switch-bg-checked);
-}
-
-.sg-switch-disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.sg-switch-handle {
-  position: absolute;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--sg-color-white);
-  box-shadow: var(--sg-shadow-sm);
-  transition: left var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-switch-small .sg-switch-handle {
-  width: 12px;
-  height: 12px;
-}
-
-.sg-switch-checked .sg-switch-handle {
-  left: calc(100% - 20px);
-}
-
-.sg-switch-small.sg-switch-checked .sg-switch-handle {
-  left: calc(100% - 14px);
-}
-
-.sg-switch-inner {
-  display: flex;
-  align-items: center;
-  padding: 0 7px 0 25px;
-  font-size: var(--sg-font-size-sm);
-  color: var(--sg-color-white);
-  white-space: nowrap;
-}
-
-.sg-switch-checked .sg-switch-inner {
-  padding: 0 25px 0 7px;
-}
-
-.sg-switch-loading {
-  --sg-spin-color: var(--sg-color-white);
-}
+.sg-switch {
+  /* Off state uses a dedicated token so demos can rebrand without
+   * touching `--sg-color-text-disabled` (which is also used by the
+   * disabled visual state — overriding it makes every control look
+   * disabled). */
+  --sg-switch-bg: color-mix(in srgb, var(--sg-color-text) 25%, transparent);
+  --sg-switch-bg-checked: var(--sg-color-primary);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 44px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 11px;
+  background: var(--sg-switch-bg);
+  cursor: pointer;
+  transition: background var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-switch-small {
+  min-width: 28px;
+  height: 16px;
+  border-radius: 8px;
+}
+
+.sg-switch-checked {
+  background: var(--sg-switch-bg-checked);
+}
+
+.sg-switch-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.sg-switch-handle {
+  position: absolute;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--sg-color-white);
+  box-shadow: var(--sg-shadow-sm);
+  transition: left var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-switch-small .sg-switch-handle {
+  width: 12px;
+  height: 12px;
+}
+
+.sg-switch-checked .sg-switch-handle {
+  left: calc(100% - 20px);
+}
+
+.sg-switch-small.sg-switch-checked .sg-switch-handle {
+  left: calc(100% - 14px);
+}
+
+.sg-switch-inner {
+  display: flex;
+  align-items: center;
+  padding: 0 7px 0 25px;
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-white);
+  white-space: nowrap;
+}
+
+.sg-switch-checked .sg-switch-inner {
+  padding: 0 25px 0 7px;
+}
+
+.sg-switch-loading {
+  --sg-spin-color: var(--sg-color-white);
+}

package/components/table.css

@@ -586,7 +586,15 @@
   border-right: none;
 }
 
-.sg-table-bordered .sg-table-grid {
+/* The bordered frame + rounded-corner clip lives on the scroll container,
+ * NOT on the inner grid. `overflow: hidden` on the grid would sit between a
+ * sticky header cell and its real scroll ancestor (`.sg-table-scroll`),
+ * turning the grid into the nearest scroll container — which never scrolls,
+ * so `position: sticky` on the header silently stops working. Anchoring the
+ * clip on `.sg-table-scroll` keeps sticky headers pinned while still masking
+ * the corners. The `overflow: hidden` here is overridden inline by
+ * `Table.tsx` (to `auto`) on the axes that opt into scrolling. */
+.sg-table-bordered .sg-table-scroll {
   border: 1px solid var(--sg-color-border);
   border-radius: var(--sg-border-radius);
   overflow: hidden;

package/components/tabs.css

@@ -1,137 +1,137 @@
-/* ── Shared ─────────────────────────────────────────────────────────── */
-
-.sg-tabs {
-  font-size: var(--sg-font-size);
-}
-
-/* ── Size variants ──────────────────────────────────────────────────── */
-
-.sg-tabs-small {
-  font-size: var(--sg-font-size-sm);
-}
-
-/* Extra `.sg-tabs` qualifier keeps these ahead of `.sg-tabs-line/card .sg-tabs-tab`
- * (same base specificity, defined later in the file). */
-.sg-tabs.sg-tabs-small .sg-tabs-tab {
-  padding: var(--sg-padding-xs) var(--sg-padding-md);
-}
-
-.sg-tabs-large {
-  font-size: var(--sg-font-size-lg);
-}
-
-.sg-tabs.sg-tabs-large .sg-tabs-tab {
-  padding: var(--sg-padding-md) var(--sg-padding-xl);
-}
-
-.sg-tabs-tab-disabled {
-  color: var(--sg-color-text-disabled);
-  cursor: not-allowed;
-}
-
-.sg-tabs-tab-loading {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sg-padding-xs);
-  --sg-spin-color: var(--sg-color-text-tertiary);
-}
-
-.sg-tabs-tab-loading.sg-tabs-tab-active {
-  --sg-spin-color: var(--sg-color-primary);
-}
-
-.sg-tabs-content {
-  color: var(--sg-color-text);
-}
-
-/* ── Line (minimal underline) ───────────────────────────────────────── */
-
-.sg-tabs-line .sg-tabs-nav {
-  display: flex;
-  border-bottom: 1px solid var(--sg-color-border-secondary);
-  margin-bottom: var(--sg-margin-md);
-}
-
-.sg-tabs-line .sg-tabs-tab {
-  padding: var(--sg-padding-sm) var(--sg-padding-lg);
-  cursor: pointer;
-  color: var(--sg-color-text-secondary);
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  transition: all var(--sg-transition-duration);
-  user-select: none;
-}
-
-.sg-tabs-line .sg-tabs-tab:hover {
-  color: var(--sg-color-primary-hover);
-}
-
-.sg-tabs-line .sg-tabs-tab-active {
-  color: var(--sg-color-primary);
-  border-bottom-color: var(--sg-color-primary);
-}
-
-/* ── Card (classic bordered tabs + panel) ─────────────────────────── */
-
-.sg-tabs-card {
-  border: 1px solid var(--sg-color-border-secondary);
-  border-radius: var(--sg-border-radius);
-  overflow: hidden;
-  background: var(--sg-color-bg);
-}
-
-.sg-tabs-card .sg-tabs-nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0;
-  margin: 0;
-  padding: 4px 4px 0;
-  background: var(--sg-color-bg-secondary);
-  border-bottom: none;
-}
-
-.sg-tabs-card .sg-tabs-tab {
-  /* Reserve the same vertical space for active and idle tabs so flipping
-   * between them never resizes the nav strip (no more 1px jitter on tab
-   * switch). The bottom border is always drawn but transparent until the
-   * tab becomes active. */
-  padding: var(--sg-padding-sm) var(--sg-padding-lg);
-  cursor: pointer;
-  margin: 0 2px -1px 0;
-  color: var(--sg-color-text-secondary);
-  border: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-radius: var(--sg-border-radius-sm) var(--sg-border-radius-sm) 0 0;
-  background: transparent;
-  transition:
-    color var(--sg-transition-duration),
-    background var(--sg-transition-duration),
-    border-color var(--sg-transition-duration);
-  user-select: none;
-  position: relative;
-  z-index: 0;
-}
-
-.sg-tabs-card .sg-tabs-tab:hover {
-  color: var(--sg-color-primary-hover);
-  background: color-mix(in srgb, var(--sg-color-bg) 55%, var(--sg-color-bg-secondary));
-}
-
-.sg-tabs-card .sg-tabs-tab-active {
-  color: var(--sg-color-primary);
-  background: var(--sg-color-bg);
-  border-color: var(--sg-color-border-secondary);
-  border-bottom-color: var(--sg-color-bg);
-  z-index: 1;
-}
-
-.sg-tabs-card .sg-tabs-tab-active:hover {
-  color: var(--sg-color-primary);
-}
-
-.sg-tabs-card .sg-tabs-content {
-  margin: 0;
-  padding: var(--sg-padding-md) var(--sg-padding-lg);
-  border-top: 1px solid var(--sg-color-border-secondary);
-  min-height: 0;
-}
+/* ── Shared ─────────────────────────────────────────────────────────── */
+
+.sg-tabs {
+  font-size: var(--sg-font-size);
+}
+
+/* ── Size variants ──────────────────────────────────────────────────── */
+
+.sg-tabs-small {
+  font-size: var(--sg-font-size-sm);
+}
+
+/* Extra `.sg-tabs` qualifier keeps these ahead of `.sg-tabs-line/card .sg-tabs-tab`
+ * (same base specificity, defined later in the file). */
+.sg-tabs.sg-tabs-small .sg-tabs-tab {
+  padding: var(--sg-padding-xs) var(--sg-padding-md);
+}
+
+.sg-tabs-large {
+  font-size: var(--sg-font-size-lg);
+}
+
+.sg-tabs.sg-tabs-large .sg-tabs-tab {
+  padding: var(--sg-padding-md) var(--sg-padding-xl);
+}
+
+.sg-tabs-tab-disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-tabs-tab-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  --sg-spin-color: var(--sg-color-text-tertiary);
+}
+
+.sg-tabs-tab-loading.sg-tabs-tab-active {
+  --sg-spin-color: var(--sg-color-primary);
+}
+
+.sg-tabs-content {
+  color: var(--sg-color-text);
+}
+
+/* ── Line (minimal underline) ───────────────────────────────────────── */
+
+.sg-tabs-line .sg-tabs-nav {
+  display: flex;
+  border-bottom: 1px solid var(--sg-color-border-secondary);
+  margin-bottom: var(--sg-margin-md);
+}
+
+.sg-tabs-line .sg-tabs-tab {
+  padding: var(--sg-padding-sm) var(--sg-padding-lg);
+  cursor: pointer;
+  color: var(--sg-color-text-secondary);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: all var(--sg-transition-duration);
+  user-select: none;
+}
+
+.sg-tabs-line .sg-tabs-tab:hover {
+  color: var(--sg-color-primary-hover);
+}
+
+.sg-tabs-line .sg-tabs-tab-active {
+  color: var(--sg-color-primary);
+  border-bottom-color: var(--sg-color-primary);
+}
+
+/* ── Card (classic bordered tabs + panel) ─────────────────────────── */
+
+.sg-tabs-card {
+  border: 1px solid var(--sg-color-border-secondary);
+  border-radius: var(--sg-border-radius);
+  overflow: hidden;
+  background: var(--sg-color-bg);
+}
+
+.sg-tabs-card .sg-tabs-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  margin: 0;
+  padding: 4px 4px 0;
+  background: var(--sg-color-bg-secondary);
+  border-bottom: none;
+}
+
+.sg-tabs-card .sg-tabs-tab {
+  /* Reserve the same vertical space for active and idle tabs so flipping
+   * between them never resizes the nav strip (no more 1px jitter on tab
+   * switch). The bottom border is always drawn but transparent until the
+   * tab becomes active. */
+  padding: var(--sg-padding-sm) var(--sg-padding-lg);
+  cursor: pointer;
+  margin: 0 2px -1px 0;
+  color: var(--sg-color-text-secondary);
+  border: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  border-radius: var(--sg-border-radius-sm) var(--sg-border-radius-sm) 0 0;
+  background: transparent;
+  transition:
+    color var(--sg-transition-duration),
+    background var(--sg-transition-duration),
+    border-color var(--sg-transition-duration);
+  user-select: none;
+  position: relative;
+  z-index: 0;
+}
+
+.sg-tabs-card .sg-tabs-tab:hover {
+  color: var(--sg-color-primary-hover);
+  background: color-mix(in srgb, var(--sg-color-bg) 55%, var(--sg-color-bg-secondary));
+}
+
+.sg-tabs-card .sg-tabs-tab-active {
+  color: var(--sg-color-primary);
+  background: var(--sg-color-bg);
+  border-color: var(--sg-color-border-secondary);
+  border-bottom-color: var(--sg-color-bg);
+  z-index: 1;
+}
+
+.sg-tabs-card .sg-tabs-tab-active:hover {
+  color: var(--sg-color-primary);
+}
+
+.sg-tabs-card .sg-tabs-content {
+  margin: 0;
+  padding: var(--sg-padding-md) var(--sg-padding-lg);
+  border-top: 1px solid var(--sg-color-border-secondary);
+  min-height: 0;
+}

package/components/tag.css

@@ -1,61 +1,61 @@
-.sg-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 var(--sg-padding-sm);
-  height: 22px;
-  font-size: var(--sg-font-size-sm);
-  line-height: 20px;
-  white-space: nowrap;
-  border-radius: var(--sg-border-radius-sm);
-  border: 1px solid var(--sg-color-border);
-  background: var(--sg-color-bg-secondary);
-  color: var(--sg-color-text);
-  transition: all var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-tag-borderless {
-  border-color: transparent;
-}
-
-.sg-tag-default {
-  background: var(--sg-color-bg-secondary);
-  border-color: var(--sg-color-border);
-  color: var(--sg-color-text);
-}
-
-.sg-tag-success {
-  background: var(--sg-color-success-bg);
-  border-color: var(--sg-color-success);
-  color: var(--sg-color-success);
-}
-
-.sg-tag-error {
-  background: var(--sg-color-error-bg);
-  border-color: var(--sg-color-error);
-  color: var(--sg-color-error);
-}
-
-.sg-tag-warning {
-  background: var(--sg-color-warning-bg);
-  border-color: var(--sg-color-warning);
-  color: var(--sg-color-warning);
-}
-
-.sg-tag-processing {
-  background: var(--sg-color-primary-bg);
-  border-color: var(--sg-color-primary);
-  color: var(--sg-color-primary);
-}
-
-.sg-tag-close {
-  cursor: pointer;
-  font-size: 10px;
-  color: inherit;
-  opacity: 0.6;
-  transition: opacity var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-tag-close:hover {
-  opacity: 1;
-}
+.sg-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 var(--sg-padding-sm);
+  height: 22px;
+  font-size: var(--sg-font-size-sm);
+  line-height: 20px;
+  white-space: nowrap;
+  border-radius: var(--sg-border-radius-sm);
+  border: 1px solid var(--sg-color-border);
+  background: var(--sg-color-bg-secondary);
+  color: var(--sg-color-text);
+  transition: all var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-tag-borderless {
+  border-color: transparent;
+}
+
+.sg-tag-default {
+  background: var(--sg-color-bg-secondary);
+  border-color: var(--sg-color-border);
+  color: var(--sg-color-text);
+}
+
+.sg-tag-success {
+  background: var(--sg-color-success-bg);
+  border-color: var(--sg-color-success);
+  color: var(--sg-color-success);
+}
+
+.sg-tag-error {
+  background: var(--sg-color-error-bg);
+  border-color: var(--sg-color-error);
+  color: var(--sg-color-error);
+}
+
+.sg-tag-warning {
+  background: var(--sg-color-warning-bg);
+  border-color: var(--sg-color-warning);
+  color: var(--sg-color-warning);
+}
+
+.sg-tag-processing {
+  background: var(--sg-color-primary-bg);
+  border-color: var(--sg-color-primary);
+  color: var(--sg-color-primary);
+}
+
+.sg-tag-close {
+  cursor: pointer;
+  font-size: 10px;
+  color: inherit;
+  opacity: 0.6;
+  transition: opacity var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-tag-close:hover {
+  opacity: 1;
+}

package/components/textarea.css

@@ -1,22 +1,22 @@
-.sg-textarea-wrapper {
-  position: relative;
-  display: block;
-}
-
-.sg-textarea-wrapper-loading {
-  --sg-spin-color: var(--sg-color-text-tertiary);
-}
-
-.sg-textarea-wrapper .sg-spin {
-  position: absolute;
-  right: var(--sg-padding-sm);
-  top: var(--sg-padding-sm);
-}
-
-.sg-textarea-count {
-  display: block;
-  text-align: right;
-  font-size: var(--sg-font-size-sm);
-  color: var(--sg-color-text-tertiary);
-  margin-top: var(--sg-margin-xs);
-}
+.sg-textarea-wrapper {
+  position: relative;
+  display: block;
+}
+
+.sg-textarea-wrapper-loading {
+  --sg-spin-color: var(--sg-color-text-tertiary);
+}
+
+.sg-textarea-wrapper .sg-spin {
+  position: absolute;
+  right: var(--sg-padding-sm);
+  top: var(--sg-padding-sm);
+}
+
+.sg-textarea-count {
+  display: block;
+  text-align: right;
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-tertiary);
+  margin-top: var(--sg-margin-xs);
+}