@countermeasure-platform/web-components 1.2.0 → 1.2.1-dev.6.1

package/dist/styles/theme-engine.css

@@ -59,6 +59,12 @@
   border-radius: var(--radius-sm);
   color: var(--text-2);
   cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, transform 0.1s;
+}
+
+.preview-theme-switcher__btn:active,
+.preview-accent-switcher__btn:active {
+  transform: scale(0.92);
 }
 
 .preview-theme-switcher__btn--active,
@@ -69,12 +75,18 @@
   outline-offset: 1px;
 }
 
+.preview-theme-switcher__btn:hover,
+.preview-accent-switcher__btn:hover {
+  border-color: var(--brand);
+  background: var(--bg-glass);
+}
+
 .preview-theme-swatch {
   display: block;
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.18);
+  border: 1px solid var(--border-2);
 }
 
 .preview-theme-swatch--light {
@@ -86,7 +98,7 @@
 }
 
 .preview-theme-swatch--monokai {
-  background: linear-gradient(135deg, #0a0a0a, #a6e22e);
+  background: linear-gradient(135deg, #272822, #a6e22e);
 }
 
 .preview-theme-swatch--glass {
@@ -119,10 +131,11 @@
     linear-gradient(90deg, var(--brand) 0 var(--slider-pct), var(--border-2) var(--slider-pct) 100%);
   border-radius: 9999px;
   cursor: pointer;
+  transition: background 0.15s ease;
 }
 
 .preview-glass-slider__input {
-  width: 132px;
+  width: clamp(80px, 15vw, 200px);
 }
 
 .preview-glass-slider__input::-webkit-slider-thumb,
@@ -147,6 +160,116 @@
   box-shadow: 0 0 0 3px var(--brand-soft);
 }
 
+/* Tinted notice / inline alert */
+.cmm-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: var(--density-padding-y) var(--density-padding-x);
+  border: 1px solid;
+  border-radius: var(--radius-md);
+  font-size: var(--density-font, 0.875rem);
+}
+
+.cmm-notice--info {
+  border-color: hsl(var(--accent-cyan) / 0.25);
+  background: hsl(var(--accent-cyan) / 0.05);
+  color: hsl(var(--accent-cyan));
+}
+
+.cmm-notice--success {
+  border-color: hsl(var(--accent-emerald) / 0.25);
+  background: hsl(var(--accent-emerald) / 0.05);
+  color: hsl(var(--accent-emerald));
+}
+
+.cmm-notice--warning {
+  border-color: hsl(var(--accent-amber) / 0.25);
+  background: hsl(var(--accent-amber) / 0.05);
+  color: hsl(var(--accent-amber));
+}
+
+.cmm-notice--error {
+  border-color: hsl(var(--accent-rose) / 0.25);
+  background: hsl(var(--accent-rose) / 0.05);
+  color: hsl(var(--accent-rose));
+}
+
+/* Tone icon box — colored icon container */
+.cmm-tone-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  flex-shrink: 0;
+}
+
+.cmm-tone-icon--sm { width: 2rem; height: 2rem; }
+.cmm-tone-icon--md { width: 2.25rem; height: 2.25rem; }
+.cmm-tone-icon--lg { width: 2.5rem; height: 2.5rem; }
+
+.cmm-tone-icon--amber { background: hsl(var(--accent-amber) / 0.1); color: hsl(var(--accent-amber)); }
+.cmm-tone-icon--cyan { background: hsl(var(--accent-cyan) / 0.1); color: hsl(var(--accent-cyan)); }
+.cmm-tone-icon--emerald { background: hsl(var(--accent-emerald) / 0.1); color: hsl(var(--accent-emerald)); }
+.cmm-tone-icon--violet { background: hsl(var(--accent-violet) / 0.1); color: hsl(var(--accent-violet)); }
+.cmm-tone-icon--rose { background: hsl(var(--accent-rose) / 0.1); color: hsl(var(--accent-rose)); }
+.cmm-tone-icon--orange { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); }
+.cmm-tone-icon--glass { background: var(--bg-glass-2); color: var(--text-2); }
+
+/* Simple table — lightweight alternative to the full DataTable component */
+.cmm-table-wrap {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.cmm-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--density-font, 0.875rem);
+  color: var(--text-1);
+}
+
+.cmm-table th,
+.cmm-table td {
+  padding: var(--density-padding-y, 0.5rem) var(--density-padding-x, 0.75rem);
+  text-align: left;
+}
+
+.cmm-table thead th {
+  border-bottom: 1px solid var(--border-2);
+  color: var(--text-3);
+  font-size: calc(var(--density-font, 0.875rem) - 0.125rem);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.cmm-table tbody tr {
+  border-bottom: 1px solid color-mix(in srgb, var(--border-2) 60%, transparent);
+  transition: background 0.1s;
+}
+
+.cmm-table tbody tr:last-child {
+  border-bottom: 0;
+}
+
+.cmm-table tbody tr:hover {
+  background: var(--bg-glass);
+}
+
+@media (pointer: coarse) {
+  .preview-glass-slider__input::-webkit-slider-thumb,
+  .preview-radius-slider__input::-webkit-slider-thumb {
+    width: 22px;
+    height: 22px;
+  }
+
+  .preview-glass-slider__input::-moz-range-thumb,
+  .preview-radius-slider__input::-moz-range-thumb {
+    width: 22px;
+    height: 22px;
+  }
+}
+
 .preview-glass-slider__value,
 .preview-radius-slider__value {
   min-width: 3ch;
@@ -163,30 +286,54 @@
 .preview-density-switcher__btn {
   border: 0;
   border-right: 1px solid var(--border-2);
-  padding: 0.45rem 0.625rem;
+  padding: 0.5rem 0.625rem;
   background: var(--bg-card-2);
   color: var(--text-2);
   font: 600 12px/1 var(--font-sans);
   cursor: pointer;
+  transition: background 0.15s, color 0.15s;
 }
 
 .preview-density-switcher__btn:last-child {
   border-right: 0;
 }
 
+.preview-density-switcher__btn:active {
+  opacity: 0.7;
+}
+
 .preview-density-switcher__btn:hover,
 .preview-density-switcher__btn--active {
   background: var(--brand-soft);
   color: var(--brand);
 }
 
+.theme-studio-preset:focus-visible,
+.theme-studio-font-tile:focus-visible,
+.theme-studio-icon-tile:focus-visible,
+.theme-studio-tab:focus-visible,
+.theme-studio-link:focus-visible,
+.theme-studio-icon-gallery__toggle:focus-visible,
+.theme-studio-icon-matrix__change:focus-visible,
+.theme-studio-icon-matrix__reset:focus-visible,
+.theme-studio-preview-tile__cta:focus-visible,
+.preview-theme-switcher__btn:focus-visible,
+.preview-accent-switcher__btn:focus-visible,
+.preview-density-switcher__btn:focus-visible,
+.preview-glass-slider__input:focus-visible,
+.preview-radius-slider__input:focus-visible,
+.theme-studio-section__head--summary:focus-visible {
+  outline: 2px solid var(--brand);
+  outline-offset: 2px;
+}
+
 .theme-studio-pane {
-  max-width: 920px;
+  max-width: 92%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
-  padding: 0 0.5rem 2rem;
+  gap: clamp(1rem, 1.5vw, 2rem);
+  padding: 0 clamp(0.5rem, 1.5vw, 1.5rem) 2rem;
 }
 
 .theme-studio-pane__header {
@@ -225,6 +372,15 @@
   color: var(--text-3);
   font: 600 13px/1 var(--font-sans);
   cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.theme-studio-tab:not(:disabled):hover {
+  color: var(--text-1);
+}
+
+.theme-studio-tab:not(:disabled):active {
+  opacity: 0.8;
 }
 
 .theme-studio-tab:disabled {
@@ -241,7 +397,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.875rem;
-  padding: 1rem 1rem 1.125rem;
+  padding: clamp(0.75rem, 2vw, 1.5rem) clamp(1rem, 2.5vw, 2rem) clamp(0.875rem, 2vw, 1.5rem);
   background: var(--bg-card);
   border: 1px solid var(--border-2);
   border-radius: var(--radius-lg);
@@ -257,6 +413,15 @@
 .theme-studio-section__head--summary {
   cursor: pointer;
   list-style: none;
+  transition: color 0.15s;
+}
+
+.theme-studio-section__head--summary:hover {
+  color: var(--text-1);
+}
+
+.theme-studio-section__head--summary:active {
+  opacity: 0.8;
 }
 
 .theme-studio-section__head--summary::-webkit-details-marker {
@@ -285,6 +450,7 @@
   font: 600 11px/1 var(--font-sans);
   letter-spacing: var(--letter-label);
   text-transform: uppercase;
+  transition: opacity 0.2s;
 }
 
 .theme-studio-link {
@@ -295,22 +461,21 @@
   color: var(--brand);
   font: 600 12px/1 var(--font-sans);
   cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
 }
 
 .theme-studio-link:hover {
   background: var(--brand-soft);
 }
 
-.theme-studio-presets {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.75rem;
+.theme-studio-link:active {
+  opacity: 0.7;
 }
 
-@media (max-width: 720px) {
-  .theme-studio-presets {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.theme-studio-presets {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 14vw, 320px), 1fr));
+  gap: clamp(0.5rem, 1vw, 1rem);
 }
 
 @media (max-width: 560px) {
@@ -333,6 +498,236 @@
   }
 }
 
+/* 1440p+ — scale up UI elements */
+@media (min-width: 2200px) {
+  .theme-studio-pane {
+    gap: 1.75rem;
+  }
+
+  .theme-studio-section {
+    gap: 1.125rem;
+    padding: 1.5rem 2rem;
+  }
+
+  .theme-studio-pane__title {
+    font-size: 2rem;
+  }
+
+  .theme-studio-pane__subtitle {
+    font-size: 1rem;
+  }
+
+  .theme-studio-section__title {
+    font-size: 1.125rem;
+  }
+
+  .theme-studio-section__helper {
+    font-size: 0.9375rem;
+  }
+
+  .theme-studio-preset__name,
+  .theme-studio-font-tile__name,
+  .theme-studio-icon-tile__name {
+    font-size: 15px;
+  }
+
+  .theme-studio-preset__desc,
+  .theme-studio-font-tile__desc,
+  .theme-studio-icon-tile__desc {
+    font-size: 13px;
+  }
+
+  .theme-studio-tab {
+    font-size: 15px;
+    padding: 0.75rem 0.25rem;
+  }
+
+  .theme-studio-link {
+    font-size: 14px;
+  }
+
+  .theme-studio-preview-tile__head {
+    padding: 0.625rem 1rem;
+  }
+
+  .theme-studio-preview-tile__body {
+    gap: 0.875rem;
+    padding: 1rem;
+  }
+
+  .theme-studio-icon-gallery__grid {
+    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  }
+
+  .theme-studio-icon-gallery__cell svg {
+    width: 32px;
+    height: 32px;
+  }
+
+  .theme-studio-icon-gallery__label {
+    font-size: 11px;
+  }
+}
+
+/* 4K — scale up further */
+@media (min-width: 3200px) {
+  .theme-studio-pane {
+    gap: 2.25rem;
+  }
+
+  .theme-studio-section {
+    gap: 1.5rem;
+    padding: 2rem 2.5rem;
+  }
+
+  .theme-studio-pane__title {
+    font-size: 2.5rem;
+  }
+
+  .theme-studio-pane__subtitle {
+    font-size: 1.125rem;
+  }
+
+  .theme-studio-section__title {
+    font-size: 1.375rem;
+  }
+
+  .theme-studio-section__helper {
+    font-size: 1rem;
+  }
+
+  .theme-studio-preset__name,
+  .theme-studio-font-tile__name,
+  .theme-studio-icon-tile__name {
+    font-size: 17px;
+  }
+
+  .theme-studio-preset__desc,
+  .theme-studio-font-tile__desc,
+  .theme-studio-icon-tile__desc {
+    font-size: 14px;
+  }
+
+  .theme-studio-tab {
+    font-size: 17px;
+    padding: 1rem 0.375rem;
+  }
+
+  .theme-studio-link {
+    font-size: 15px;
+    padding: 0.375rem 0.5rem;
+  }
+
+  .theme-studio-font-tile__sample {
+    font-size: 28px;
+  }
+
+  .theme-studio-icon-tile__row {
+    height: 32px;
+  }
+
+  .theme-studio-preview-tile {
+    max-width: clamp(500px, 35%, 800px);
+  }
+
+  .theme-studio-preview-tile__head {
+    padding: 0.75rem 1.25rem;
+  }
+
+  .theme-studio-preview-tile__body {
+    gap: 1rem;
+    padding: 1.25rem;
+  }
+
+  .theme-studio-preview-tile__row {
+    padding: 0.5rem 0.625rem;
+    font-size: 14px;
+  }
+
+  .theme-studio-preview-tile__cta {
+    padding: 0.625rem 1rem;
+    font-size: 14px;
+  }
+
+  .preview-theme-switcher__btn,
+  .preview-accent-switcher__btn {
+    width: 36px;
+    height: 36px;
+  }
+
+  .preview-theme-swatch,
+  .preview-accent-swatch {
+    width: 22px;
+    height: 22px;
+  }
+
+  .preview-theme-switcher__label,
+  .preview-accent-switcher__label,
+  .preview-glass-slider__label,
+  .preview-density-switcher__label {
+    font-size: 14px;
+  }
+
+  .preview-density-switcher__btn {
+    padding: 0.625rem 0.875rem;
+    font-size: 14px;
+  }
+
+  .preview-glass-slider__input {
+    width: 200px;
+    height: 6px;
+  }
+
+  .theme-studio-icon-gallery__grid {
+    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+    gap: 4px;
+  }
+
+  .theme-studio-icon-gallery__cell {
+    padding: 0.875rem 0.375rem;
+  }
+
+  .theme-studio-icon-gallery__cell svg {
+    width: 36px;
+    height: 36px;
+  }
+
+  .theme-studio-icon-gallery__label {
+    font-size: 12px;
+  }
+
+  .theme-studio-icon-gallery__heading {
+    font-size: 13px;
+  }
+
+  .theme-studio-icon-gallery__toggle {
+    font-size: 14px;
+    padding: 0.5rem 1rem;
+  }
+
+  .theme-studio-section__chev {
+    font-size: 13px;
+  }
+
+  .theme-studio-icon-matrix__row {
+    padding: 0.75rem 1rem;
+    font-size: 14px;
+  }
+
+  .cmm-table {
+    font-size: 15px;
+  }
+
+  .cmm-table th,
+  .cmm-table td {
+    padding: 0.75rem 1rem;
+  }
+
+  .cmm-table thead th {
+    font-size: 13px;
+  }
+}
+
 .theme-studio-preset,
 .theme-studio-font-tile,
 .theme-studio-icon-tile {
@@ -346,12 +741,20 @@
   color: var(--text-2);
   text-align: left;
   cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, transform 0.15s;
 }
 
 .theme-studio-preset:hover,
 .theme-studio-font-tile:hover,
 .theme-studio-icon-tile:hover {
   border-color: color-mix(in srgb, var(--border-2) 85%, var(--text-2));
+  background: var(--bg-glass);
+}
+
+.theme-studio-preset:active,
+.theme-studio-font-tile:active,
+.theme-studio-icon-tile:active {
+  transform: scale(0.98);
 }
 
 .theme-studio-preset.is-active,
@@ -367,7 +770,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  height: 76px;
+  height: clamp(72px, 6vw, 120px);
   padding: 0.375rem;
   border-radius: 6px;
   overflow: hidden;
@@ -448,7 +851,7 @@
 .theme-studio-preview-tile {
   display: flex;
   flex-direction: column;
-  max-width: 480px;
+  max-width: clamp(400px, 40%, 640px);
   overflow: hidden;
   background: var(--bg-card-2);
   border: 1px solid var(--border-2);
@@ -554,13 +957,28 @@
   color: #fff;
   font: 600 12px/1 var(--font-sans);
   cursor: pointer;
+  transition: filter 0.15s, opacity 0.15s;
+}
+
+.theme-studio-preview-tile__cta:hover {
+  filter: brightness(1.1);
+}
+
+.theme-studio-preview-tile__cta:active {
+  transform: scale(0.97);
+}
+
+.theme-studio-preview-tile__cta:disabled {
+  opacity: 0.5;
+  cursor: default;
+  filter: none;
 }
 
 .theme-studio-fonts,
 .theme-studio-iconsets {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 0.625rem;
+  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 12vw, 260px), 1fr));
+  gap: clamp(0.5rem, 0.8vw, 1rem);
 }
 
 .theme-studio-font-tile {
@@ -608,6 +1026,102 @@
   text-transform: uppercase;
 }
 
