@skygraph/styles 0.2.4 → 0.6.6

package/components/popconfirm.css

@@ -1,95 +1,95 @@
-.sg-popconfirm-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.sg-popconfirm {
-  position: absolute;
-  z-index: 1030;
-  min-width: 200px;
-}
-
-.sg-popconfirm-top {
-  bottom: calc(100% + 8px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.sg-popconfirm-bottom {
-  top: calc(100% + 8px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.sg-popconfirm-left {
-  right: calc(100% + 8px);
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.sg-popconfirm-right {
-  left: calc(100% + 8px);
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.sg-popconfirm-arrow {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: var(--sg-color-bg-elevated);
-  border: 1px solid var(--sg-color-border-secondary);
-  transform: rotate(45deg);
-}
-
-.sg-popconfirm-top .sg-popconfirm-arrow {
-  bottom: -5px;
-  left: 50%;
-  margin-left: -4px;
-  border-top: none;
-  border-left: none;
-}
-
-.sg-popconfirm-bottom .sg-popconfirm-arrow {
-  top: -5px;
-  left: 50%;
-  margin-left: -4px;
-  border-bottom: none;
-  border-right: none;
-}
-
-.sg-popconfirm-inner {
-  background: var(--sg-color-bg-elevated);
-  border-radius: var(--sg-border-radius-lg);
-  box-shadow: var(--sg-shadow-lg);
-  border: 1px solid var(--sg-color-border-secondary);
-  padding: var(--sg-padding-md);
-}
-
-.sg-popconfirm-title {
-  display: flex;
-  align-items: center;
-  gap: var(--sg-padding-sm);
-  font-size: var(--sg-font-size);
-  font-weight: 500;
-  color: var(--sg-color-text);
-}
-
-.sg-popconfirm-icon {
-  color: var(--sg-color-warning);
-  font-size: var(--sg-font-size-lg);
-}
-
-.sg-popconfirm-description {
-  font-size: var(--sg-font-size-sm);
-  color: var(--sg-color-text-secondary);
-  margin-top: var(--sg-margin-xs);
-  margin-left: 24px;
-}
-
-.sg-popconfirm-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--sg-padding-sm);
-  margin-top: var(--sg-padding-sm);
-}
+.sg-popconfirm-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.sg-popconfirm {
+  position: absolute;
+  z-index: 1030;
+  min-width: 200px;
+}
+
+.sg-popconfirm-top {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.sg-popconfirm-bottom {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.sg-popconfirm-left {
+  right: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sg-popconfirm-right {
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sg-popconfirm-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--sg-color-bg-elevated);
+  border: 1px solid var(--sg-color-border-secondary);
+  transform: rotate(45deg);
+}
+
+.sg-popconfirm-top .sg-popconfirm-arrow {
+  bottom: -5px;
+  left: 50%;
+  margin-left: -4px;
+  border-top: none;
+  border-left: none;
+}
+
+.sg-popconfirm-bottom .sg-popconfirm-arrow {
+  top: -5px;
+  left: 50%;
+  margin-left: -4px;
+  border-bottom: none;
+  border-right: none;
+}
+
+.sg-popconfirm-inner {
+  background: var(--sg-color-bg-elevated);
+  border-radius: var(--sg-border-radius-lg);
+  box-shadow: var(--sg-shadow-lg);
+  border: 1px solid var(--sg-color-border-secondary);
+  padding: var(--sg-padding-md);
+}
+
+.sg-popconfirm-title {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  font-size: var(--sg-font-size);
+  font-weight: 500;
+  color: var(--sg-color-text);
+}
+
+.sg-popconfirm-icon {
+  color: var(--sg-color-warning);
+  font-size: var(--sg-font-size-lg);
+}
+
+.sg-popconfirm-description {
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-secondary);
+  margin-top: var(--sg-margin-xs);
+  margin-left: 24px;
+}
+
+.sg-popconfirm-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--sg-padding-sm);
+  margin-top: var(--sg-padding-sm);
+}

package/components/progress.css

@@ -1,116 +1,116 @@
-/* Line progress */
-.sg-progress-line {
-  display: flex;
-  align-items: center;
-  gap: var(--sg-padding-sm);
-  width: 100%;
-}
-
-.sg-progress-outer {
-  flex: 1;
-  min-width: 0;
-}
-
-.sg-progress-inner {
-  background: var(--sg-color-bg-hover);
-  border-radius: 100px;
-  overflow: hidden;
-}
-
-.sg-progress-bg {
-  height: 100%;
-  border-radius: 100px;
-  background: var(--sg-color-primary);
-  /*
-   * We deliberately avoid `transition: width` here. The previous transition
-   * would interpolate from the layout-default `width: 0` to the inline
-   * `width: X%`, which made the bar look empty until the animation finished —
-   * users perceived it as "no progress bar, just numbers" on initial paint.
-   * Width now snaps to its target value; live updates (e.g. demo dynamic %)
-   * still re-paint in the same frame.
-   */
-}
-
-.sg-progress-text {
-  flex-shrink: 0;
-  font-size: var(--sg-font-size-sm);
-  color: var(--sg-color-text-secondary);
-  min-width: 36px;
-  text-align: right;
-}
-
-/* Status colors */
-.sg-progress-success .sg-progress-bg {
-  background: var(--sg-color-success);
-}
-.sg-progress-error .sg-progress-bg {
-  background: var(--sg-color-error);
-}
-
-.sg-progress-success .sg-progress-text {
-  color: var(--sg-color-success);
-}
-.sg-progress-error .sg-progress-text {
-  color: var(--sg-color-error);
-}
-
-/* Active animation */
-.sg-progress-active .sg-progress-bg {
-  position: relative;
-}
-
-.sg-progress-active .sg-progress-bg::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  animation: sg-progress-active-anim 2s ease-in-out infinite;
-}
-
-@keyframes sg-progress-active-anim {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-/* Circle progress */
-.sg-progress-circle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.sg-progress-circle-trail {
-  stroke: var(--sg-color-bg-hover);
-}
-
-.sg-progress-circle-path {
-  stroke: var(--sg-color-primary);
-  transition: stroke-dashoffset var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-progress-success .sg-progress-circle-path {
-  stroke: var(--sg-color-success);
-}
-.sg-progress-error .sg-progress-circle-path {
-  stroke: var(--sg-color-error);
-}
-
-.sg-progress-circle-text {
-  position: absolute;
-  font-size: var(--sg-font-size-xl);
-  font-weight: 500;
-  color: var(--sg-color-text);
-}
-
-.sg-progress-success .sg-progress-circle-text {
-  color: var(--sg-color-success);
-}
-.sg-progress-error .sg-progress-circle-text {
-  color: var(--sg-color-error);
-}
+/* Line progress */
+.sg-progress-line {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  width: 100%;
+}
+
+.sg-progress-outer {
+  flex: 1;
+  min-width: 0;
+}
+
+.sg-progress-inner {
+  background: var(--sg-color-bg-hover);
+  border-radius: 100px;
+  overflow: hidden;
+}
+
+.sg-progress-bg {
+  height: 100%;
+  border-radius: 100px;
+  background: var(--sg-color-primary);
+  /*
+   * We deliberately avoid `transition: width` here. The previous transition
+   * would interpolate from the layout-default `width: 0` to the inline
+   * `width: X%`, which made the bar look empty until the animation finished —
+   * users perceived it as "no progress bar, just numbers" on initial paint.
+   * Width now snaps to its target value; live updates (e.g. demo dynamic %)
+   * still re-paint in the same frame.
+   */
+}
+
+.sg-progress-text {
+  flex-shrink: 0;
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-secondary);
+  min-width: 36px;
+  text-align: right;
+}
+
+/* Status colors */
+.sg-progress-success .sg-progress-bg {
+  background: var(--sg-color-success);
+}
+.sg-progress-error .sg-progress-bg {
+  background: var(--sg-color-error);
+}
+
+.sg-progress-success .sg-progress-text {
+  color: var(--sg-color-success);
+}
+.sg-progress-error .sg-progress-text {
+  color: var(--sg-color-error);
+}
+
+/* Active animation */
+.sg-progress-active .sg-progress-bg {
+  position: relative;
+}
+
+.sg-progress-active .sg-progress-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  animation: sg-progress-active-anim 2s ease-in-out infinite;
+}
+
+@keyframes sg-progress-active-anim {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Circle progress */
+.sg-progress-circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sg-progress-circle-trail {
+  stroke: var(--sg-color-bg-hover);
+}
+
+.sg-progress-circle-path {
+  stroke: var(--sg-color-primary);
+  transition: stroke-dashoffset var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-progress-success .sg-progress-circle-path {
+  stroke: var(--sg-color-success);
+}
+.sg-progress-error .sg-progress-circle-path {
+  stroke: var(--sg-color-error);
+}
+
+.sg-progress-circle-text {
+  position: absolute;
+  font-size: var(--sg-font-size-xl);
+  font-weight: 500;
+  color: var(--sg-color-text);
+}
+
+.sg-progress-success .sg-progress-circle-text {
+  color: var(--sg-color-success);
+}
+.sg-progress-error .sg-progress-circle-text {
+  color: var(--sg-color-error);
+}

package/components/radio.css

@@ -1,95 +1,95 @@
-/* Radio — custom painted dot on top of a visually-hidden native input.
- *
- * Like Checkbox, the native `<input type="radio">` stays in the DOM for
- * keyboard / form / a11y but is visually hidden. `.sg-radio-box` paints
- * the circle so demos can rebrand through `--sg-radio-*` tokens without
- * fighting `accent-color` limitations across browsers. */
-
-.sg-radio-group {
-  display: flex;
-  gap: var(--sg-padding-md);
-}
-
-.sg-radio-group-vertical {
-  flex-direction: column;
-}
-
-.sg-radio {
-  --sg-radio-size: 16px;
-  --sg-radio-border: var(--sg-color-border);
-  --sg-radio-border-hover: var(--sg-color-primary);
-  --sg-radio-bg: var(--sg-color-bg);
-  --sg-radio-bg-checked: var(--sg-color-primary);
-  --sg-radio-dot-color: var(--sg-color-white);
-
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sg-padding-xs);
-  cursor: pointer;
-  font-size: var(--sg-font-size);
-  color: var(--sg-color-text);
-  line-height: var(--sg-line-height);
-}
-
-.sg-radio-disabled {
-  color: var(--sg-color-text-disabled);
-  cursor: not-allowed;
-}
-
-.sg-radio-input {
-  position: absolute;
-  width: var(--sg-radio-size);
-  height: var(--sg-radio-size);
-  margin: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.sg-radio-box {
-  position: relative;
-  flex-shrink: 0;
-  display: inline-block;
-  width: var(--sg-radio-size);
-  height: var(--sg-radio-size);
-  border: 1px solid var(--sg-radio-border);
-  border-radius: 50%;
-  background: var(--sg-radio-bg);
-  transition:
-    background var(--sg-transition-duration) var(--sg-transition-timing),
-    border-color var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-radio:hover .sg-radio-box {
-  border-color: var(--sg-radio-border-hover);
-}
-
-.sg-radio-input:focus-visible ~ .sg-radio-box {
-  outline: 2px solid var(--sg-color-primary);
-  outline-offset: 2px;
-}
-
-.sg-radio-input:checked ~ .sg-radio-box {
-  background: var(--sg-radio-bg-checked);
-  border-color: var(--sg-radio-bg-checked);
-}
-
-.sg-radio-input:checked ~ .sg-radio-box::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--sg-radio-dot-color);
-  transform: translate(-50%, -50%);
-}
-
-.sg-radio-label {
-  user-select: none;
-}
-
-.sg-radio-group-loading {
-  --sg-spin-color: var(--sg-color-text-tertiary);
-}
+/* Radio — custom painted dot on top of a visually-hidden native input.
+ *
+ * Like Checkbox, the native `<input type="radio">` stays in the DOM for
+ * keyboard / form / a11y but is visually hidden. `.sg-radio-box` paints
+ * the circle so demos can rebrand through `--sg-radio-*` tokens without
+ * fighting `accent-color` limitations across browsers. */
+
+.sg-radio-group {
+  display: flex;
+  gap: var(--sg-padding-md);
+}
+
+.sg-radio-group-vertical {
+  flex-direction: column;
+}
+
+.sg-radio {
+  --sg-radio-size: 16px;
+  --sg-radio-border: var(--sg-color-border);
+  --sg-radio-border-hover: var(--sg-color-primary);
+  --sg-radio-bg: var(--sg-color-bg);
+  --sg-radio-bg-checked: var(--sg-color-primary);
+  --sg-radio-dot-color: var(--sg-color-white);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  cursor: pointer;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  line-height: var(--sg-line-height);
+}
+
+.sg-radio-disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-radio-input {
+  position: absolute;
+  width: var(--sg-radio-size);
+  height: var(--sg-radio-size);
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sg-radio-box {
+  position: relative;
+  flex-shrink: 0;
+  display: inline-block;
+  width: var(--sg-radio-size);
+  height: var(--sg-radio-size);
+  border: 1px solid var(--sg-radio-border);
+  border-radius: 50%;
+  background: var(--sg-radio-bg);
+  transition:
+    background var(--sg-transition-duration) var(--sg-transition-timing),
+    border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-radio:hover .sg-radio-box {
+  border-color: var(--sg-radio-border-hover);
+}
+
+.sg-radio-input:focus-visible ~ .sg-radio-box {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: 2px;
+}
+
+.sg-radio-input:checked ~ .sg-radio-box {
+  background: var(--sg-radio-bg-checked);
+  border-color: var(--sg-radio-bg-checked);
+}
+
+.sg-radio-input:checked ~ .sg-radio-box::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--sg-radio-dot-color);
+  transform: translate(-50%, -50%);
+}
+
+.sg-radio-label {
+  user-select: none;
+}
+
+.sg-radio-group-loading {
+  --sg-spin-color: var(--sg-color-text-tertiary);
+}