@warp-ds/css 2.0.0-v2.1 → 2.0.0

package/component-classes/index.js

@@ -1,54 +1,20 @@
-export const attention = {
-  base: 'border-2 relative',
-  tooltip:
-    'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',
-  callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',
-  popover:
-    'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',
-  arrowBase:
-    'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
-  arrowDirectionLeft: '-left-[8px]',
-  arrowDirectionRight: '-right-[8px]',
-  arrowDirectionBottom: '-bottom-[8px]',
-  arrowDirectionTop: '-top-[8px]',
-  arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',
-  arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',
-  arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',
-  content: 'last-child:mb-0',
-  notCallout: 'absolute z-50',
-};
-
 export const pageIndicator = {
   wrapper: 'flex space-x-8 p-8',
   dot: 'h-8 w-8 rounded-full',
-  inactive: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',
-  active: 'i-bg-$color-pageindicator-background-selected',
-};
-
-// Deprecated: Use Badge component
-export const ribbon = {
-  base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',
-  info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',
-  success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',
-  warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',
-  error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',
-  disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',
-  sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',
-  neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',
-  roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',
-  roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',
+  inactive: 's-bg-disabled-subtle hover:bg-[--w-s-icon-subtle]',
+  active: 'bg-[--w-s-icon-selected]',
 };
 
 export const badge = {
   base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',
-  neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',
-  info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',
-  positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',
-  warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',
-  negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',
-  disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',
-  price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',
-  notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',
+  neutral: 'bg-[--w-color-badge-neutral-background] s-text',
+  info: 'bg-[--w-color-badge-info-background] s-text',
+  positive: 'bg-[--w-color-badge-positive-background] s-text',
+  warning: 'bg-[--w-color-badge-warning-background] s-text',
+  negative: 'bg-[--w-color-badge-negative-background] s-text',
+  disabled: 's-bg-disabled s-text',
+  price: 'bg-[--w-black/70] s-text-inverted-static',
+  sponsored: 'bg-[--w-color-badge-sponsored-background] s-text',
   positionBase: 'absolute backdrop-blur',
   positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',
   positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',
@@ -58,67 +24,61 @@ export const badge = {
 
 export const slider = {
   wrapper: 'touch-pan-y relative w-full h-44 py-2',
-  track:
-    'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',
-  trackDisabled:
-    'pointer-events-none i-bg-$color-slider-track-background-disabled',
-  activeTrack:
-    'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',
-  activeTrackDisabled:
-    'i-bg-$color-slider-track-background-disabled pointer-events-none',
-  thumb:
-    'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',
+  track: 'absolute s-bg-disabled-subtle h-4 top-20 rounded-4 w-full',
+  trackDisabled: 'pointer-events-none',
+  activeTrack: 'absolute h-6 top-[19px] rounded-4',
+  activeTrackEnabled: 's-bg-primary',
+  activeTrackDisabled: 's-bg-disabled pointer-events-none',
+  thumb: 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',
   thumbEnabled:
-    'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',
-  thumbDisabled:
-    'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',
+    'border-2 shadow-[--w-shadow-slider] cursor-pointer s-bg-primary s-border-primary hover:s-bg-primary-hover hover:s-border-primary-hover hover:shadow-[--w-shadow-slider-handle-hover] active:s-bg-primary-active active:s-border-primary-active active:shadow-[--w-shadow-slider-handle-active] focus:shadow-[--w-shadow-slider-handle-hover] focus:s-border-primary-hover focus:s-bg-primary-hover',
+  thumbDisabled: 's-bg-disabled cursor-disabled pointer-events-none',
 };
 
 export const box = {
-  box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable
+  base: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable
   bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8
-  info: 'i-bg-$color-box-info-background i-text-$color-box-info-text',
-  neutral: 'i-bg-$color-box-neutral-background i-text-$color-box-neutral-text',
-  bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',
-  infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',
-  neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',
-  borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',
+  info: 's-bg-info-subtle',
+  neutral: 's-surface-sunken',
+  bordered: 'border-2 s-border s-bg',
 };
 
 export const pill = {
-  pill: 'flex items-center',
+  wrapper: 'flex items-center',
   button: 'inline-flex items-center focusable text-xs transition-all',
-  suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold',
-  filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text',
+  suggestion:
+    'bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold',
+  filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted',
   label: 'pl-12 py-8 rounded-l-full',
   labelWithoutClose: 'pr-12 rounded-r-full',
   labelWithClose: 'pr-2',
-  close: 'pr-12 pl-4 pt-4 pb-6 rounded-r-full text-m!',
+  close: 'pr-12 pl-4 py-8 rounded-r-full',
   a11y: 'sr-only',
 };
 
 export const step = {
-  step: 'group/step',
-  stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',
-  stepVerticalLeft: 'grid-cols-[20px_1fr]',
-  stepVerticalRight: 'grid-cols-[1fr_20px] text-right',
-  stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',
-
-  stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 i-text-$color-stepindicator-handle-icon',
-  stepDotVerticalRight: 'col-start-2',
-  stepDotHorizontal: 'row-start-2 justify-self-end',
-  stepDotActive: 'i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background-active',
-  stepDotIncomplete: 'i-border-$color-stepindicator-handle-border i-bg-$color-stepindicator-handle-background',
-
-  stepLine: 'group-last/stepv:hidden transition-colors duration-300',
-  stepLineVertical: 'w-2 h-full justify-self-center',
-  stepLineVerticalRight: 'col-start-2',
-  stepLineHorizontal: 'h-2 w-full row-start-2',
-  stepLineHorizontalRight: 'group-last/steph:bg-transparent',
-  stepLineHorizontalLeft: 'group-first/steph:bg-transparent',
-
-  stepLineIncomplete: 'i-bg-$color-stepindicator-track-background',
-  stepLineComplete: 'i-bg-$color-stepindicator-track-background-active',
+  base: 'group/step',
+  vertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',
+  horizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',
+
+  alignLeft: 'grid-cols-[20px_1fr]',
+  alignRight: 'grid-cols-[1fr_20px] text-right',
+
+  dot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted',
+  dotAlignRight: 'col-start-2',
+  dotHorizontal: 'row-start-2 justify-self-end',
+  dotActive: 's-border-primary s-bg-primary',
+  dotIncomplete: 's-border s-bg',
+
+  line: 'group-last/stepv:hidden transition-colors duration-300',
+  lineVertical: 'w-2 h-full justify-self-center',
+  lineAlignRight: 'col-start-2',
+  lineHorizontal: 'h-2 w-full row-start-2',
+  lineHorizontalAlignRight: 'group-last/steph:bg-transparent',
+  lineHorizontalAlignLeft: 'group-first/steph:bg-transparent',
+
+  lineIncomplete: 's-bg-disabled',
+  lineComplete: 's-bg-primary',
 
   content: 'last:mb-0 group-last/step:last:pb-0',
   contentVertical: 'row-span-2 pb-32',
@@ -126,82 +86,72 @@ export const step = {
 };
 
 export const steps = {
-  steps: 'w-full',
-  stepsHorizontal: 'flex',
+  wrapper: 'w-full',
+  horizontal: 'flex',
 };
 
 export const card = {
-  card: 'cursor-pointer overflow-hidden relative transition-all',
-  cardShadow: 'rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent',
-  cardFlat: 'border-2 rounded-4',
-  cardFlatUnselected:
-    'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',
-  cardFlatSelected:
-    'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',
-  cardSelected:
-    'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',
-  cardOutline:
-    'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',
-  cardOutlineUnselected: 'i-border-$color-card-border',
-  cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',
+  base: 'cursor-pointer overflow-hidden relative transition-all',
+  shadow: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active',
+  selected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active',
+  outline: 'absolute border-2 rounded-8 inset-0 transition-all',
+  outlineUnselected: 'border-transparent group-active:s-border-active',
+  outlineSelected: 's-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active',
+  flat: 'border-2 rounded-4',
+  flatUnselected: 's-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',
+  flatSelected:
+    's-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active',
   a11y: 'sr-only',
 };
 
 export const switchToggle = {
-  switch: 'tap-highlight-transparent',
-  label: 'block relative h-24 w-44 cursor-pointer group',
-  labelDisabled: 'pointer-events-none',
+  base: 'block relative h-24 w-44 cursor-pointer group focusable rounded-full',
+  disabled: 'pointer-events-none',
   track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',
-  trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',
-  trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',
-  trackDisabled: 'i-bg-$color-switch-track-background-disabled',
+  trackActive: 's-bg-primary group-hover:s-bg-primary-hover',
+  trackInactive: 'bg-[--w-color-switch-track-background] group-hover:bg-[--w-color-switch-track-background-hover]',
+  trackDisabled: 's-bg-disabled-subtle',
   handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',
   handleSelected: 'translate-x-20',
-  handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',
-  handleDisabled: 'i-bg-$color-switch-handle-background-disabled',
+  handleNotDisabled: 's-bg shadow-s',
+  handleDisabled: 's-bg-disabled',
   a11y: 'sr-only',
 };
 
 export const toaster = {
-  container:
-    'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',
+  wrapper: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',
+  base: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',
   content: 'w-full',
-  toaster:
-    'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',
 };
 
 export const toast = {
   wrapper: 'relative overflow-hidden w-full',
-  toast:
-    'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',
-  positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',
-  warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',
-  negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',
-  icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',
-  iconPositive: 'i-text-$color-toast-positive-icon',
-  iconWarning: 'i-text-$color-toast-warning-icon',
-  iconNegative: 'i-text-$color-toast-negative-icon',
+  base: 'flex group p-8 mt-16 rounded-8 border-2 pointer-events-auto transition-all',
+  positive: 's-bg-positive-subtle s-border-positive-subtle s-text',
+  warning: 's-bg-warning-subtle s-border-warning-subtle s-text',
+  negative: 's-bg-negative-subtle s-border-negative-subtle s-text',
+  iconBase: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',
+  iconPositive: 's-icon-positive',
+  iconWarning: 's-icon-warning',
+  iconNegative: 's-icon-negative',
   iconLoading: 'animate-bounce',
   content: 'self-center mr-8 py-4 last-child:mb-0',
-  close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',
+  close: 'bg-transparent ml-auto p-[8px] s-icon hover:s-icon-hover active:s-icon-active',
 };
 
 export const tabs = {
-  tabContainer: 'mx-auto max-w-screen-md w-full grid relative',
-  wunderbar:
-    'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',
-  wrapperUnderlined:
-    'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',
+  wrapper: 'inline-block border-b s-border mb-32',
+  base: 'inline-grid relative -mb-1',
+  selectionIndicator: 'absolute s-border-selected -bottom-0 border-b-4 transition-all',
 };
 
 export const tab = {
-  tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',
-  tabActive: 'i-text-$color-tabs-text-selected',
-  icon: 'mx-auto hover:i-text-$color-tabs-text-hover',
-  iconUnderlinedActive: 'i-text-$color-tabs-text-selected',
+  base: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent border-transparent hover:s-text-link hover:s-border-primary',
+  inactive: 's-text-subtle',
+  active: 's-text-link',
+  icon: 'mx-auto',
   content: 'flex items-center justify-center gap-8',
   contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings
-  contentUnderlinedActive: 'i-text-$color-tabs-text-selected',
 };
 
 // Todo: Handle dynamic classnames
@@ -217,41 +167,50 @@ export const gridLayout = {
   cols9: 'grid-cols-9',
 };
 
-export const buttonReset =
-  'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';
+export const buttonReset = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';
 
 export const expandable = {
-  expandable: 'will-change-height',
-  expandableTitle: 'font-bold i-text-$color-expandable-title-text',
-  expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,
-  expandableBleed: box.bleed,
-  chevron: 'inline-block align-middle transform transition-transform transform-gpu i-text-$color-expandable-icon',
-  chevronNonBox: 'relative left-8',
-  chevronBox: 'absolute right-16',
-  chevronExpanded: '-rotate-180',
+  wrapper: 'will-change-height s-text',
+  box: 's-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8',
+  bleed: '-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8',
+  chevron: 'inline-block align-middle s-icon',
+  chevronNonBox: 'ml-8',
+  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',
+  chevronExpand: '-rotate-180',
+  chevronCollapse: 'rotate-180',
+
+  // These are web component specific classes, using the ::part-selector:
+  elementsChevronDownTransform:
+    'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',
+  elementsChevronUpTransform:
+    'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',
+  elementsChevronExpand: 'part-[w-icon-chevron-down-16-part]:-rotate-180',
+  elementsChevronCollapse: 'part-[w-icon-chevron-up-16-part]:rotate-180',
+
   expansion: 'overflow-hidden',
   expansionNotExpanded: 'h-0 invisible',
-  button: buttonReset + ' hover:underline focus:underline',
-  buttonBox: 'w-full text-left relative inline-flex items-center ' + box.box,
-  paddingTop: 'pt-0',
-  title: 'flex justify-between items-center',
-  titleType: 'h4',
+  button: 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline',
+  buttonBox: 'w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 p-16 rounded-8',
+  contentWithTitle: 'pt-0',
+  title: 'flex w-full justify-between items-center',
+  titleType: 't4',
 };
 
 const buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';
 
 const buttonColors = {
-  primary: 'i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',
-  secondary: 'i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',
-  utility: 'i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active',
-  destructive: 'i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active',
-  pill: 'i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',
-  disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',
-  quiet: 'i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active',
-  utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',
-  negativeQuiet: 'i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active',
-  loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',
-  link: 'i-text-$color-button-link-text',
+  primary:
+    's-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]',
+  secondary: 's-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active',
+  utility: 's-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',
+  destructive: 's-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active',
+  pill: 's-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
+  disabled: 's-text-inverted s-bg-disabled',
+  quiet: 'bg-transparent s-text-link hover:s-bg-hover active:s-bg-active',
+  utilityQuiet: 's-text bg-transparent hover:s-bg-hover active:s-bg-active',
+  negativeQuiet: 'bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active',
+  loading: 's-text s-bg-subtle',
+  link: 's-text-link',
 };
 
 const buttonTypes = {
@@ -259,9 +218,8 @@ const buttonTypes = {
   secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,
   utility: `border rounded-4 ${buttonDefaultStyling}`,
   negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
-  pill:
-  `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
-  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,
+  pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
+  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${buttonColors.link}`,
 };
 
 const buttonSizes = {
@@ -282,38 +240,28 @@ const buttonTextSizes = {
 };
 
 const buttonVariants = {
-  inProgress:
-    `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited
-  quiet:
-    `border-0 rounded-8 ${buttonDefaultStyling}`,
+  inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited
+  quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
   utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,
   negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
-  isDisabled:
-    `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled
+  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled
 };
 
 export const button = {
   // Buttontypes
-  secondary:
-  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button
-  secondaryHref:
-  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
-  secondaryDisabled:
-  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
+  secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button
+  secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
   secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,
   secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
-  secondaryQuiet:
-  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
-  secondaryQuietDisabled:
-  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
   secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
   secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
-  secondaryLoading:
-  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
+  secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
   secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
   secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
-  secondaryQuietLoading:
-  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
 
   primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta
   primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,
@@ -361,177 +309,266 @@ export const button = {
 
   link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,
   linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
-  linkAsButton: 'inline-block hover:no-underline text-center',
+  linkAsButton: 'inline-block active:no-underline hover:no-underline focus:no-underline text-center',
   a11y: 'sr-only',
-  fullWidth: "w-full max-w-full",
-  contentWidth: "max-w-max",
+  fullWidth: 'w-full max-w-full',
+  contentWidth: 'max-w-max',
 };
 
 export const buttonGroup = {
   wrapper: 'inline-flex rounded-4 overflow-hidden',
-  raised: 'i-shadow-$shadow-buttongroup',
+  raised: 'shadow-s',
   vertical: 'flex-col',
   nonOutlinedVertical: 'divide-y',
   nonOutlinedHorizontal: 'divide-x',
 };
 
 export const buttonGroupItem = {
-  wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',
-  outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',
+  wrapper: 'relative s-text',
+  outlined: 'border hover:z-30',
   outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',
   outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',
   outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',
   outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',
-  outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',
-  selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',
+  outlinedUnselected: 'border-[--w-color-buttongroup-utility-border] active:border-[--w-color-buttongroup-utility-border-selected]',
+  outlinedSelected: 'active:border-[--w-color-buttongroup-utility-border-selected]',
+  unselected:
+    's-bg hover:bg-[--w-color-buttongroup-utility-background-hover] active:s-text active:bg-[--w-color-buttongroup-utility-background-selected]',
+  selected: 'z-30 bg-[--w-color-buttongroup-utility-background-selected]',
 };
 
 export const modal = {
-  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop
-  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,
   backdrop:
-    'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-20 [--w-modal-max-height:80%] [--w-modal-width:640px]',
-  modal:
-    'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',
-  content:
-    'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
+    'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px] bg-[--w-black/25]',
+  base: 'pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',
+  content: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
   footer: 'flex justify-end shrink-0 px-16 sm:px-32',
   transitionTitle: 'transition-all duration-300',
-  transitionTitleCenter: 'justify-self-center',
+  transitionTitleCenter: 'justify-self-center self-center',
   transitionTitleColSpan: 'col-span-2',
   title:
-    '-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0',
+    'py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0',
   titleText: 'mb-0 h4 sm:h3',
-  titleButton: button.pill + ' sm:min-h-[32px] sm:min-w-[32px]',
+  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
   titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',
   titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',
   titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',
   titleButtonIconRotated: 'transform rotate-90',
 };
 
+export const modalElement = {
+  // several items in here are 'resets' for the <dialog> element
+  dialogEl:
+    'bg-transparent backface-hidden w-unset h-unset max-w-unset max-h-unset p-0 m-auto border-0 inset-0 open:flex open:fixed sm:place-content-center sm:place-items-center items-end [--w-modal-max-height:80%] [--w-modal-width:640px]',
+  dialogInner:
+    'transition-all relative pb-safe-[32] sm:pb-32 shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] ease-in-out backface-hidden will-change-height rounded-8 sm:mx-16 s-bg flex flex-col overflow-hidden lt-sm:rounded-b-0',
+  contentSlot: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
+  header: 'relative pb-8',
+  headerTitleBar: 'pt-16 sm:pt-24 px-16 sm:px-32 grid gap-12 grid-cols-[auto_1fr_auto] items-start shrink-0!',
+  headerButton:
+    'sm:min-h-[32px] sm:min-w-[32px] min-h-[40px] min-w-[40px] text-m leading-[24] p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding font-bold focusable transition-colors ease-in-out',
+  headerButtonLeft:
+    '-ml-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
+  headerCloseButton:
+    '-mr-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
+  headerCloseButtonOnImage: `absolute right-8 top-8 z-10 s-color-inverted bg-[var(--w-black)/70] hover:bg-[var(--w-black)/85] active:bg-[var(--w-black)] s-text-inverted`,
+  headerTitle: 'mb-0 t3 self-center',
+  headerTitleWithBackButton: 'justify-self-center',
+  headerTitleWithoutBackButton: 'col-span-2',
+  headerTitleWithTopArea: 'pt-16 px-16 sm:px-32',
+  footer: 'flex justify-end shrink-0 px-16 sm:px-32 pt-24',
+};
+
 export const alert = {
-  alert: "flex p-16 border border-l-4 rounded-4",
-  willChangeHeight: "will-change-height",
-  textWrapper: "last-child:mb-0 text-s",
-  title: "text-s",
-  icon: "w-16 mr-8 min-w-16",
-  negative:  "i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border",
-  negativeIcon: "i-text-$color-alert-negative-icon",
-  positive:  "i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border",
-  positiveIcon: "i-text-$color-alert-positive-icon",
-  warning:  "i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border",
-  warningIcon: "i-text-$color-alert-warning-icon",
-  info:  "i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border",
-  infoIcon: "i-text-$color-alert-info-icon",
+  wrapper: 'flex p-16 border border-l-4 rounded-4 s-text',
+  willChangeHeight: 'will-change-height',
+  textWrapper: 'last-child:mb-0 text-s',
+  title: 'text-s',
+  icon: 'w-16 mr-8 min-w-16',
+  negative: 's-border-negative-subtle s-border-l-negative s-bg-negative-subtle',
+  negativeIcon: 's-icon-negative',
+  positive: 's-border-positive-subtle s-border-l-positive s-bg-positive-subtle',
+  positiveIcon: 's-icon-positive',
+  warning: 's-border-warning-subtle s-border-l-warning s-bg-warning-subtle',
+  warningIcon: 's-icon-warning',
+  info: 's-border-info-subtle s-border-l-info s-bg-info-subtle',
+  infoIcon: 's-icon-info',
 };
 
 export const input = {
-  default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',
-  textArea: 'min-h-[42] sm:min-h-[45]',
-  disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',
-  invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',
-  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',
-  placeholder: 'placeholder:i-text-$color-input-text-placeholder',
+  // wrapper classes
   wrapper: 'relative',
+  // input classes
+  base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true
+  default: 'border-1 s-text s-bg s-border hover:s-border-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly
+  disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly
+  invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly
+  readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly
+  placeholder: 'placeholder:s-text-placeholder',
   suffix: 'pr-40',
-  prefix: 'pl-40',
+  prefix: 'pl-[var(--w-prefix-width,_40px)]',
+  // textarea classes
+  textArea: 'min-h-[42] sm:min-h-[45]',
 };
 
 export const select = {
-  default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',
-  disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none',
-  invalid: 'i-border-$color-select-border-negative',
-  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',
+  base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current',
+  default: 's-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active',
+  disabled:
+    's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none',
+  invalid:
+    's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!',
+  readOnly: 's-text bg-transparent pl-0 border-0 pointer-events-none before:hidden',
   wrapper: 'relative',
   selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,
-  chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',
+  chevron: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer',
   chevronDisabled: 'opacity-25',
 };
 
 export const label = {
-  label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',
-  labelInvalid: 'i-text-$color-label-text-negative',
-  optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',
+  base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',
+  optional: 'pl-8 font-normal text-s s-text-subtle',
 };
 
 export const helpText = {
-  helpText: 'text-xs mt-4 block i-text-$color-helptext-text',
-  helpTextValid: 'i-text-$color-helptext-text-positive',
-  helpTextInvalid: 'i-text-$color-helptext-text-negative',
+  base: 'text-xs mt-4 block',
+  color: 's-text-subtle',
+  colorInvalid: 's-text-negative',
 };
 
-const prefixSuffixWrapperBase =
-  'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';
+const prefixSuffixWrapper =
+  'absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ';
 
 export const suffix = {
-  wrapper: prefixSuffixWrapperBase + 'right-0',
+  wrapper: prefixSuffixWrapper + 'right-0',
   wrapperWithLabel: 'w-max pr-12',
   wrapperWithIcon: 'w-40',
-  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',
+  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',
 };
 
 export const prefix = {
-  wrapper: prefixSuffixWrapperBase + 'left-0',
+  wrapper: prefixSuffixWrapper + 'left-0',
   wrapperWithLabel: 'w-max pl-12',
   wrapperWithIcon: 'w-40',
-  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',
+  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',
 };
 
 export const breadcrumbs = {
   wrapper: 'flex space-x-8',
-  text: 'i-text-$color-breadcrumbs-text',
-  link: 'i-text-$color-breadcrumbs-link-text',
-  separator: 'select-none i-text-$color-breadcrumbs-icon',
+  text: 's-text',
+  link: 's-text-link',
+  separator: 'select-none s-icon',
   a11y: 'sr-only',
 };
 
 export const toggle = {
-  field: 'relative text-m',
-  wrapper: 'relative py-1',
-  deadToggleWrapper: 'h-20 w-20 pointer-events-none',
+  // wrapper classes
+  field: 'relative text-m', // true
+  wrapper: 'relative py-1', // true
+  wrapperRadioButtons: 'inline-flex font-bold rounded-8 focus-within:focusable', // isRadioButton && !isEqualWidth
+  wrapperRadioButtonsJustified: 'flex font-bold rounded-8 focus-within:focusable', // isRadioButton && isEqualWidth,
+
+  // group classes
+  radioButtonsGroup: 'group', // isRadioButton
+  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto', // isRadioButton && isEqualWidth
+
+  // input classes
   input: 'peer',
-  deadToggleInput: 'hidden',
-  inputDisabled: 'pointer-events-none',
-  focusable: 'peer-focus:focusable',
-  focusableWithin: 'focus-within:focusable',
-  label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',
-  deadToggleLabel: '-mt-2',
-  noContent: `before:content-[""]`,
-  indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-["-"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,
-  labelDisabled: 'pointer-events-none',
-  checkbox: 'before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',
-  checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',
-  checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border-selected hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover',
-  checkboxDisabled: 'before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',
-  labelCheckboxBorder: 'i-border-$color-checkbox-border',
-  radio: 'before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',
-  radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',
-  radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ',
-  radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled',
-  labelRadioBorder: 'i-border-$color-radio-border',
-  radioButtons: 'inline-flex relative font-bold rounded-8',
-  radioButtonsGroup: 'group',
-  radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',
-  radioButtonsJustified: 'flex!',
-  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',
-  radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',
-  icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,
   a11y: 'sr-only',
+
+  // label classes
+  label:
+    'peer-focus:focusable cursor-pointer text-m s-text s-border py-2 pl-28 select-none relative block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2', // !isRadioButton
+  labelBefore: 'before:content-[""] before:block', // !isRadioButton && !isIndeterminate
+  checkbox:
+    'before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover', // isCheckbox && !isIndeterminate && !isInvalid && !isDisabled
+  checkboxInvalid:
+    'before:s-bg before:s-border-negative before:rounded-2 hover:before:s-bg-negative-subtle-hover hover:before:s-border-negative-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-bg-negative peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover', // isCheckbox && !isIndeterminate && isInvalid && !isDisabled
+  checkboxDisabled:
+    'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-2 peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled', // isCheckbox && !isIndeterminate && !isInvalid && isDisabled
+  indeterminate:
+    'before:content-["–"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary-hover peer-indeterminate:hover:before:s-bg-primary-hover', // isCheckbox && isIndeterminate && !isInvalid && !isDisabled
+  indeterminateInvalid:
+    'before:content-["–"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-negative peer-indeterminate:hover:before:s-border-negative-hover peer-indeterminate:hover:before:s-bg-negative-hover', // isCheckbox && isIndeterminate && isInvalid && !isDisabled
+  indeterminateDisabled:
+    'before:content-["–"] before:rounded-2 before:leading-xs before:text-center before:font-bold pointer-events-none before:s-icon-inverted peer-indeterminate:before:s-border-disabled peer-indeterminate:before:s-bg-disabled', // isCheckbox && isIndeterminate && !isInvalid && isDisabled
+  radio:
+    'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:before:s-border-selected peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-hover', // isRadio && !isDisabled && !isInvalid
+  radioInvalid:
+    'before:s-bg before:s-border-negative before:rounded-full peer-checked:before:border-[6] peer-hover:before:s-bg-negative-subtle peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover', // isRadio && isInvalid && !isDisabled
+  radioDisabled:
+    'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]', // isRadio && !isInvalid && isDisabled
+  radioButtonsLabel:
+    'peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2', // isRadioButtons
+  radioButtonsRegular: 'text-s py-8 pl-12 pr-14', // isRadioButtons && !isSmall
+  radioButtonsSmall: 'text-xs py-[5px] px-[8px]', // isRadioButtons && isSmall
+};
+
+export const deadToggle = {
+  wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,
+  input: `${toggle.input} hidden`,
+  inputVue: 'hidden',
+  labelVue: '-mt-2',
+  labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,
+  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,
 };
 
 export const clickable = {
   toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',
-  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,
+  label: 'antialiased block relative text-s font-bold s-text px-12 py-8 cursor-pointer focusable focusable-inset',
   buttonOrLink: 'bg-transparent focusable',
   buttonOrLinkStretch: 'inset-0 absolute',
 };
 
 export const combobox = {
   wrapper: 'relative',
-  combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',
-  textMatch: 'font-bold',
+  base: 'absolute left-0 right-0 pb-8 rounded-8 shadow-m',
   listbox: 'm-0 p-0 select-none list-none',
-  option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',
-  optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',
+  option: 'block cursor-pointer p-8',
+  optionUnselected: 's-bg hover:s-bg-hover',
+  optionSelected: 's-bg-selected hover:s-bg-selected-hover',
+  textMatch: 'font-bold',
   a11y: 'sr-only',
-};
+};
+
+export const attention = {
+  base: 'border-2 relative flex items-start',
+  tooltip: 's-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8',
+  callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8',
+  highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0',
+  popover:
+    'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0',
+
+  arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
+  arrowDirectionLeftStart: '-left-[8px]',
+  arrowDirectionLeft: '-left-[8px]',
+  arrowDirectionLeftEnd: '-left-[8px]',
+  arrowDirectionRightStart: '-right-[8px]',
+  arrowDirectionRight: '-right-[8px]',
+  arrowDirectionRightEnd: '-right-[8px]',
+  arrowDirectionBottomStart: '-bottom-[8px]',
+  arrowDirectionBottom: '-bottom-[8px]',
+  arrowDirectionBottomEnd: '-bottom-[8px]',
+  arrowDirectionTopStart: '-top-[8px]',
+  arrowDirectionTop: '-top-[8px]',
+  arrowDirectionTopEnd: '-top-[8px]',
+  arrowTooltip: 's-bg-inverted border-[--w-s-color-background-inverted]',
+  arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',
+  arrowPopover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]',
+  arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',
+
+  content: 'last-child:mb-0',
+  notCallout: 'absolute z-50',
+  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,
+};
+
+export const pagination = {
+  link: 'hover:no-underline focus:no-underline focusable inline-flex justify-center items-center transition-colors ease-in-out min-h-[44px] min-w-[44px] p-4 rounded-full border-0 hover:bg-clip-padding',
+  currentPage: 'block md:hidden p-8 font-bold',
+  icon: 's-icon hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
+  containerNav: 'flex items-center justify-center p-8',
+  a11y: 'sr-only',
+  pages: 'hidden md:block s-text-link',
+  active: 's-bg-primary s-text-inverted',
+  notActive: 'hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
+};