@workday/canvas-kit-css 15.0.0-alpha.1303-next.0 → 15.0.0

package/side-panel.css

@@ -0,0 +1,157 @@
+.cnvs-side-panel-heading {
+  box-sizing: border-box;
+  padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
+}
+
+
+.cnvs-side-panel-heading.origin-end {
+  padding-inline-start: 4.25rem;
+}
+
+
+
+.cnvs-side-panel-toggle-button {
+  box-sizing: border-box;
+  position: absolute;
+  top: var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));
+  width: var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));
+  inset-inline-end: var(--cnvs-base-size-150, 0.75rem);
+}
+
+
+.cnvs-side-panel-toggle-button.state-collapsing {
+  margin: 0;
+  transform: scaleX(1);
+}
+
+.cnvs-side-panel-toggle-button.state-collapsing :dir(rtl) {
+  transform: scaleX(-1);
+}
+
+
+.cnvs-side-panel-toggle-button.state-collapsed {
+  margin: auto;
+  transform: scaleX(1);
+}
+
+.cnvs-side-panel-toggle-button.state-collapsed :dir(rtl) {
+  transform: scaleX(-1);
+}
+
+
+.cnvs-side-panel-toggle-button.state-expanded {
+  margin: 0;
+  transform: scaleX(-1);
+}
+
+.cnvs-side-panel-toggle-button.state-expanded :dir(rtl) {
+  transform: scaleX(1);
+}
+
+
+.cnvs-side-panel-toggle-button.state-expanding {
+  margin: 0;
+  transform: scaleX(-1);
+}
+
+.cnvs-side-panel-toggle-button.state-expanding :dir(rtl) {
+  transform: scaleX(1);
+}
+
+
+
+.cnvs-side-panel-toggle-button.origin-end {
+  transform: scaleX(1);
+}
+
+.cnvs-side-panel-toggle-button.origin-end :dir(rtl) {
+  transform: scaleX(-1);
+}
+
+
+.cnvs-side-panel-toggle-button.state-collapsed.origin-end {
+  transform: scaleX(-1);
+}
+
+.cnvs-side-panel-toggle-button.state-collapsed.origin-end :dir(rtl) {
+  transform: scaleX(1);
+}
+
+
+.cnvs-side-panel-toggle-button.state-collapsing.origin-end {
+  transform: scaleX(-1);
+  inset-inline-start: var(--cnvs-base-size-150, 0.75rem);
+}
+
+.cnvs-side-panel-toggle-button.state-collapsing.origin-end :dir(rtl) {
+  transform: scaleX(1);
+  inset-inline-end: var(--cnvs-base-size-150, 0.75rem);
+}
+
+
+.cnvs-side-panel-toggle-button.state-expanded.origin-end {
+  transform: scaleX(1);
+  inset-inline-start: var(--cnvs-base-size-150, 0.75rem);
+}
+
+.cnvs-side-panel-toggle-button.state-expanded.origin-end :dir(rtl) {
+  transform: scaleX(-1);
+  inset-inline-end: var(--cnvs-base-size-150, 0.75rem);
+}
+
+
+.cnvs-side-panel-toggle-button.state-expanding.origin-end {
+  transform: scaleX(1);
+  inset-inline-start: var(--cnvs-base-size-150, 0.75rem);
+}
+
+.cnvs-side-panel-toggle-button.state-expanding.origin-end :dir(rtl) {
+  transform: scaleX(-1);
+  inset-inline-end: var(--cnvs-base-size-150, 0.75rem);
+}
+
+
+.cnvs-panel {
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  outline: 0.0625rem solid transparent;
+  transition: width ease-out 200ms,max-width ease-out 200ms;
+}
+
+
+.cnvs-panel.variant-alternate {
+  background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
+  box-shadow: var(--cnvs-sys-depth-3);
+}
+
+
+.cnvs-panel.variant-standard {
+  background-color: var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));
+}
+
+
+.cnvs-panel.expanded-expanded {
+  width: var(--cnvs-panel-expanded-width);
+  max-width: var(--cnvs-panel-expanded-width);
+}
+
+
+.cnvs-panel.expanded-collapsed {
+  width: var(--cnvs-panel-collapsed-width);
+  max-width: var(--cnvs-panel-collapsed-width);
+}
+
+
+.cnvs-panel.expanded-expanding {
+  width: var(--cnvs-panel-expanded-width);
+  max-width: var(--cnvs-panel-expanded-width);
+}
+
+
+.cnvs-panel.expanded-collapsing {
+  width: var(--cnvs-panel-collapsed-width);
+  max-width: var(--cnvs-panel-collapsed-width);
+}
+

package/skeleton.css

