@hellboy/ds 0.1.3 → 0.2.7

package/src/style/components/select/select.css

@@ -1,143 +0,0 @@
-/**
- * Select Component Styles
- * Custom select using Popover + List with action colors
- */
-
-@import '../../_shared/field.css';
-
-.select-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-}
-
-.select-container--full-width {
-  width: 100%;
-}
-
-.select__label {
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  color: var(--color-foreground-1);
-  cursor: pointer;
-}
-
-.select__trigger {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-2);
-  font-family: inherit;
-  font-size: var(--font-size-base);
-  line-height: 1.5;
-  color: var(--color-foreground-1);
-  background-color: var(--color-bg-1);
-  border: none;
-  outline: 2px solid var(--color-foreground-3);
-  outline-offset: -2px;
-  border-radius: var(--radius-base);
-  padding: var(--spacing-2) var(--spacing-3);
-  cursor: pointer;
-  transition: outline-color var(--motion-duration-fast) var(--motion-easing-linear), box-shadow var(--motion-duration-fast) var(--motion-easing-linear);
-  text-align: left;
-}
-
-.select__trigger:not(:hover):not(:focus-visible):not(.select__trigger--open) {
-  transition: outline-color var(--motion-duration-fast) var(--motion-easing-accelerate), box-shadow var(--motion-duration-fast) var(--motion-easing-accelerate);
-}
-
-/* Size variants */
-.select__trigger--sm {
-  font-size: var(--font-size-sm);
-  padding: var(--spacing-1) var(--spacing-2);
-}
-
-.select__trigger--lg {
-  font-size: var(--font-size-lg);
-  padding: var(--spacing-3) var(--spacing-4);
-}
-
-/* Trigger content */
-.select__trigger-content {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  flex: 1;
-}
-
-.select__trigger-text {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Trigger icon (chevron) */
-.select__trigger-icon {
-  flex-shrink: 0;
-  color: var(--color-foreground-2);
-  transition: transform var(--transition-fast);
-}
-
-.select__trigger--open .select__trigger-icon {
-  transform: rotate(180deg);
-}
-
-/* Focus state - uses action colors */
-.select__trigger:focus-visible {
-  outline-color: var(--color-action-primary);
-  box-shadow: 0 0 0 3px hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 0.1);
-}
-
-/* Hover state */
-.select__trigger:hover:not(:disabled):not(.select__trigger--error) {
-  outline-color: var(--color-action-primary-hover);
-}
-
-/* Open state */
-.select__trigger--open {
-  outline-color: var(--color-action-primary);
-}
-
-/* Error state */
-.select__trigger--error {
-  outline-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
-}
-
-.select__trigger--error:focus-visible {
-  outline-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
-  box-shadow: 0 0 0 3px hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 0.1);
-}
-
-/* Disabled state */
-.select__trigger:disabled,
-.select__trigger--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-  background-color: var(--color-bg-2);
-}
-
-/* Dropdown */
-.select__dropdown {
-  min-width: 200px;
-  max-height: 300px;
-  overflow-y: auto;
-  padding: var(--spacing-2);
-}
-
-/* Messages */
-.select__message {
-  font-size: var(--font-size-sm);
-  margin: 0;
-  color: var(--color-foreground-2);
-}
-
-.select__message--error {
-  color: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
-}
-
-/* Dark theme adjustments */
-:root[data-theme="dark"] .select__trigger {
-  background-color: var(--color-bg-2);
-}

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

