@tcn/ui 0.3.1 → 0.3.2

package/src/inputs/radio/radio.module.css

@@ -1,43 +1,44 @@
 /* Reset the appearance of the radio button */
-.radio {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  min-width: 16px;
-  min-height: 16px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  outline: none;
-  outline-offset: 0;
-  cursor: pointer;
-  margin: 0;
-  margin-inline-end: 6px;
-  background-color: white;
-  border: 1px solid var(--accent-color);
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-}
+@layer tcn-system {
+  :where(.radio) {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    min-width: 16px;
+    min-height: 16px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    outline: none;
+    outline-offset: 0;
+    cursor: pointer;
+    margin: 0;
+    margin-inline-end: 6px;
+    background-color: white;
+    border: 1px solid var(--accent-color);
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-.radio[data-is-disabled="true"] {
-  background-color: rgba(0, 0, 0, 0.05);
-  cursor: not-allowed;
-  opacity: 0.5;
-}
+  :where(.radio[data-is-disabled="true"]) {
+    background-color: rgba(0, 0, 0, 0.05);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 
-/* Style for when the radio button is checked */
-.radio:checked,
-.radio[data-checked="true"] {
-  border: 5px solid var(--accent-color);
-  background-color: white;
-}
+  /* Style for when the radio button is checked */
+  :where(.radio:checked),
+  :where(.radio[data-checked="true"]) {
+    border: 5px solid var(--accent-color);
+    background-color: white;
+  }
 
-.radio:focus {
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
+  :where(.radio:focus) {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
 
-/* Simulate the dot of a radio button when checked */
-/* .radio:checked::after,
+  /* Simulate the dot of a radio button when checked */
+  /* .radio:checked::after,
 .radio[data-checked="true"]::after {
   content: "";
   position: absolute;
@@ -52,36 +53,17 @@
   border: none;
 } */
 
-.radio + label {
-  font-size: 14px;
-  user-select: none;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.radio[data-is-disabled="true"] + label {
-  font-size: 14px;
-  user-select: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-
-:global(.small-text) .radio + label {
-  font-size: 12px;
-}
-
-:global(.medium-small-text) .radio + label {
-  font-size: 14px;
-}
-
-:global(.medium-text).radio + label {
-  font-size: 16px;
-}
-
-:global(.medium-large-text) .radio + label {
-  font-size: 18px;
-}
+  :where(.radio + label) {
+    font-size: 14px;
+    user-select: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-:global(.large-text) .radio + label {
-  font-size: 18px;
+  :where(.radio[data-is-disabled="true"] + label) {
+    font-size: 14px;
+    user-select: none;
+    cursor: pointer;
+    opacity: 0.5;
+  }
 }

package/src/inputs/radio/radio.tsx

@@ -39,7 +39,7 @@ export const Radio = React.forwardRef(function Radio(
     <HStack inline width="auto">
       <input
         ref={ref}
-        className={clsx(className, styles.radio, 'radio')}
+        className={clsx(className, styles.radio, 'tcn-radio')}
         type="radio"
         id={finalId}
         name={name}
@@ -56,7 +56,7 @@ export const Radio = React.forwardRef(function Radio(
       />
       {label && (
         <label
-          className="radio-label"
+          className="tcn-radio-label"
           style={{ pointerEvents: props.disabled ? 'none' : 'auto' }}
           htmlFor={finalId}
         >

package/src/inputs/select/select.module.css

@@ -1,66 +1,64 @@
-.select {
-  position: relative;
-  box-sizing: border-box;
-  padding-inline-end: calc(
-    24px *
-    var(--scalar, 1)
-  ); /* Add padding to prevent text overlap with chevron */
-}
-
-.select[data-hierarchy="secondary"] {
-  border: 1px solid #aaa;
-  color: var(--font-color);
-}
+@layer tcn-system {
+  .select {
+    position: relative;
+    box-sizing: border-box;
+    padding-inline-end: calc(
+      24px *
+      var(--scalar, 1)
+    ); /* Add padding to prevent text overlap with chevron */
+  }
 
-.select:focus {
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
+  .select {
+    border: 1px solid #aaa;
+    color: currentColor;
+  }
 
-.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 */
-}
+  .select:focus {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
 
-.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 */
-}
+  .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: currentColor;
+    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 */
+  }
 
-.select:hover::after {
-  background-color: var(--accent-color);
-}
+  .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: currentColor;
+    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 */
+  }
 
-.select[data-hierarchy="secondary"]:hover {
-  color: var(--accent-color);
-  border-color: var(--accent-color);
-  background-color: transparent;
-}
+  .select:hover {
+    color: var(--accent-color);
+    border-color: var(--accent-color);
+    background-color: transparent;
+  }
 
-.selectedLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: start;
+  .selectedLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: start;
+  }
 }

package/src/inputs/select/select.tsx

@@ -130,7 +130,7 @@ export const Select = React.forwardRef(function Select(
     <>
       <Button
         ref={forkedRef}
-        className={clsx(className, 'select', styles.select)}
+        className={clsx(className, 'tcn-select', styles.select)}
         width="100%"
         {...props}
         hAlign="start"
@@ -140,7 +140,9 @@ export const Select = React.forwardRef(function Select(
         onMouseDown={handlMouseDown}
         onMouseUp={handleMouseUp}
       >
-        <span className={styles.selectedLabel}>{selectedLabel}</span>
+        <span className={clsx(styles.selectedLabel, 'tcn-select-selected-label')}>
+          {selectedLabel}
+        </span>
       </Button>
       {isSuggestionsOpen && (
         <SuggestionList

package/src/inputs/slider/slider.module.css

@@ -1,150 +1,152 @@
-:root {
-  --disabled: #d3d3d3;
+@layer tcn-system {
+  :root {
+    --disabled: #d3d3d3;
+  }
+
+  /*Range Reset*/
+  :where(.slider) {
+    width: 100%;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    height: calc(26px * var(--scalar, 1));
+  }
+
+  :where(.slider:focus) {
+    outline: none;
+  }
+
+  /***** Chrome, Safari, Opera and Edge Chromium styles **********************************************/
+
+  /*** slider track **************************************************************/
+  .slider::-webkit-slider-runnable-track {
+    border-radius: 4px;
+    height: calc(1px * var(--scalar, 1));
+  }
+
+  .slider:dir(ltr)::-webkit-slider-runnable-track {
+    background: linear-gradient(
+      to right,
+      var(--accent-color) 0%,
+      var(--accent-color) var(--progress),
+      var(--surface-line, #aaa) var(--progress),
+      var(--surface-line, #aaa) 100%
+    );
+  }
+
+  .slider:dir(rtl)::-webkit-slider-runnable-track {
+    background: linear-gradient(
+      to left,
+      var(--accent-color) 0%,
+      var(--accent-color) var(--progress),
+      var(--surface-line, #aaa) var(--progress),
+      var(--surface-line, #aaa) 100%
+    );
+  }
+
+  .slider:dir(rtl)[data-is-disabled="true"]::-webkit-slider-runnable-track,
+  .slider:dir(ltr)[data-is-disabled="true"]::-webkit-slider-runnable-track {
+    background: var(--disabled);
+    cursor: not-allowed;
+  }
+
+  /*** slider thumb ***********************************************************/
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    /* Override default look */
+    appearance: none;
+    cursor: ew-resize;
+    position: relative;
+    top: calc(-6px * var(--scalar, 1));
+    width: calc(14px * var(--scalar, 1));
+    height: calc(14px * var(--scalar, 1));
+    border-radius: 2px;
+    background-color: var(--surface, #fff);
+    border: 1px solid var(--accent-color);
+    box-sizing: border-box;
+  }
+
+  .slider[data-is-disabled="true"]::-webkit-slider-thumb {
+    border-color: rgba(227, 227, 227, 1);
+    cursor: not-allowed;
+  }
+
+  .slider:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0px 0px 4px var(--accent-color);
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+    outline-offset: 1px;
+  }
+
+  .slider[data-is-disabled="false"]:active::-webkit-slider-thumb {
+    background: color-mix(in srgb, var(--accent-color) 10%, white);
+  }
+
+  /***** Firefox styles ************************************************************************/
+
+  /*** slider track **************************************************************/
+  .slider::-moz-range-track {
+    border-radius: 4px;
+    height: calc(1px * var(--scalar, 1));
+  }
+
+  .slider:dir(ltr)::-moz-range-track {
+    background: linear-gradient(
+      to right,
+      var(--accent-color) 0%,
+      var(--accent-color) var(--progress),
+      var(--surface-line, #aaa) var(--progress),
+      var(--surface-line, #aaa) 100%
+    );
+  }
+
+  .slider:dir(rtl)::-moz-range-track {
+    background: linear-gradient(
+      to left,
+      var(--accent-color) 0%,
+      var(--accent-color) var(--progress),
+      var(--surface-line, #aaa) var(--progress),
+      var(--surface-line, #aaa) 100%
+    );
+  }
+
+  .slider[data-is-disabled="true"]::-moz-range-track {
+    background: var(--disabled);
+    cursor: not-allowed;
+  }
+
+  /*** slider thumb ***********************************************************/
+  .slider::-moz-range-thumb {
+    cursor: ew-resize;
+    border: none;
+    /*Removes extra border that FF applies*/
+    border-radius: 0;
+    /*Removes default border-radius that FF applies*/
+
+    /*custom styles*/
+    top: calc(-6px * var(--scalar, 1));
+    width: calc(14px * var(--scalar, 1));
+    height: calc(14px * var(--scalar, 1));
+    border-radius: 2px;
+    background-color: var(--surface, #fff);
+    border: 1px solid var(--accent-color);
+    box-sizing: border-box;
+  }
+
+  .slider[data-is-disabled="true"]::-moz-range-thumb {
+    border-color: rgba(227, 227, 227, 1);
+    cursor: not-allowed;
+  }
+
+  .slider:focus::-moz-range-thumb {
+    box-shadow: 0px 0px 4px var(--accent-color);
+    outline: 1px dashed var(--accent-color);
+    outline-offset: 1px;
+  }
+
+  .slider[data-is-disabled="false"]:active::-moz-range-thumb {
+    background: color-mix(in srgb, var(--accent-color) 10%, white);
+  }
+
+  /****************************************************************************/
 }
-
-/*Range Reset*/
-.slider {
-  width: 100%;
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-  cursor: pointer;
-  height: calc(26px * var(--scalar, 1));
-}
-
-.slider:focus {
-  outline: none;
-}
-
-/***** Chrome, Safari, Opera and Edge Chromium styles **********************************************/
-
-/*** slider track **************************************************************/
-.slider::-webkit-slider-runnable-track {
-  border-radius: 4px;
-  height: calc(1px * var(--scalar, 1));
-}
-
-.slider:dir(ltr)::-webkit-slider-runnable-track {
-  background: linear-gradient(
-    to right,
-    var(--accent-color) 0%,
-    var(--accent-color) var(--progress),
-    var(--surface-line, #aaa) var(--progress),
-    var(--surface-line, #aaa) 100%
-  );
-}
-
-.slider:dir(rtl)::-webkit-slider-runnable-track {
-  background: linear-gradient(
-    to left,
-    var(--accent-color) 0%,
-    var(--accent-color) var(--progress),
-    var(--surface-line, #aaa) var(--progress),
-    var(--surface-line, #aaa) 100%
-  );
-}
-
-.slider:dir(rtl)[data-is-disabled="true"]::-webkit-slider-runnable-track,
-.slider:dir(ltr)[data-is-disabled="true"]::-webkit-slider-runnable-track {
-  background: var(--disabled);
-  cursor: not-allowed;
-}
-
-/*** slider thumb ***********************************************************/
-.slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  /* Override default look */
-  appearance: none;
-  cursor: ew-resize;
-  position: relative;
-  top: calc(-6px * var(--scalar, 1));
-  width: calc(14px * var(--scalar, 1));
-  height: calc(14px * var(--scalar, 1));
-  border-radius: 2px;
-  background-color: var(--surface, #fff);
-  border: 1px solid var(--accent-color);
-  box-sizing: border-box;
-}
-
-.slider[data-is-disabled="true"]::-webkit-slider-thumb {
-  border-color: rgba(227, 227, 227, 1);
-  cursor: not-allowed;
-}
-
-.slider:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0px 0px 4px var(--accent-color);
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-  outline-offset: 1px;
-}
-
-.slider[data-is-disabled="false"]:active::-webkit-slider-thumb {
-  background: color-mix(in srgb, var(--accent-color) 10%, white);
-}
-
-/***** Firefox styles ************************************************************************/
-
-/*** slider track **************************************************************/
-.slider::-moz-range-track {
-  border-radius: 4px;
-  height: calc(1px * var(--scalar, 1));
-}
-
-.slider:dir(ltr)::-moz-range-track {
-  background: linear-gradient(
-    to right,
-    var(--accent-color) 0%,
-    var(--accent-color) var(--progress),
-    var(--surface-line, #aaa) var(--progress),
-    var(--surface-line, #aaa) 100%
-  );
-}
-
-.slider:dir(rtl)::-moz-range-track {
-  background: linear-gradient(
-    to left,
-    var(--accent-color) 0%,
-    var(--accent-color) var(--progress),
-    var(--surface-line, #aaa) var(--progress),
-    var(--surface-line, #aaa) 100%
-  );
-}
-
-.slider[data-is-disabled="true"]::-moz-range-track {
-  background: var(--disabled);
-  cursor: not-allowed;
-}
-
-/*** slider thumb ***********************************************************/
-.slider::-moz-range-thumb {
-  cursor: ew-resize;
-  border: none;
-  /*Removes extra border that FF applies*/
-  border-radius: 0;
-  /*Removes default border-radius that FF applies*/
-
-  /*custom styles*/
-  top: calc(-6px * var(--scalar, 1));
-  width: calc(14px * var(--scalar, 1));
-  height: calc(14px * var(--scalar, 1));
-  border-radius: 2px;
-  background-color: var(--surface, #fff);
-  border: 1px solid var(--accent-color);
-  box-sizing: border-box;
-}
-
-.slider[data-is-disabled="true"]::-moz-range-thumb {
-  border-color: rgba(227, 227, 227, 1);
-  cursor: not-allowed;
-}
-
-.slider:focus::-moz-range-thumb {
-  box-shadow: 0px 0px 4px var(--accent-color);
-  outline: 1px dashed var(--accent-color);
-  outline-offset: 1px;
-}
-
-.slider[data-is-disabled="false"]:active::-moz-range-thumb {
-  background: color-mix(in srgb, var(--accent-color) 10%, white);
-}
-
-/****************************************************************************/

package/src/inputs/slider/slider.tsx

@@ -41,7 +41,7 @@ export const Slider = React.forwardRef(function Slider(
   return (
     <input
       type="range"
-      className={clsx(className, styles.slider, 'slider')}
+      className={clsx(className, styles.slider, 'tcn-slider')}
       data-is-disabled={props.disabled || false}
       ref={forkedRef}
       onChange={e => {