@hellboy/ds 0.1.2

package/src/style/components/switch/switch.css

@@ -0,0 +1,267 @@
+/**
+ * Switch Component Styles
+ * Toggle switch with optional icons
+ */
+
+.switch__wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.switch__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.switch__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.switch__track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-1);
+  border: none;
+  outline: 2px solid var(--color-foreground-3);
+  outline-offset: -2px;
+  transition: outline-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
+  overflow: hidden;
+}
+
+.switch__thumb {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--color-action-primary);
+  border: 2px solid var(--color-action-primary);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease, background-color 0.1s ease;
+  z-index: 1;
+}
+
+.switch__icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--color-foreground-2);
+  transition: all 0.2s ease;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.switch__icon--on {
+  /* Centered in thumb */
+}
+
+.switch__icon--off {
+  /* Centered in thumb */
+}
+
+/* Size variants */
+.switch--sm {
+  width: 36px;
+  height: 20px;
+}
+
+.switch--sm .switch__track {
+  width: 36px;
+  height: 20px;
+}
+
+.switch--sm .switch__thumb {
+  width: 14px;
+  height: 14px;
+  margin: 0 2px;
+}
+
+.switch--sm.switch--checked .switch__thumb {
+  transform: translateX(16px);
+}
+
+.switch--md {
+  width: 44px;
+  height: 24px;
+}
+
+.switch--md .switch__track {
+  width: 44px;
+  height: 24px;
+}
+
+.switch--md .switch__thumb {
+  width: 18px;
+  height: 18px;
+  margin: 0 2px;
+}
+
+.switch--md.switch--checked .switch__thumb {
+  transform: translateX(20px);
+}
+
+.switch--lg {
+  width: 52px;
+  height: 28px;
+}
+
+.switch--lg .switch__track {
+  width: 52px;
+  height: 28px;
+}
+
+.switch--lg .switch__thumb {
+  width: 22px;
+  height: 22px;
+  margin: 0 2px;
+}
+
+.switch--lg.switch--checked .switch__thumb {
+  transform: translateX(24px);
+}
+
+/* Checked state */
+.switch--checked .switch__track {
+  background-color: var(--color-accent);
+  outline-color: var(--color-accent);
+}
+
+.switch--checked .switch__thumb {
+  background-color: var(--color-on-accent);
+  border-color: var(--color-accent);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+/* Hover/Focus states */
+.switch__input:hover + .switch__track {
+  outline-color: var(--color-action-primary-hover);
+}
+
+.switch__input:focus + .switch__track {
+  outline-color: var(--color-action-primary);
+  box-shadow: 0 0 0 3px hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 0.1);
+}
+
+.switch__input:hover + .switch__track .switch__thumb,
+.switch__input:focus + .switch__track .switch__thumb {
+  border-color: var(--color-action-primary-hover);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+.switch--checked .switch__input:hover + .switch__track {
+  outline-color: var(--color-accent);
+}
+
+.switch--checked .switch__input:focus + .switch__track {
+  outline-color: var(--color-accent);
+  box-shadow: 0 0 0 3px hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 0.1);
+}
+
+.switch--checked .switch__input:hover + .switch__track .switch__thumb,
+.switch--checked .switch__input:focus + .switch__track .switch__thumb {
+  border-color: var(--color-accent);
+}
+
+/* Active state */
+.switch__input:active + .switch__track .switch__thumb {
+  transform: scale(1.2);
+  border-color: var(--color-action-primary-active);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+}
+
+.switch--checked .switch__input:active + .switch__track .switch__thumb {
+  border-color: var(--color-accent);
+}
+
+.switch--checked .switch__icon--on {
+  opacity: 1;
+  color: var(--color-accent);
+}
+
+.switch--checked .switch__icon--off {
+  opacity: 0;
+}
+
+/* Unchecked state - show off icon if present */
+.switch:not(.switch--checked) .switch__icon--off {
+  opacity: 1;
+  color: var(--color-foreground-2);
+}
+
+.switch:not(.switch--checked) .switch__icon--on {
+  opacity: 0;
+}
+
+/* Disabled state */
+.switch--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.switch--disabled .switch__label {
+  cursor: not-allowed;
+}
+
+.switch--disabled .switch__thumb {
+  border-color: var(--color-foreground-3);
+  background-color: var(--color-bg-3);
+  opacity: 0.6;
+}
+
+/* Error state */
+.switch--error .switch__track {
+  outline-color: var(--color-error);
+}
+
+.switch--error.switch--checked .switch__track {
+  background-color: var(--color-error);
+  outline-color: var(--color-error);
+}
+
+/* Text and messages */
+.switch__text {
+  font-size: var(--font-size-sm);
+  color: var(--color-foreground-1);
+  line-height: 1.5;
+}
+
+.switch__message {
+  margin-top: var(--spacing-1);
+}
+
+.switch__error-text {
+  font-size: var(--font-size-xs);
+  color: var(--color-error);
+}
+
+.switch__helper-text {
+  font-size: var(--font-size-xs);
+  color: var(--color-foreground-3);
+}
+
+/* Dark theme adjustments */
+:root[data-theme="dark"] .switch__track {
+  background-color: var(--color-bg-2);
+  outline-color: var(--color-foreground-4);
+}
+
+:root[data-theme="dark"] .switch:not(.switch--checked) .switch__icon--off {
+  color: var(--color-foreground-4);
+}

