@kupola/kupola 1.2.0 → 1.4.0

package/css/theme-dark.css

@@ -18,11 +18,11 @@
   --text-default: #D1D3DB;
   --text-default-hover: #FFFFFF;
   --text-default-active: #FFFFFF;
-  --text-secondary: #9599A6;
+  --text-secondary: #A0A5B2;
   --text-secondary-hover: #D1D3DB;
   --text-secondary-active: #D1D3DB;
-  --text-tertiary: #6B7280;
-  --text-disabled: #6F7482;
+  --text-tertiary: #7D8493;
+  --text-disabled: #7D8493;
   --text-onbrand: #FFFFFF;
   --text-onaccent: #FFFFFF;
 
@@ -32,8 +32,8 @@
   --icon-secondary: #9599A6;
   --icon-secondary-hover: #D1D3DB;
   --icon-secondary-active: #D1D3DB;
-  --icon-tertiary: #6B7280;
-  --icon-disabled: #6F7482;
+  --icon-tertiary: #7D8493;
+  --icon-disabled: #7D8493;
   --icon-onbrand: #FFFFFF;
   --icon-onaccent: #FFFFFF;
 

package/css/utilities.css

@@ -168,4 +168,122 @@
 @keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
-}
+}
+
+/* ===== ds- prefixed utility classes (IMP-002) =====
+ * Canonical ds-* aliases for all utility classes.
+ * Both prefixed and unprefixed versions are supported.
+ */
+
+/* Flexbox */
+.ds-flex { display: flex; }
+.ds-flex-col { display: flex; flex-direction: column; }
+.ds-flex--col { flex-direction: column; }
+.ds-flex--wrap { flex-wrap: wrap; }
+.ds-flex-1 { flex: 1; }
+.ds-flex-none { flex: none; }
+.ds-items-center { align-items: center; }
+.ds-items-start { align-items: flex-start; }
+.ds-items-end { align-items: flex-end; }
+.ds-items-stretch { align-items: stretch; }
+.ds-justify-center { justify-content: center; }
+.ds-justify-between { justify-content: space-between; }
+.ds-justify-end { justify-content: flex-end; }
+.ds-justify-start { justify-content: flex-start; }
+
+/* Gap */
+.ds-gap-2 { gap: var(--spacer-2); }
+.ds-gap-4 { gap: var(--spacer-4); }
+.ds-gap-6 { gap: var(--spacer-6); }
+.ds-gap-8 { gap: var(--spacer-8); }
+.ds-gap-12 { gap: var(--spacer-12); }
+.ds-gap-16 { gap: var(--spacer-16); }
+.ds-gap-24 { gap: var(--spacer-24); }
+.ds-gap-32 { gap: var(--spacer-32); }
+
+/* Grid */
+.ds-grid { display: grid; }
+.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
+.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
+.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
+.ds-grid--5 { grid-template-columns: repeat(5, 1fr); }
+.ds-grid--6 { grid-template-columns: repeat(6, 1fr); }
+.ds-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.ds-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.ds-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+/* Display */
+.ds-block { display: block; }
+.ds-inline-block { display: inline-block; }
+.ds-inline { display: inline; }
+.ds-hidden { display: none; }
+
+/* Text */
+.ds-text-left { text-align: left; }
+.ds-text-center { text-align: center; }
+.ds-text-right { text-align: right; }
+.ds-text-xs { font-size: var(--body-xs-font-size); }
+.ds-text-sm { font-size: var(--body-sm-font-size); }
+.ds-text-md { font-size: var(--body-md-font-size); }
+.ds-text-base { font-size: var(--body-base-font-size); }
+.ds-font-medium { font-weight: var(--font-weight-medium); }
+.ds-font-strong { font-weight: var(--font-weight-strong); }
+.ds-text-default { color: var(--text-default); }
+.ds-text-secondary { color: var(--text-secondary); }
+.ds-text-tertiary { color: var(--text-tertiary); }
+.ds-text-brand { color: var(--text-brand); }
+.ds-text-success { color: var(--status-success-default); }
+.ds-text-warning { color: var(--status-warning-default); }
+.ds-text-error { color: var(--status-error-default); }
+
+/* Width */
+.ds-w-full { width: 100%; }
+.ds-w-auto { width: auto; }
+.ds-max-w-md { max-width: 480px; }
+.ds-max-w-lg { max-width: 640px; }
+.ds-max-w-xl { max-width: 960px; }
+
+/* Spacing (ds- prefixed margin/padding) */
+.ds-m-0 { margin: var(--spacer-0); }
+.ds-m-4 { margin: var(--spacer-4); }
+.ds-m-8 { margin: var(--spacer-8); }
+.ds-m-12 { margin: var(--spacer-12); }
+.ds-m-16 { margin: var(--spacer-16); }
+.ds-m-auto { margin: auto; }
+.ds-mt-0 { margin-top: var(--spacer-0); }
+.ds-mt-4 { margin-top: var(--spacer-4); }
+.ds-mt-8 { margin-top: var(--spacer-8); }
+.ds-mt-12 { margin-top: var(--spacer-12); }
+.ds-mt-16 { margin-top: var(--spacer-16); }
+.ds-mb-0 { margin-bottom: var(--spacer-0); }
+.ds-mb-4 { margin-bottom: var(--spacer-4); }
+.ds-mb-8 { margin-bottom: var(--spacer-8); }
+.ds-mb-12 { margin-bottom: var(--spacer-12); }
+.ds-mb-16 { margin-bottom: var(--spacer-16); }
+.ds-p-0 { padding: var(--spacer-0); }
+.ds-p-4 { padding: var(--spacer-4); }
+.ds-p-8 { padding: var(--spacer-8); }
+.ds-p-12 { padding: var(--spacer-12); }
+.ds-p-16 { padding: var(--spacer-16); }
+.ds-p-24 { padding: var(--spacer-24); }
+
+/* Rounded */
+.ds-rounded-2 { border-radius: var(--radius-2); }
+.ds-rounded-4 { border-radius: var(--radius-4); }
+.ds-rounded-6 { border-radius: var(--radius-6); }
+.ds-rounded-8 { border-radius: var(--radius-8); }
+.ds-rounded-full { border-radius: var(--radius-full); }
+
+/* Position */
+.ds-relative { position: relative; }
+.ds-absolute { position: absolute; }
+.ds-fixed { position: fixed; }
+.ds-sticky { position: sticky; }
+
+/* Overflow */
+.ds-overflow-hidden { overflow: hidden; }
+.ds-overflow-auto { overflow: auto; }
+
+/* Cursor */
+.ds-cursor-pointer { cursor: pointer; }
+.ds-cursor-not-allowed { cursor: not-allowed; }

