@skygraph/styles 0.2.4 → 0.6.6

package/components/gantt.css

@@ -1,166 +1,166 @@
-/* Gantt — task bars over a discrete time axis. */
-
-.sg-gantt {
-  background: var(--sg-color-bg);
-  border: 1px solid var(--sg-color-border);
-  border-radius: var(--sg-border-radius);
-  font-size: var(--sg-font-size);
-  color: var(--sg-color-text);
-  font-family: inherit;
-}
-
-.sg-gantt-sidebar {
-  background: var(--sg-color-bg-container);
-  border-right: 1px solid var(--sg-color-border);
-  overflow: hidden;
-}
-
-.sg-gantt-sidebar-header {
-  border-bottom: 1px solid var(--sg-color-border);
-  background: var(--sg-color-bg-elevated);
-}
-
-.sg-gantt-sidebar-row {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--sg-padding-md);
-  border-bottom: 1px solid var(--sg-color-border-secondary);
-  color: var(--sg-color-text);
-  font-size: var(--sg-font-size-sm);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sg-gantt-main {
-  background: var(--sg-color-bg);
-  position: relative;
-}
-
-.sg-gantt-header {
-  background: var(--sg-color-bg-elevated);
-  border-bottom: 1px solid var(--sg-color-border);
-}
-
-.sg-gantt-tick {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0 var(--sg-padding-xs);
-  font-size: var(--sg-font-size-sm);
-  color: var(--sg-color-text-secondary);
-  border-right: 1px solid var(--sg-color-border-secondary);
-  box-sizing: border-box;
-  /* Clip the label when the tick is narrower than the rendered text
-   * (e.g. day scale with columnWidth=24) — without this, adjacent
-   * labels visually pile up on each other. */
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.sg-gantt-grid {
-  /* Background grid of vertical column dividers — repeated linear-gradient
-   * over `--sg-gantt-column-width` (set via inline style by the component). */
-}
-
-.sg-gantt-row {
-  border-bottom: 1px solid var(--sg-color-border-secondary);
-}
-
-.sg-gantt-row:nth-child(even) {
-  background: var(--sg-color-bg-secondary);
-}
-
-.sg-gantt-bar {
-  background: var(--sg-color-primary);
-  color: var(--sg-color-white);
-  border-radius: var(--sg-border-radius-sm);
-  display: flex;
-  align-items: center;
-  padding: 0 var(--sg-padding-xs);
-  font-size: var(--sg-font-size-sm);
-  white-space: nowrap;
-  overflow: hidden;
-  /* The shadow token includes both an outer drop and an inner highlight,
-   * giving each bar a tiny 3D feel without any borders. Keeps a dense
-   * gantt looking organised even when bars overlap rows. */
-  box-shadow: var(--sg-gantt-bar-shadow);
-  box-sizing: border-box;
-  transition:
-    box-shadow var(--sg-transition-medium),
-    transform var(--sg-transition-medium),
-    filter var(--sg-transition-fast);
-}
-
-.sg-gantt-bar:hover {
-  box-shadow: var(--sg-gantt-bar-shadow-hover);
-  /* `filter: brightness(1.05)` lifts saturated bars without needing a
-   * dedicated "primary-hover" colour for every status. Negligible cost
-   * on modern compositors. */
-  filter: brightness(1.05);
-  transform: translateY(-1px);
-}
-
-.sg-gantt-bar-draggable {
-  cursor: grab;
-}
-
-.sg-gantt-bar-draggable:active {
-  cursor: grabbing;
-  transform: translateY(0);
-  filter: brightness(1.08);
-}
-
-.sg-gantt-bar-resizable {
-  /* hover state expands the resize handle visibility */
-}
-
-.sg-gantt-bar-progress {
-  background: var(--sg-color-primary-active);
-  border-radius: inherit;
-  opacity: 0.55;
-  pointer-events: none;
-}
-
-.sg-gantt-bar-label {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  /* Drop-shadow on the text increases legibility on saturated bar
-   * fills (esp. the bright primary blue). Cheap, single-line filter
-   * that doesn't disturb the bar background. */
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-}
-
-.sg-gantt-bar-resize {
-  background: transparent;
-  border-left: 1px solid var(--sg-color-border-secondary);
-  opacity: 0;
-  transition: opacity var(--sg-transition-fast);
-}
-
-.sg-gantt-bar:hover .sg-gantt-bar-resize {
-  opacity: 0.6;
-}
-
-.sg-gantt-bar-resize:hover,
-.sg-gantt-bar-resize:focus-visible {
-  opacity: 1;
-}
-
-.sg-gantt-deps {
-  color: var(--sg-gantt-dep-color);
-}
-
-.sg-gantt-dep {
-  /* stroke + marker colour come from `currentColor` set on .sg-gantt-deps.
-   * `stroke-linecap: round` + a slightly thicker stroke give dependency
-   * lines a hand-drawn feel that distinguishes them from grid lines. */
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.25;
-  transition: stroke var(--sg-transition-fast);
-}
-
-.sg-gantt-dep:hover {
-  stroke: var(--sg-color-primary);
-}
+/* Gantt — task bars over a discrete time axis. */
+
+.sg-gantt {
+  background: var(--sg-color-bg);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  font-family: inherit;
+}
+
+.sg-gantt-sidebar {
+  background: var(--sg-color-bg-container);
+  border-right: 1px solid var(--sg-color-border);
+  overflow: hidden;
+}
+
+.sg-gantt-sidebar-header {
+  border-bottom: 1px solid var(--sg-color-border);
+  background: var(--sg-color-bg-elevated);
+}
+
+.sg-gantt-sidebar-row {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--sg-padding-md);
+  border-bottom: 1px solid var(--sg-color-border-secondary);
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sg-gantt-main {
+  background: var(--sg-color-bg);
+  position: relative;
+}
+
+.sg-gantt-header {
+  background: var(--sg-color-bg-elevated);
+  border-bottom: 1px solid var(--sg-color-border);
+}
+
+.sg-gantt-tick {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 var(--sg-padding-xs);
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-secondary);
+  border-right: 1px solid var(--sg-color-border-secondary);
+  box-sizing: border-box;
+  /* Clip the label when the tick is narrower than the rendered text
+   * (e.g. day scale with columnWidth=24) — without this, adjacent
+   * labels visually pile up on each other. */
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.sg-gantt-grid {
+  /* Background grid of vertical column dividers — repeated linear-gradient
+   * over `--sg-gantt-column-width` (set via inline style by the component). */
+}
+
+.sg-gantt-row {
+  border-bottom: 1px solid var(--sg-color-border-secondary);
+}
+
+.sg-gantt-row:nth-child(even) {
+  background: var(--sg-color-bg-secondary);
+}
+
+.sg-gantt-bar {
+  background: var(--sg-color-primary);
+  color: var(--sg-color-white);
+  border-radius: var(--sg-border-radius-sm);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--sg-padding-xs);
+  font-size: var(--sg-font-size-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  /* The shadow token includes both an outer drop and an inner highlight,
+   * giving each bar a tiny 3D feel without any borders. Keeps a dense
+   * gantt looking organised even when bars overlap rows. */
+  box-shadow: var(--sg-gantt-bar-shadow);
+  box-sizing: border-box;
+  transition:
+    box-shadow var(--sg-transition-medium),
+    transform var(--sg-transition-medium),
+    filter var(--sg-transition-fast);
+}
+
+.sg-gantt-bar:hover {
+  box-shadow: var(--sg-gantt-bar-shadow-hover);
+  /* `filter: brightness(1.05)` lifts saturated bars without needing a
+   * dedicated "primary-hover" colour for every status. Negligible cost
+   * on modern compositors. */
+  filter: brightness(1.05);
+  transform: translateY(-1px);
+}
+
+.sg-gantt-bar-draggable {
+  cursor: grab;
+}
+
+.sg-gantt-bar-draggable:active {
+  cursor: grabbing;
+  transform: translateY(0);
+  filter: brightness(1.08);
+}
+
+.sg-gantt-bar-resizable {
+  /* hover state expands the resize handle visibility */
+}
+
+.sg-gantt-bar-progress {
+  background: var(--sg-color-primary-active);
+  border-radius: inherit;
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+.sg-gantt-bar-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  /* Drop-shadow on the text increases legibility on saturated bar
+   * fills (esp. the bright primary blue). Cheap, single-line filter
+   * that doesn't disturb the bar background. */
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+.sg-gantt-bar-resize {
+  background: transparent;
+  border-left: 1px solid var(--sg-color-border-secondary);
+  opacity: 0;
+  transition: opacity var(--sg-transition-fast);
+}
+
+.sg-gantt-bar:hover .sg-gantt-bar-resize {
+  opacity: 0.6;
+}
+
+.sg-gantt-bar-resize:hover,
+.sg-gantt-bar-resize:focus-visible {
+  opacity: 1;
+}
+
+.sg-gantt-deps {
+  color: var(--sg-gantt-dep-color);
+}
+
+.sg-gantt-dep {
+  /* stroke + marker colour come from `currentColor` set on .sg-gantt-deps.
+   * `stroke-linecap: round` + a slightly thicker stroke give dependency
+   * lines a hand-drawn feel that distinguishes them from grid lines. */
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.25;
+  transition: stroke var(--sg-transition-fast);
+}
+
+.sg-gantt-dep:hover {
+  stroke: var(--sg-color-primary);
+}

package/components/input-number.css

@@ -1,76 +1,76 @@
-.sg-input-number {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--sg-color-border);
-  border-radius: var(--sg-border-radius);
-  overflow: hidden;
-  --sg-spin-color: var(--sg-color-text-tertiary);
-}
-
-.sg-input-number-loading {
-  opacity: 0.65;
-}
-
-.sg-input-number .sg-spin {
-  margin-right: var(--sg-padding-xs);
-}
-
-.sg-input-number-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sg-height-md);
-  height: var(--sg-height-md);
-  border: none;
-  background: var(--sg-color-bg-secondary);
-  color: var(--sg-color-text);
-  cursor: pointer;
-  font-size: var(--sg-font-size);
-  user-select: none;
-  transition: background var(--sg-transition-duration);
-}
-
-.sg-input-number-btn:hover:not(:disabled) {
-  background: var(--sg-color-bg-hover);
-}
-
-.sg-input-number-btn:disabled {
-  color: var(--sg-color-text-disabled);
-  cursor: not-allowed;
-}
-
-.sg-input-number-input {
-  /* `flex: 1 1 60px` keeps the natural 60px default width when the wrapper
-     is sized intrinsically (inline-flex) and lets the field fill the space
-     when consumers stretch the wrapper via `style={{ width: '100%' }}` etc.
-     `min-width: 0` lets the input shrink inside narrow containers. */
-  flex: 1 1 60px;
-  min-width: 0;
-  height: var(--sg-height-md);
-  border: none;
-  text-align: center;
-  font-size: var(--sg-font-size);
-  color: var(--sg-color-text);
-  background: var(--sg-color-bg-container);
-  outline: none;
-  font-family: inherit;
-}
-
-.sg-input-number-small .sg-input-number-btn {
-  width: var(--sg-height-sm);
-  height: var(--sg-height-sm);
-}
-.sg-input-number-small .sg-input-number-input {
-  height: var(--sg-height-sm);
-  flex-basis: 48px;
-  font-size: var(--sg-font-size-sm);
-}
-.sg-input-number-large .sg-input-number-btn {
-  width: var(--sg-height-lg);
-  height: var(--sg-height-lg);
-}
-.sg-input-number-large .sg-input-number-input {
-  height: var(--sg-height-lg);
-  flex-basis: 72px;
-  font-size: var(--sg-font-size-lg);
-}
+.sg-input-number {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  overflow: hidden;
+  --sg-spin-color: var(--sg-color-text-tertiary);
+}
+
+.sg-input-number-loading {
+  opacity: 0.65;
+}
+
+.sg-input-number .sg-spin {
+  margin-right: var(--sg-padding-xs);
+}
+
+.sg-input-number-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sg-height-md);
+  height: var(--sg-height-md);
+  border: none;
+  background: var(--sg-color-bg-secondary);
+  color: var(--sg-color-text);
+  cursor: pointer;
+  font-size: var(--sg-font-size);
+  user-select: none;
+  transition: background var(--sg-transition-duration);
+}
+
+.sg-input-number-btn:hover:not(:disabled) {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-input-number-btn:disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-input-number-input {
+  /* `flex: 1 1 60px` keeps the natural 60px default width when the wrapper
+     is sized intrinsically (inline-flex) and lets the field fill the space
+     when consumers stretch the wrapper via `style={{ width: '100%' }}` etc.
+     `min-width: 0` lets the input shrink inside narrow containers. */
+  flex: 1 1 60px;
+  min-width: 0;
+  height: var(--sg-height-md);
+  border: none;
+  text-align: center;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  background: var(--sg-color-bg-container);
+  outline: none;
+  font-family: inherit;
+}
+
+.sg-input-number-small .sg-input-number-btn {
+  width: var(--sg-height-sm);
+  height: var(--sg-height-sm);
+}
+.sg-input-number-small .sg-input-number-input {
+  height: var(--sg-height-sm);
+  flex-basis: 48px;
+  font-size: var(--sg-font-size-sm);
+}
+.sg-input-number-large .sg-input-number-btn {
+  width: var(--sg-height-lg);
+  height: var(--sg-height-lg);
+}
+.sg-input-number-large .sg-input-number-input {
+  height: var(--sg-height-lg);
+  flex-basis: 72px;
+  font-size: var(--sg-font-size-lg);
+}