package/src/style/components/table/table.css

@@ -0,0 +1,108 @@
+/* table.css */
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+}
+
+/* Size variants */
+.table--sm {
+  font-size: var(--font-size-xs);
+}
+
+.table--sm .table__cell,
+.table--sm .table__cell--header {
+  padding: var(--spacing-2) var(--spacing-3);
+}
+
+.table--md .table__cell,
+.table--md .table__cell--header {
+  padding: var(--spacing-3) var(--spacing-4);
+}
+
+.table--lg .table__cell,
+.table--lg .table__cell--header {
+  padding: var(--spacing-4) var(--spacing-6);
+}
+
+/* Default padding for md size */
+.table__cell,
+.table__cell--header {
+  padding: var(--spacing-3) var(--spacing-4);
+  text-align: left;
+  vertical-align: top;
+}
+
+.table__cell--header {
+  font-weight: var(--font-weight-semibold);
+  background-color: var(--color-bg-2);
+  border-bottom: 1px solid var(--color-foreground-2);
+  color: var(--color-foreground-1);
+}
+
+.table__cell {
+  color: var(--color-foreground-1);
+  border-bottom: 1px solid var(--color-foreground-2);
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+  transition: background-color var(--transition-base, 0.2s ease);
+}
+
+.table__row:hover .table__cell:not(.table__cell--header) {
+  background-color: transparent;
+}
+
+/* Bordered variant */
+.table--bordered {
+  border: 1px solid var(--color-foreground-2);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.table--bordered .table__cell,
+.table--bordered .table__cell--header {
+  border-right: 1px solid var(--color-foreground-2);
+  border-right-color: rgba(0, 0, 0, 0.1);
+}
+
+.table--bordered .table__cell:last-child,
+.table--bordered .table__cell--header:last-child {
+  border-right: none;
+}
+
+.table--bordered .table__row:last-child .table__cell {
+  border-bottom: none;
+}
+
+/* Striped variant - zebra pattern using background color variations */
+.table--striped tbody .table__row:nth-child(odd) {
+  background-color: var(--color-bg-3);
+}
+
+.table--striped tbody .table__row:nth-child(even) {
+  background-color: var(--color-bg-2);
+}
+
+.table--striped tbody .table__row:nth-child(even) .table__cell {
+  background-color: transparent;
+}
+
+.table--striped tbody .table__row:nth-child(odd) .table__cell {
+  background-color: transparent;
+}
+
+/* Hover variant */
+.table--hover tbody .table__row:hover {
+  background-color: var(--color-bg-2);
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
+}
+
+.table--hover tbody .table__row:hover .table__cell {
+  background-color: transparent;
+}
+
+/* Responsive wrapper */
+.table-container {
+  overflow-x: auto;
+  margin: var(--spacing-4) 0;
+}

package/src/style/components/theme-control/theme-control.css

@@ -0,0 +1,35 @@
+.theme-control {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+.theme-control__option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  padding: var(--spacing-2, 0.5rem);
+  border-radius: var(--border-radius-sm, 4px);
+  cursor: pointer;
+  transition: all var(--transition-base, 0.2s ease);
+  color: var(--color-foreground-1);
+}
+
+.theme-control__option:hover:not(:disabled) {
+  background: var(--color-bg-2);
+}
+
+.theme-control__option:focus-visible:not(:disabled) {
+  outline: 2px solid var(--color-action-primary);
+  outline-offset: 2px;
+}
+
+.theme-control__option--active {
+  background: var(--color-action-primary);
+  color: var(--color-on-action-primary);
+}
+
+.theme-control__icon {
+  width: 20px;
+  height: 20px;
+}

package/src/style/components/tooltip/tooltip.css

@@ -0,0 +1,52 @@
+/* Tooltip Component Styles */
+
+.tooltip {
+  position: fixed; /* Ensure fixed positioning for portal */
+  background: var(--color-bg-1);
+  border: 1px solid var(--color-bg-3);
+  border-color: rgba(0, 0, 0, 0.15);
+  border-radius: var(--radius-base);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  max-width: 200px;
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: 500;
+  color: var(--color-foreground-1);
+  white-space: nowrap;
+  animation: tooltip-fade-in var(--transition-fast, 0.15s ease);
+  /* Prevent initial flash by starting hidden */
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.tooltip--top {
+  margin-bottom: var(--spacing-1);
+}
+
+.tooltip--bottom {
+  margin-top: var(--spacing-1);
+}
+
+.tooltip--left {
+  margin-right: var(--spacing-1);
+}
+
+.tooltip--right {
+  margin-left: var(--spacing-1);
+}
+
+@keyframes tooltip-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tooltip__content {
+  /* Additional styling if needed */
+}