package/dist/css/accessibility.css

@@ -0,0 +1,119 @@
+/* Accessibility (a11y) */
+
+/* Focus styles */
+*:focus-visible {
+  outline: 2px solid var(--bg-brand);
+  outline-offset: 2px;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Skip link */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  padding: 8px 12px;
+  background-color: var(--bg-brand);
+  color: var(--text-onbrand);
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+  z-index: 1000;
+  transition: top 0.2s ease;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* Screen reader only */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  :root {
+    --border-neutral-l1: #000000;
+    --border-neutral-l2: #000000;
+    --border-neutral-l3: #000000;
+  }
+
+  .ds-btn {
+    border-width: 2px;
+  }
+  
+  .ds-input {
+    border-width: 2px;
+  }
+  
+  .ds-card {
+    border-width: 2px;
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Keyboard navigation */
+.ds-btn:not(:disabled):focus-visible,
+.ds-input:focus-visible,
+.ds-toggle input:focus-visible + .ds-toggle__track {
+  outline: 2px solid var(--bg-brand);
+  outline-offset: 2px;
+}
+
+/* Active states for keyboard users */
+.ds-btn:not(:disabled):active,
+.ds-btn:not(:disabled):focus:active {
+  transform: translateY(1px);
+}
+
+/* Visible focus for better keyboard navigation */
+.ds-dashboard__sidebar-item:focus-visible,
+.ds-activityrail__item:focus-visible,
+.ds-statusbar__item:focus-visible {
+  outline: 2px solid var(--bg-brand);
+  outline-offset: 2px;
+}
+
+/* Color contrast */
+.ds-statcard__delta.is-up {
+  color: var(--status-success-default);
+}
+
+.ds-statcard__delta.is-down {
+  color: var(--status-error-default);
+}
+
+/* Selection color */
+::selection {
+  background-color: var(--bg-brand-popup);
+  color: var(--text-brand);
+}
+
+/* Clearfix */
+.ds-clearfix::after {
+  content: '';
+  display: table;
+  clear: both;
+}

package/dist/css/animations.css

@@ -0,0 +1,224 @@
+/* Animations and Transitions */
+
+/* Button hover and active */
+.ds-btn {
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+}
+
+.ds-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.ds-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.ds-btn--loading .icon {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Card hover */
+.ds-card {
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.ds-card:hover {
+  border-color: var(--border-neutral-l2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Input focus */
+.ds-input {
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.ds-input:focus {
+  border-color: var(--bg-brand);
+  box-shadow: 0 0 0 3px var(--bg-brand-popup);
+}
+
+/* Modal animation */
+.ds-modal {
+  animation: fadeIn 0.2s ease, slideUp 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* Sidebar transition */
+.ds-dashboard__sidebar {
+  transition: transform 0.3s ease;
+}
+
+.ds-dashboard__sidebar.is-collapsed {
+  transform: translateX(-100%);
+}
+
+/* Tab transition */
+.ds-tabs__item {
+  transition: color 0.2s ease, border-color 0.2s ease;
+}
+
+/* Navigation list item */
+.ds-navlist__item {
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.ds-navlist__item:hover {
+  background-color: var(--bg-overlay-l1);
+}
+
+.ds-navlist__item.is-active:hover {
+  background-color: var(--bg-brand);
+  color: var(--text-onbrand);
+}
+
+.ds-navlist__item.is-active:hover .icon {
+  filter: brightness(0) saturate(100%) invert(1);
+}
+
+/* Badge pulse */
+.ds-badge--pulse {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(50, 240, 140, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(50, 240, 140, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(50, 240, 140, 0);
+  }
+}
+
+/* Status indicator */
+.ds-status-dot {
+  animation: blink 2s infinite;
+}
+
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* Progress bar */
+.ds-progress__bar {
+  transition: width 0.3s ease;
+}
+
+/* Table row hover */
+.ds-table tbody tr {
+  transition: background-color 0.15s ease;
+}
+
+.ds-table tbody tr:hover {
+  background-color: var(--bg-overlay-l1);
+}
+
+/* Tag fade */
+.ds-tag {
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+/* Alert dismiss */
+.ds-alert {
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.ds-alert.is-dismissed {
+  animation: slideOut 0.3s ease forwards;
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+/* Scrollbar style */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--bg-base-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--border-neutral-l2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--border-neutral-l3);
+}
+
+/* Selection color */
+::selection {
+  background-color: var(--bg-brand-popup);
+  color: var(--text-brand);
+}
+
+/* Brand theme transition */
+[data-brand] {
+  transition: --bg-brand 0.3s ease, --text-brand 0.3s ease;
+}
+
+/* Theme transition */
+[data-theme] {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Focus ring */
+.focus-ring:focus-visible {
+  outline: 2px solid var(--bg-brand);
+  outline-offset: 2px;
+}