@@ -1,33 +1,33 @@
 .cnvs-skeleton-shape {
   box-sizing: border-box;
-  background-color: var(--cnvs-skeleton-shape-background-color, var(--cnvs-sys-color-bg-alt-strong));
-  border-radius: var(--cnvs-skeleton-shape-border-radius, var(--cnvs-sys-space-zero));
+  background-color: var(--cnvs-skeleton-shape-background-color, var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13)));
+  border-radius: var(--cnvs-skeleton-shape-border-radius, 0);
   height: var(--cnvs-skeleton-shape-height, 100%);
   width: var(--cnvs-skeleton-shape-width);
-  margin-bottom: var(--cnvs-sys-space-x4);
+  margin-bottom: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
 }
 
 
 .cnvs-skeleton-header {
   box-sizing: border-box;
-  background-color: var(--cnvs-skeleton-header-background-color, var(--cnvs-sys-color-bg-alt-strong));
-  border-radius: 0;
-  height: var(--cnvs-skeleton-header-height, calc(var(--cnvs-sys-space-x1) * 7));
+  background-color: var(--cnvs-skeleton-header-background-color, var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13)));
+  border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
+  height: var(--cnvs-skeleton-header-height, var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem)));
   width: var(--cnvs-skeleton-header-width);
-  margin-bottom: var(--cnvs-sys-space-x4);
+  margin-bottom: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
 }
 
 
 .cnvs-skeleton-text {
   box-sizing: border-box;
-  margin-bottom: var(--cnvs-sys-space-x6);
+  margin-bottom: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
 }
 
 .cnvs-skeleton-text [data-part="skeleton-text-lines"] {
-  background-color: var(--cnvs-skeleton-text-background-color, var(--cnvs-sys-color-bg-alt-strong));
-  height: 1.3125rem;
-  margin-block-end: var(--cnvs-sys-space-x3);
-  border-radius: var(--cnvs-sys-shape-half);
+  background-color: var(--cnvs-skeleton-text-background-color, var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13)));
+  height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
+  margin-block-end: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
+  border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
   width: 100%;
 }
 
@@ -36,7 +36,7 @@
 }
 
 
-@keyframes animation-cty1g {
+@keyframes animation-1sx4x3 {
   from {
     opacity: 0.4;
   }
@@ -49,7 +49,7 @@
 
 .cnvs-skeleton {
   box-sizing: border-box;
-  animation: animation-cty1g 0.8s linear infinite alternate;
+  animation: animation-1sx4x3 0.8s linear infinite alternate;
   position: relative;
   overflow: hidden;
   height: 100%;

package/switch.css

@@ -1,8 +1,8 @@
 .cnvs-switch-container {
   box-sizing: border-box;
   position: relative;
-  height: var(--cnvs-sys-space-x6);
-  width: var(--cnvs-sys-space-x8);
+  height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
+  width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
 }
 
 
@@ -10,17 +10,15 @@
   box-sizing: border-box;
   display: flex;
   position: absolute;
-  height: var(--cnvs-sys-space-x6);
-  width: var(--cnvs-sys-space-x8);
-  margin: var(--cnvs-sys-space-zero);
-  margin-left: var(--cnvs-sys-space-x1);
-  border-radius: var(--cnvs-sys-shape-round);
+  height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
+  width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
   opacity: 0;
   cursor: pointer;
 }
 
 .cnvs-switch-input:checked~div:first-of-type, .cnvs-switch-input.checked~div:first-of-type {
-  background-color: var(--cnvs-brand-primary-base);
+  background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
 }
 
 .cnvs-switch-input:checked:disabled~div:first-of-type, .cnvs-switch-input.checked:disabled~div:first-of-type, .cnvs-switch-input:checked.disabled~div:first-of-type, .cnvs-switch-input.checked.disabled~div:first-of-type {
@@ -40,17 +38,17 @@
 }
 
 .cnvs-switch-input:focus-visible~div:first-of-type, .cnvs-switch-input:focus~div:first-of-type, .cnvs-switch-input.focus~div:first-of-type {
-  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
+  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
 }
 
 
 .cnvs-switch-input.error-error~div:first-of-type {
-  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-common-error-inner),0 0 0 0.3125rem transparent;
+  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 0.25rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),0 0 0 0.3125rem transparent;
 }
 
 
 .cnvs-switch-input.error-caution~div:first-of-type {
-  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-common-alert-inner),0 0 0 0.3125rem var(--cnvs-brand-common-alert-outer);
+  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 0.25rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),0 0 0 0.3125rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
 }
 
 
@@ -60,34 +58,34 @@
   display: flex;
   align-items: center;
   pointer-events: none;
