@tcn/ui 0.3.1 → 0.3.3

package/src/feedback/progress/progress_bar.module.css

@@ -1,59 +1,61 @@
-:root {
-  --progress-bar-color: var(--accent-color); /* Default color for progress bar */
-  --progress-bar-background: #dadada;
-}
-
-.progress-bar-container {
-  width: 100%;
-}
+@system {
+  :root {
+    --progress-bar-color: var(--accent-color); /* Default color for progress bar */
+    --progress-bar-background: #dadada;
+  }
 
-.progress-bar-background {
-  width: 100%;
-  height: 100%;
-  background-color: var(--progress-bar-background);
-}
+  :where(.progress-bar-container) {
+    width: 100%;
+  }
 
-.progress-bar {
-  width: 100%;
-  height: 100%;
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-  user-select: none;
-  /* box-shadow: 0 1px 0 0 rgba(222, 222, 222, 0.7), inset 0 1px 0 0 rgba(0, 0, 0, 0.3); */
-  overflow: hidden;
-}
+  :where(.progress-bar-background) {
+    width: 100%;
+    height: 100%;
+    background-color: var(--progress-bar-background);
+  }
 
-.progress-bar-fill {
-  height: 100%;
-  overflow: hidden;
-  width: var(--progress-percentage, 50%);
-  background-color: var(--progress-bar-color);
-  transition: width 200ms ease-out;
-}
+  :where(.progress-bar) {
+    width: 100%;
+    height: 100%;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    user-select: none;
+    /* box-shadow: 0 1px 0 0 rgba(222, 222, 222, 0.7), inset 0 1px 0 0 rgba(0, 0, 0, 0.3); */
+    overflow: hidden;
+  }
 
-.progress-bar-fill::before {
-  content: "";
-  position: absolute;
-  top: 0px;
-  left: -20px;
-  height: 100%;
-  width: calc(100% + 40px);
-  background-size: 20px 20px;
-  animation: moveStripes 500ms linear infinite;
-}
+  :where(.progress-bar-fill) {
+    height: 100%;
+    overflow: hidden;
+    width: var(--progress-percentage, 50%);
+    background-color: var(--progress-bar-color);
+    transition: width 200ms ease-out;
+  }
 
-.progress-bar-fill[data-finished="true"]::before {
-  animation: none;
-  background-image: none;
-}
+  :where(.progress-bar-fill::before) {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: -20px;
+    height: 100%;
+    width: calc(100% + 40px);
+    background-size: 20px 20px;
+    animation: moveStripes 500ms linear infinite;
+  }
 
-/* Animation for moving stripes */
-@keyframes moveStripes {
-  0% {
-    transform: translateX(0);
+  :where(.progress-bar-fill[data-finished="true"]::before) {
+    animation: none;
+    background-image: none;
   }
-  100% {
-    transform: translateX(20px);
+
+  /* Animation for moving stripes */
+  @keyframes moveStripes {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(20px);
+    }
   }
 }

package/src/feedback/progress/progress_bar.tsx

@@ -4,6 +4,7 @@ import { HStack } from '../../stacks/h_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { ZStack } from '../../stacks/z_stack.js';
+import clsx from 'clsx';
 
 import styles from './progress_bar.module.css';
 
@@ -20,7 +21,11 @@ export const ProgressBar = React.forwardRef(function ProgressBar(
   const styleVariables: any = { '--progress-percentage': progressPercent };
 
   return (
-    <VStack ref={ref} className={styles['progress-bar-container']} {...props}>
+    <VStack
+      ref={ref}
+      className={clsx(styles['progress-bar-container'], 'tcn-progress-bar')}
+      {...props}
+    >
       <HStack height="auto" vAlign="end">
         <BodyText>{message}</BodyText>
         <Spacer />

package/src/form/field/common/field_control/field_control.module.css

@@ -1,20 +1,22 @@
-.field-error {
-  color: var(--status-error);
-}
+@layer tcn-system {
+  :where(.field-error) {
+    color: var(--status-error);
+  }
 
-.field-control[data-locked="true"] {
-  color: var(--status-disabled);
-}
+  :where(.field-control[data-locked="true"]) {
+    color: var(--status-disabled);
+  }
 
-.field-control[data-loading="true"] {
-  color: var(--async-pending);
-}
+  :where(.field-control[data-loading="true"]) {
+    color: var(--async-pending);
+  }
 
-.field-control[data-error="true"] {
-  color: var(--status-error);
-}
+  :where(.field-control[data-error="true"]) {
+    color: var(--status-error);
+  }
 
-.field-control[data-disabled="true"] {
-  opacity: 0.4;
-  pointer-events: none;
+  :where(.field-control[data-disabled="true"]) {
+    opacity: 0.4;
+    pointer-events: none;
+  }
 }

package/src/form/field/common/field_control/field_control.tsx

@@ -38,7 +38,7 @@ export const FieldControl = React.forwardRef(function FieldControl(
       data-locked={locked}
       data-loading={loading}
       data-error={hasError}
-      className={clsx(styles['field-control'], 'field-control', className)}
+      className={clsx(styles['field-control'], 'tcn-field-control', className)}
       height="auto"
       width="flex"
       hAlign="end"

package/src/form/field/common/field_description.tsx

@@ -15,7 +15,7 @@ export const FieldDescription = ({ children, id }: FieldDescriptionOwnProps) =>
         hierarchy="secondary"
         emphasis="normal"
         size="sm"
-        className="field-row-description-text"
+        className="tcn-field-row-description-text"
         id={id}
       >
         {children}

package/src/form/field/common/field_error.tsx

@@ -17,7 +17,7 @@ export const FieldErrorMessage = ({ children }: FieldErrorMessageOwnProps) => {
       <BodyText
         breakWords
         size="sm"
-        className="field-error-message"
+        className="tcn-field-error-message"
         color={theme.statusColors.error}
       >
         {children}

package/src/form/field/common/field_header.tsx

@@ -27,7 +27,7 @@ export const FieldHeader = React.forwardRef(function FieldHeader(
       as="div"
       hAlign="start"
       gap="4px"
-      className={clsx('field-header', className)}
+      className={clsx('tcn-field-header', className)}
       ref={ref}
       {...props}
     >

package/src/form/field/common/status_input/status_input.module.css

@@ -1,10 +1,12 @@
-.field-error {
-  color: var(--status-color-error);
-}
+@layer tcn-system {
+  :where(.field-error) {
+    color: var(--status-color-error);
+  }
 
-.field-status-input > *[data-width="100%"]:first-child {
-  width: 100%;
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 0%;
+  :where(.field-status-input > *[data-width="100%"]:first-child) {
+    width: 100%;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 0%;
+  }
 }

package/src/form/field/common/status_input/status_input.tsx

@@ -16,16 +16,19 @@ import styles from './status_input.module.css';
  library doesn't dictate the icon set used. 
 */
 const LockedAdornment: React.FC = () => {
-  return <LockTwoIcon className="field-lock" size="lg" />;
+  return <LockTwoIcon className="tcn-field-lock" size="lg" />;
 };
 
 const LoadingAdornment: React.FC = () => {
-  return <Loading size="20px" className="field-loader" />;
+  return <Loading size="20px" className="tcn-field-loader" />;
 };
 
 const ErroredAdornment: React.FC = () => {
   return (
-    <AlertTriangleIcon className={clsx(styles['field-error'], 'field-error')} size="lg" />
+    <AlertTriangleIcon
+      className={clsx(styles['field-error'], 'tcn-field-error')}
+      size="lg"
+    />
   );
 };
 
@@ -64,10 +67,10 @@ export const FieldStatusInput = React.forwardRef(function StatusInput(
       ref={ref}
       data-state={state}
       className={clsx(
-        'field-status-input',
+        'tcn-field-status-input',
         styles['field-status-input'],
         className,
-        'field-status-input'
+        'tcn-field-status-input'
       )}
       vAlign="center"
       hAlign="end"

package/src/form/field/h_field/h_field.module.css

@@ -1,6 +1,8 @@
-.h-field > *:last-child {
-  width: 100%;
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 0%;
+@layer tcn-system {
+  :where(.h-field > *:last-child) {
+    width: 100%;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 0%;
+  }
 }

package/src/form/field/h_field/h_field.tsx

@@ -47,7 +47,7 @@ export const HField = React.forwardRef(function HField(
       data-locked={locked}
       data-error={hasError}
       data-loading={loading}
-      className={clsx('base-field', styles['h-field'], 'h-field', className)}
+      className={clsx('tcn-base-field', styles['h-field'], 'tcn-h-field', className)}
       vAlign="start"
       hAlign="start"
       height="auto"

package/src/form/field/v_field/v_field.tsx

@@ -46,7 +46,7 @@ export const VField = React.forwardRef(function VField(
       data-locked={locked}
       data-error={hasError}
       data-loading={loading}
-      className={clsx('base-field', styles['v-field'], 'v-field', className)}
+      className={clsx('tcn-base-field', styles['v-field'], 'tcn-v-field', className)}
       vAlign="start"
       hAlign="start"
       height="auto"

package/src/form/field_set/field_set.module.css

@@ -1,17 +1,19 @@
-.field-set {
-  position: relative;
-  border-radius: 4px;
-}
+@layer tcn-system {
+  :where(.field-set) {
+    position: relative;
+    border-radius: 4px;
+  }
 
-.field-set {
-  gap: 4px;
-}
+  :where(.field-set) {
+    gap: 4px;
+  }
 
-.field-set > .field-set-body {
-  background: #ffffff; /* tcn neutral white */
-  width: 100%;
-  max-width: 100%;
-  border-radius: 4px;
-  gap: 8px;
-  padding: 8px;
+  :where(.field-set > .field-set-body) {
+    background: #ffffff; /* tcn neutral white */
+    width: 100%;
+    max-width: 100%;
+    border-radius: 4px;
+    gap: 8px;
+    padding: 8px;
+  }
 }

package/src/form/field_set/field_set.tsx

@@ -37,24 +37,27 @@ export const FieldSet = React.forwardRef(function FieldSet(
       as="fieldset"
       aria-labelledby={labelId}
       ref={ref}
-      className={clsx(styles['field-set'], className, 'field-set')}
+      className={clsx(styles['field-set'], className, 'tcn-field-set')}
       {...props}
     >
       {legend && (
         <HStack
           id={labelId}
-          className={clsx('legend', 'field-set-legend')}
+          className={clsx('tcn-legend', 'tcn-field-set-legend')}
           hAlign="start"
           height={props.height}
         >
           {startAdornments}
           {startAdornments && <Spacer width="8px" />}
-          <Title className="field-set-legend-text">{legend}</Title>
+          <Title className="tcn-field-set-legend-text">{legend}</Title>
           {endAdornments && <Spacer />}
           {endAdornments}
         </HStack>
       )}
-      <VStack className={clsx('field-set-body', styles['field-set-body'])} {...props}>
+      <VStack
+        className={clsx('tcn-field-set-body', styles['tcn-field-set-body'])}
+        {...props}
+      >
         {children}
       </VStack>
     </VStack>

package/src/inputs/checkbox/checkbox.module.css

@@ -1,51 +1,53 @@
-.checkbox {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -webkit-tap-highlight-color: transparent;
-  appearance: none;
-  cursor: pointer;
-  width: calc(var(--scalar, 1) * 15px);
-  height: calc(var(--scalar, 1) * 15px);
-  border-radius: 4px;
-  outline: none;
-  outline-offset: 0;
-  border: 1px solid var(--accent-color);
-  margin: 0;
-  background-color: #fff;
-  box-sizing: border-box;
-  background-size: calc(12px * var(--scalar, 1)) calc(12px * var(--scalar, 1));
-  background-position: center;
-  background-repeat: no-repeat;
-}
+@layer tcn-system {
+  :where(.checkbox) {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    appearance: none;
+    cursor: pointer;
+    width: calc(var(--scalar, 1) * 15px);
+    height: calc(var(--scalar, 1) * 15px);
+    border-radius: 4px;
+    outline: none;
+    outline-offset: 0;
+    border: 1px solid var(--accent-color);
+    margin: 0;
+    background-color: #fff;
+    box-sizing: border-box;
+    background-size: calc(12px * var(--scalar, 1)) calc(12px * var(--scalar, 1));
+    background-position: center;
+    background-repeat: no-repeat;
+  }
 
-.checkbox[data-is-disabled="false"]:active {
-  background-color: var(--accent-color);
-}
+  :where(.checkbox[data-is-disabled="false"]:active) {
+    background-color: var(--accent-color);
+  }
 
-.checkbox[data-is-disabled="true"] {
-  background-color: rgba(0, 0, 0, 0.05);
-  cursor: not-allowed;
-  opacity: 0.5;
-}
+  :where(.checkbox[data-is-disabled="true"]) {
+    background-color: rgba(0, 0, 0, 0.05);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 
-.checkbox:focus {
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
+  :where(.checkbox:focus) {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
 
-.checkbox[data-checked="true"] {
-  background-color: var(--accent-color);
-  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
-}
+  :where(.checkbox[data-checked="true"]) {
+    background-color: var(--accent-color);
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
+  }
 
-.checkbox[data-is-disabled="false"]:active {
-  background-color: var(--accent-color);
-  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
-}
+  :where(.checkbox[data-is-disabled="false"]:active) {
+    background-color: var(--accent-color);
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
+  }
 
-.checkbox[data-is-disabled="true"] {
-  background-color: rgba(0, 0, 0, 0.3);
-}
+  :where(.checkbox[data-is-disabled="true"]) {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
 
-.checkbox[data-checked="true"][data-is-disabled="true"] {
-  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='rgba(255,255,255,0.3)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='rgba(255,255,255,0.3)' stroke-width='2'/%3E%3C/svg%3E");
+  :where(.checkbox[data-checked="true"][data-is-disabled="true"]) {
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='rgba(255,255,255,0.3)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='rgba(255,255,255,0.3)' stroke-width='2'/%3E%3C/svg%3E");
+  }
 }

package/src/inputs/checkbox/checkbox.tsx

@@ -36,7 +36,7 @@ export const Checkbox = React.forwardRef(function Checkbox(
         onChange && onChange(Boolean(e.currentTarget.checked), e);
       }}
       {...props}
-      className={clsx(className, styles.checkbox, 'checkbox')}
+      className={clsx(className, styles.checkbox, 'tcn-checkbox')}
       style={{ width, height, ...style }}
     />
   );

package/src/inputs/checkbox/checkbox_row.tsx

@@ -3,13 +3,14 @@ import { useSignalValue } from '@tcn/state';
 import { Checkbox, CheckboxProps } from './checkbox.js';
 import { FieldPresenter } from '../../form/field_presenters/field_presenter.js';
 import { HField } from '../../form/field/h_field/h_field.js';
+import clsx from 'clsx';
 
 export interface CheckboxRowProps extends Omit<CheckboxProps, 'onChange' | 'checked'> {
   presenter?: FieldPresenter<boolean>;
   id: string;
 }
 
-export function CheckboxRow({ presenter, id, ...props }: CheckboxRowProps) {
+export function CheckboxRow({ presenter, id, className, ...props }: CheckboxRowProps) {
   const [finalPresenter] = useState(() => {
     if (presenter == null) {
       return new FieldPresenter<boolean>('Label', false);
@@ -22,7 +23,13 @@ export function CheckboxRow({ presenter, id, ...props }: CheckboxRowProps) {
   );
 
   return (
-    <HField id={id} label={label} description={description} errorMessage={error}>
+    <HField
+      id={id}
+      label={label}
+      className={clsx('tcn-checkbox-row', className)}
+      description={description}
+      errorMessage={error}
+    >
       <Checkbox {...props} checked={value} onChange={finalPresenter.setValue} />
     </HField>
   );

package/src/inputs/color_input/color_input.module.css

@@ -1,62 +1,64 @@
-.checker-board {
-  background-color: white;
-  background-image:
-    linear-gradient(45deg, #ccc 25%, transparent 25%),
-    linear-gradient(-45deg, #ccc 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #ccc 75%),
-    linear-gradient(-45deg, transparent 75%, #ccc 75%);
-  background-size: 10px 10px; /* Adjusting the size to 5px squares */
-  background-position:
-    0 0,
-    0 5px,
-    5px -5px,
-    -5px 0px;
-}
+@layer tcn-system {
+  :where(.checker-board) {
+    background-color: white;
+    background-image:
+      linear-gradient(45deg, #ccc 25%, transparent 25%),
+      linear-gradient(-45deg, #ccc 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #ccc 75%),
+      linear-gradient(-45deg, transparent 75%, #ccc 75%);
+    background-size: 10px 10px; /* Adjusting the size to 5px squares */
+    background-position:
+      0 0,
+      0 5px,
+      5px -5px,
+      -5px 0px;
+  }
 
-.color-input-select:dir(ltr)::after {
-  content: "";
-  position: absolute;
-  right: calc(4px * var(--scalar, 1));
-  top: 50%;
-  transform: translateY(-50%);
-  width: calc(18px * var(--scalar, 1));
-  height: calc(18px * var(--scalar, 1));
-  background-color: #808080;
-  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
-}
+  :where(.color-input-select:dir(ltr)::after) {
+    content: "";
+    position: absolute;
+    right: calc(4px * var(--scalar, 1));
+    top: 50%;
+    transform: translateY(-50%);
+    width: calc(18px * var(--scalar, 1));
+    height: calc(18px * var(--scalar, 1));
+    background-color: #808080;
+    mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+  }
 
-.color-input-select:dir(rtl)::after {
-  content: "";
-  position: absolute;
-  left: calc(4px * var(--scalar, 1));
-  top: 50%;
-  transform: translateY(-50%);
-  width: calc(18px * var(--scalar, 1));
-  height: calc(18px * var(--scalar, 1));
-  background-color: #808080;
-  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
-}
+  :where(.color-input-select:dir(rtl)::after) {
+    content: "";
+    position: absolute;
+    left: calc(4px * var(--scalar, 1));
+    top: 50%;
+    transform: translateY(-50%);
+    width: calc(18px * var(--scalar, 1));
+    height: calc(18px * var(--scalar, 1));
+    background-color: #808080;
+    mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+  }
 
-.color-input-select[data-hierarchy="secondary"] {
-  height: calc(16px * var(--scalar, 1));
-  border: 1px solid #aaa;
-  color: var(--font-color);
-}
+  :where(.color-input-select[data-hierarchy="secondary"]) {
+    height: calc(16px * var(--scalar, 1));
+    border: 1px solid #aaa;
+    color: var(--font-color);
+  }
 
-.color-input-select:hover::after {
-  background-color: var(--accent-color);
-}
+  :where(.color-input-select:hover::after) {
+    background-color: var(--accent-color);
+  }
 
-.color-input-select[data-hierarchy="secondary"]:hover {
-  color: var(--accent-color);
-  border-color: var(--accent-color);
-  background-color: transparent;
+  :where(.color-input-select[data-hierarchy="secondary"]:hover) {
+    color: var(--accent-color);
+    border-color: var(--accent-color);
+    background-color: transparent;
+  }
 }