@@ -1,267 +0,0 @@
-/**
- * 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/foundations/global.css

@@ -1,316 +0,0 @@
-/**
- * Global Foundations
- * Base styles, resets, and global utilities
- */
-
-/* CSS Reset */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-/* HTML & Body */
-html {
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-normal);
-  color: var(--color-text-primary);
-  background-color: var(--color-bg-2);
-  font-weight: var(--font-weight-normal);
-}
-
-/* Headings */
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-family-heading);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--line-height-tight);
-  color: var(--color-text-primary);
-  margin: var(--spacing-6) 0 var(--spacing-2) 0;
-}
-
-h1 { font-size: var(--font-size-4xl); }
-h2 { font-size: var(--font-size-3xl); }
-h3 { font-size: var(--font-size-2xl); }
-h4 { font-size: var(--font-size-xl); }
-h5 { font-size: var(--font-size-lg); }
-h6 { font-size: var(--font-size-base); }
-
-/* Lists */
-ul, ol {
-  margin: var(--spacing-4) 0 var(--spacing-4) var(--spacing-6);
-  padding: 0;
-}
-li {
-  margin-bottom: var(--spacing-2);
-}
-
-/* Form Elements */
-button {
-  border: none;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-}
-
-input,
-textarea,
-select {
-  font-family: inherit;
-  font-size: inherit;
-}
-
-/* Links */
-a {
-  color: var(--color-primary);
-  text-decoration: none;
-  transition: var(--motion-transition-color);
-}
-
-a:hover {
-  color: var(--color-primary-dark);
-}
-
-/* Action links - for important navigation links */
-a.link-action {
-    color: var(--color-foreground-2);
-    font-weight: 400;
-    transition: var(--motion-transition-color);
-    border-bottom: 2px solid var(--color-accent);
-}
-
-a.link-action:hover {
-  color: var(--color-on-primary);
-  background-color: var(--color-accent);
-}
-
-/* Inline code */
-code.inline-code {
-  background-color: var(--color-bg-2);
-  padding: 0.2rem 0.4rem;
-  border-radius: 4px;
-  font-family: var(--font-family-mono);
-  font-size: 0.875em;
-}
-
-/* ===== MOTION & ANIMATIONS ===== */
-
-/* Motion Tokens */
-:root {
-  --motion-duration-fast: 0.15s;
-  --motion-duration-base: 0.2s;
-  --motion-duration-slow: 0.3s;
-  --motion-duration-slower: 0.5s;
-
-  --motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
-  --motion-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
-  --motion-easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
-  --motion-easing-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
-
-  --motion-transition-fast: var(--motion-duration-fast) var(--motion-easing-standard);
-  --motion-transition-base: var(--motion-duration-base) var(--motion-easing-standard);
-  --motion-transition-slow: var(--motion-duration-slow) var(--motion-easing-standard);
-
-  --motion-transition-color: color var(--motion-transition-base);
-  --motion-transition-background: background-color var(--motion-transition-base);
-  --motion-transition-transform: transform var(--motion-transition-base);
-  --motion-transition-opacity: opacity var(--motion-transition-base);
-}
-
-/* Reduced Motion Support */
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --motion-duration-fast: 0.01s;
-    --motion-duration-base: 0.01s;
-    --motion-duration-slow: 0.01s;
-    --motion-duration-slower: 0.01s;
-  }
-}
-
-/* Keyframe Animations */
-@keyframes slide-in-right {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slide-out-right {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes slide-in-left {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slide-out-left {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-100%);
-  }
-}
-
-@keyframes slide-in-top {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-out-top {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes slide-in-bottom {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-out-bottom {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
-
-@keyframes scale-in {
-  from {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes scale-out {
-  from {
-    transform: scale(1);
-    opacity: 1;
-  }
-  to {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-}
-
-/* CSS Variables for Keyframes */
-:root {
-  --motion-keyframes-slide-in-right: slide-in-right var(--motion-duration-slower) var(--motion-easing-decelerate);
-  --motion-keyframes-slide-out-right: slide-out-right var(--motion-duration-slow) var(--motion-easing-accelerate);
-  --motion-keyframes-slide-in-left: slide-in-left var(--motion-duration-slower) var(--motion-easing-decelerate);
-  --motion-keyframes-slide-out-left: slide-out-left var(--motion-duration-slow) var(--motion-easing-accelerate);
-  --motion-keyframes-slide-in-top: slide-in-top var(--motion-duration-slower) var(--motion-easing-decelerate);
-  --motion-keyframes-slide-out-top: slide-out-top var(--motion-duration-slow) var(--motion-easing-accelerate);
-  --motion-keyframes-slide-in-bottom: slide-in-bottom var(--motion-duration-slower) var(--motion-easing-decelerate);
-  --motion-keyframes-slide-out-bottom: slide-out-bottom var(--motion-duration-slow) var(--motion-easing-accelerate);
-  --motion-keyframes-scale-in: scale-in var(--motion-duration-slow) var(--motion-easing-decelerate);
-  --motion-keyframes-scale-out: scale-out var(--motion-duration-base) var(--motion-easing-accelerate);
-}
-
-/* Text Colors */
-.text-primary { color: var(--color-text-primary); }
-.text-secondary { color: var(--color-text-secondary); }
-.text-tertiary { color: var(--color-text-tertiary); }
-
-/* Text Sizes */
-.text-xs { font-size: var(--font-size-xs); }
-.text-sm { font-size: var(--font-size-sm); }
-.text-base { font-size: var(--font-size-base); }
-.text-lg { font-size: var(--font-size-lg); }
-.text-xl { font-size: var(--font-size-xl); }
-
-/* Font Weights */
-.font-normal { font-weight: var(--font-weight-normal); }
-.font-medium { font-weight: var(--font-weight-medium); }
-.font-semibold { font-weight: var(--font-weight-semibold); }
-.font-bold { font-weight: var(--font-weight-bold); }
-
-/* Margins */
-.m-0 { margin: 0; }
-.mb-1 { margin-bottom: 0.25rem; }
-.mb-2 { margin-bottom: 0.5rem; }
-.mb-3 { margin-bottom: 0.75rem; }
-.mb-4 { margin-bottom: 1rem; }
-.mt-1 { margin-top: 0.25rem; }
-.mt-2 { margin-top: 0.5rem; }
-.mt-3 { margin-top: 0.75rem; }
-.mt-4 { margin-top: 1rem; }
-
-/* Text Alignment */
-.text-center { text-align: center; }
-
-/* Demo styles */
-.demo-content {
-  margin: 1rem 0;
-  padding: 1rem;
-  background-color: var(--color-surface-variant);
-  border-radius: 4px;
-  border: 1px solid var(--color-outline);
-}
-
-/* Custom Scrollbars */
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--color-bg-1);
-  border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 6px;
-  border: 2px solid var(--color-bg-1);
-  transition: background-color 0.2s ease;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 1);
-}
-
-::-webkit-scrollbar-corner {
-  background: var(--color-bg-1);
-}
-
-/* Firefox scrollbar */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.3) var(--color-bg-2);
-}