-  margin-top: var(--cnvs-sys-space-x1);
-  width: var(--cnvs-sys-space-x8);
-  height: var(--cnvs-sys-space-x4);
-  border-radius: var(--cnvs-sys-shape-round);
-  padding: var(--cnvs-sys-space-zero) 0.125rem;
+  margin-top: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
+  width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+  height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
+  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
+  padding: 0 0.125rem;
   transition: background-color 200ms ease;
-  background-color: var(--cnvs-sys-color-bg-muted-soft);
+  background-color: var(--cnvs-sys-color-accent-muted-soft, var(--cnvs-sys-color-bg-muted-softer, oklch(0.754 0.0181 256.33 / 1)));
 }
 
 
 .cnvs-switch-circle {
   box-sizing: border-box;
-  width: var(--cnvs-sys-space-x3);
-  height: var(--cnvs-sys-space-x3);
-  border-radius: var(--cnvs-sys-shape-round);
+  width: var(--cnvs-base-size-150, 0.75rem);
+  height: var(--cnvs-base-size-150, 0.75rem);
+  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
   box-shadow: var(--cnvs-sys-depth-1);
   transition: transform 150ms ease;
   pointer-events: none;
-  background-color: var(--cnvs-brand-primary-accent);
-  transform: translateX(var(--cnvs-sys-space-zero));
+  background-color: var(--cnvs-sys-color-fg-inverse);
+  transform: translateX(0);
 }
 
 
 .cnvs-switch-circle.checked {
-  transform: translateX(var(--cnvs-sys-space-x4));
+  transform: translateX(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)));
 }
 
 .cnvs-switch-circle.checked :dir(rtl) {
-  transform: translateX(calc(var(--cnvs-sys-space-x4) * -1));
+  transform: translateX(calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)) * -1));
 }
 

package/table.css

@@ -1,18 +1,3 @@
-.cnvs-base-table-head {
-  box-sizing: border-box;
-  background-color: var(--cnvs-sys-color-bg-alt-softer);
-  min-height: calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));
-}
-
-.cnvs-base-table-head th:first-of-type {
-  border-inline-start: none;
-}
-
-.cnvs-base-table-head th:last-of-type {
-  border-inline-end: none;
-}
-
-
 .cnvs-base-table-body {
   box-sizing: border-box;
 }
@@ -34,15 +19,9 @@
 }
 
 
-.cnvs-base-table-header {
+.cnvs-base-table-caption {
   box-sizing: border-box;
-  background-color: var(--cnvs-sys-color-bg-default);
-  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
-  justify-content: start;
-  min-height: calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));
-  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
-  word-break: break-word;
-  font-weight: var(--cnvs-sys-font-weight-medium);
+  padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
 }
 
 
@@ -50,18 +29,39 @@
   box-sizing: border-box;
   align-items: center;
   background-color: var(--cnvs-sys-color-bg-default);
-  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
+  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
   grid-template-columns: 1fr;
   justify-content: start;
   min-height: 3.5rem;
-  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
+  padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
   word-break: break-word;
 }
 
 
-.cnvs-base-table-caption {
+.cnvs-base-table-head {
   box-sizing: border-box;
-  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
+  background-color: var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)));
+  min-height: calc(var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem)) - var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)));
+}
+
+.cnvs-base-table-head th:first-of-type {
+  border-inline-start: none;
+}
+
+.cnvs-base-table-head th:last-of-type {
+  border-inline-end: none;
+}
+
+
+.cnvs-base-table-header {
+  box-sizing: border-box;
+  background-color: var(--cnvs-sys-color-bg-default);
+  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
+  justify-content: start;
+  min-height: calc(var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem)) - var(--cnvs-base-size-100, 0.5rem));
+  padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
+  word-break: break-word;
+  font-weight: var(--cnvs-sys-font-weight-medium);
 }
 
 
@@ -69,13 +69,13 @@
   box-sizing: border-box;
   font-family: var(--cnvs-sys-font-family-default);
   font-weight: var(--cnvs-sys-font-weight-normal);
-  line-height: var(--cnvs-sys-line-height-subtext-large);
-  font-size: var(--cnvs-sys-font-size-subtext-large);
-  letter-spacing: var(--cnvs-base-letter-spacing-150);
-  border: 0.0625rem solid var(--cnvs-sys-color-border-container);
-  border-radius: var(--cnvs-sys-shape-x2);
+  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
+  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
+  border: 0.0625rem solid var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)));
+  border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
   overflow: auto;
-  color: var(--cnvs-sys-color-text-default);
+  color: var(--cnvs-sys-color-fg-default);
 }
 
 

package/tabs.css