+.theme-studio-iconsets-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.theme-studio-icon-gallery__toggle {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  background: var(--bg-card-2);
+  border: 1px solid var(--border-2);
+  border-radius: var(--radius-sm);
+  color: var(--text-2);
+  font: 500 12px/1 var(--font-sans);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.theme-studio-icon-gallery__toggle:hover {
+  border-color: var(--brand);
+  color: var(--text-1);
+}
+
+.theme-studio-icon-gallery__toggle:active {
+  opacity: 0.7;
+}
+
+.theme-studio-icon-gallery__toggle svg {
+  transition: transform 0.2s;
+}
+
+.theme-studio-icon-gallery__toggle.is-expanded svg {
+  transform: rotate(180deg);
+}
+
+.theme-studio-icon-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.theme-studio-icon-gallery__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.theme-studio-icon-gallery__heading {
+  color: var(--text-2);
+  font: 600 11px/1 var(--font-sans);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.theme-studio-icon-gallery__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 2px;
+}
+
+.theme-studio-icon-gallery__cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.625rem 0.25rem;
+  border-radius: var(--radius-sm);
+  color: var(--text-2);
+  transition: background 0.15s, color 0.15s;
+}
+
+.theme-studio-icon-gallery__cell:hover {
+  background: var(--bg-glass);
+  color: var(--text-1);
+}
+
+.theme-studio-icon-gallery__cell:focus-visible {
+  outline: 2px solid var(--brand);
+  outline-offset: 2px;
+}
+
+.theme-studio-icon-gallery__cell svg {
+  flex-shrink: 0;
+}
+
+.theme-studio-icon-gallery__label {
+  color: var(--text-3);
+  font: 400 10px/1.2 var(--font-sans);
+  text-align: center;
+  word-break: break-word;
+  max-width: 100%;
+}
+
 .preview-glass-slider--expanded {
   flex-wrap: wrap;
 }
@@ -668,7 +1182,7 @@
 
 .theme-studio-advanced__row {
   padding: 0.5rem 0;
-  border-bottom: 1px dashed var(--border-2);
+  border-bottom: 1px solid var(--border-2);
 }
 
 .theme-studio-advanced__row:last-child {
@@ -708,9 +1222,12 @@
   grid-template-columns: 1fr 1fr auto;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
+  padding: var(--density-padding-y) var(--density-padding-x);
   border-bottom: 1px solid var(--border-2);
-  font: 500 12px/1 var(--font-sans);
+  font-size: var(--density-font, 12px);
+  font-weight: 500;
+  line-height: 1;
+  font-family: var(--font-sans);
 }
 
 .theme-studio-icon-matrix__row:last-child {
@@ -744,6 +1261,7 @@
   color: var(--text-2);
   font: 600 11px/1 var(--font-sans);
   cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
 }
 
 .theme-studio-icon-matrix__change:hover,
@@ -751,3 +1269,8 @@
   border-color: var(--brand);
   color: var(--brand);
 }
+
+.theme-studio-icon-matrix__change:active,
+.theme-studio-icon-matrix__reset:active {
+  opacity: 0.7;
+}