@@ -1,79 +1,80 @@
 .cnvs-tab-item {
   box-sizing: border-box;
-  font-family: var(--cnvs-sys-font-family-default),Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
+  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
   font-weight: var(--cnvs-sys-font-weight-medium);
-  line-height: var(--cnvs-sys-line-height-subtext-large);
-  font-size: var(--cnvs-sys-font-size-subtext-large);
-  letter-spacing: var(--cnvs-base-letter-spacing-150);
   border: none;
-  background-color: transparent;
+  background-color: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
   flex: 0 0 auto;
-  min-width: var(--cnvs-sys-space-zero);
+  min-width: 0;
   align-items: center;
-  padding: var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);
-  height: 3.25rem;
+  padding: 0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
+  height: var(--cnvs-sys-size-lg, 3rem);
   cursor: pointer;
   color: var(--cnvs-sys-color-fg-muted-default);
   position: relative;
-  border-radius: var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);
+  border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));
   transition: background 150ms ease,color 150ms ease;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   --cnvs-system-icon-color: currentColor;
+  --cnvs-svg-size: var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));
 }
 
 .cnvs-tab-item:has(span) {
   display: flex;
-  gap: var(--cnvs-sys-space-x2);
+  gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
 }
 
 .cnvs-tab-item:hover, .cnvs-tab-item.hover, .cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
-  background-color: var(--cnvs-sys-color-bg-alt-default);
-  color: var(--cnvs-sys-color-fg-contrast-default);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
+  background-color: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
+  color: var(--cnvs-sys-color-fg-muted-strong);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-strong);
 }
 
 .cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
   outline: 0.125rem solid transparent;
-  box-shadow: inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)),inset 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1));
-  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
-  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
+  box-shadow: inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)),inset 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0));
+  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
+  --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
+  color: var(--cnvs-sys-color-fg-strong);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
 }
 
 .cnvs-tab-item:disabled, .cnvs-tab-item.disabled, .cnvs-tab-item[aria-disabled] {
-  color: var(--cnvs-sys-color-text-disabled);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
+  opacity: var(--cnvs-sys-opacity-disabled);
 }
 
 .cnvs-tab-item:disabled:hover, .cnvs-tab-item.disabled:hover, .cnvs-tab-item[aria-disabled]:hover {
   cursor: auto;
-  background-color: var(--cnvs-sys-color-bg-transparent-default);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
+  background-color: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-default);
 }
 
 .cnvs-tab-item[aria-selected=true] {
-  color: var(--cnvs-brand-primary-base);
+  color: var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
   cursor: default;
-  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
 }
 
 .cnvs-tab-item[aria-selected=true]:after {
   position: absolute;
-  border-bottom: var(--cnvs-sys-space-x1) solid transparent;
-  border-radius: var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);
-  background-color: var(--cnvs-brand-primary-base);
-  bottom: var(--cnvs-sys-space-zero);
+  border-bottom: var(--cnvs-base-size-50, 0.25rem) solid transparent;
+  border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));
+  background-color: var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
+  bottom: 0;
   content: '';
-  left: var(--cnvs-sys-space-zero);
-  margin-block-start: calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);
+  left: 0;
+  margin-block-start: calc(calc(var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) / var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))) * -1);
   width: 100%;
 }
 
 .cnvs-tab-item[aria-selected=true]:hover, .cnvs-tab-item[aria-selected=true].hover, .cnvs-tab-item[aria-selected=true]:focus-visible, .cnvs-tab-item[aria-selected=true].focus {
-  background-color: var(--cnvs-sys-color-bg-transparent-default);
-  color: var(--cnvs-brand-primary-base);
+  background-color: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
+  color: var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
 }
 
 
@@ -81,15 +82,23 @@
   box-sizing: border-box;
   display: flex;
   position: relative;
-  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
-  gap: var(--cnvs-sys-space-x3);
-  padding-inline: var(--cnvs-sys-space-x6);
+  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
+  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
+  padding-inline: var(--cnvs-base-size-500, 2.5rem);
+}
+
+@media screen and (max-width: 768px) {
+.cnvs-tabs-list {
+  padding-inline: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
+}
+
+
 }
 
 
 .cnvs-tabs-list.modality-touch {
   overflow-x: auto;
-  padding-inline: var(--cnvs-sys-space-zero);
+  padding-inline: 0;
 }
 
 .cnvs-tabs-list.modality-touch[data-scroll-position="start"] {
@@ -118,6 +127,6 @@
 
 .cnvs-tabs-overflow-button:has([data-part="tabs-overflow-button-icon"]) {
   display: flex;
-  gap: var(--cnvs-sys-space-zero);
+  gap: 0;
 }
 

package/text-area.css

@@ -1,7 +1,7 @@
 .cnvs-text-area {
   box-sizing: border-box;
-  min-height: var(--cnvs-sys-space-x16);
-  min-width: calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10));
+  min-height: var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));
+  min-width: 17.5rem;
 }
 
 .cnvs-text-area::webkit-resizer {