@tcn/ui 0.3.0 → 0.3.2

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 => {

package/src/inputs/suggestions/suggestion_item.module.css

@@ -1,54 +1,36 @@
-.suggestion-item {
-  background-color: #fff;
-  outline: none;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  width: auto;
-  min-width: 100%;
-  text-align: start;
-  min-height: 30px;
-  border: 4px solid transparent;
-  z-index: 1;
-  cursor: pointer;
-  color: var(--font-color);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.suggestion-item[data-is-selected="true"] {
-  border-inline-start-color: #ccc;
-  background-color: #f1f1f1;
-}
-
-.suggestion-item[data-is-focused="true"] {
-  border-inline-start-color: var(--accent-color);
-  background-color: #f1f1f1;
-}
-
-.suggestion-item[data-disabled="true"] {
-  cursor: not-allowed;
-}
-
-.suggestion-item:hover {
-  background-color: #f5f5f5;
-}
-
-:global(.small-text) .suggestion-item {
-  min-height: 30px;
-}
-
-:global(.medium-small-text) .suggestion-item {
-  min-height: 32px;
-}
-
-:global(.medium-text) .suggestion-item {
-  min-height: 34px;
-}
-
-:global(.medium-lart-text) .suggestion-item {
-  min-height: 36px;
-}
-
-:global(.large-text) .suggestion-item {
-  min-height: 38px;
+@layer tcn-system {
+  :where(.suggestion-item) {
+    background-color: #fff;
+    outline: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    width: auto;
+    min-width: 100%;
+    text-align: start;
+    min-height: 30px;
+    border: 4px solid transparent;
+    z-index: 1;
+    cursor: pointer;
+    color: var(--font-color);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :where(.suggestion-item[data-is-selected="true"]) {
+    border-inline-start-color: #ccc;
+    background-color: #f1f1f1;
+  }
+
+  :where(.suggestion-item[data-is-focused="true"]) {
+    border-inline-start-color: var(--accent-color);
+    background-color: #f1f1f1;
+  }
+
+  :where(.suggestion-item[data-disabled="true"]) {
+    cursor: not-allowed;
+  }
+
+  :where(.suggestion-item:hover) {
+    background-color: #f5f5f5;
+  }
 }

package/src/inputs/suggestions/suggestion_item.tsx

@@ -41,7 +41,7 @@ export function SuggestionItem({
     <button
       tabIndex={-1}
       ref={buttonRef}
-      className={clsx(styles['suggestion-item'], 'suggestion-item')}
+      className={clsx(styles['suggestion-item'], 'tcn-suggestion-item')}
       data-is-selected={isSelected}
       data-is-focused={isFocused}
       data-disabled={isDisabled}

package/src/inputs/suggestions/suggestion_list.module.css

@@ -1,29 +1,31 @@
-.suggestion-list {
-  border-radius: 8px;
-  box-shadow: var(--drop-shadow-depth-3, 0 2px 10px 0 rgba(0, 0, 0, 0.25));
-  border: 1px solid var(--border-tertiary-color);
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: #fff;
-}
+@layer tcn-system {
+  :where(.suggestion-list) {
+    border-radius: 8px;
+    box-shadow: var(--drop-shadow-depth-3, 0 2px 10px 0 rgba(0, 0, 0, 0.25));
+    border: 1px solid var(--border-tertiary-color);
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #fff;
+  }
 
-.input {
-  position: sticky;
-  top: 0;
-  left: 0;
-  border-radius: 8px;
-  border: none;
-  margin: 0;
-  outline: none;
-  padding-inline-start: 8px;
-  height: calc(32px * var(--scalar, 1));
-  min-height: calc(32px * var(--scalar, 1));
-  z-index: 2;
-  border-bottom: 1px solid var(--border-tertiary-color, #e2e2e2);
-  border-bottom-left-radius: 0px;
-  border-bottom-right-radius: 0px;
-  background-color: #fff;
-  color: var(--font-color);
-  font-size: calc(14px * var(--scalar, 1));
-  width: 100%;
+  :where(.input) {
+    position: sticky;
+    top: 0;
+    left: 0;
+    border-radius: 8px;
+    border: none;
+    margin: 0;
+    outline: none;
+    padding-inline-start: 8px;
+    height: calc(32px * var(--scalar, 1));
+    min-height: calc(32px * var(--scalar, 1));
+    z-index: 2;
+    border-bottom: 1px solid var(--border-tertiary-color, #e2e2e2);
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    background-color: #fff;
+    color: var(--font-color);
+    font-size: calc(14px * var(--scalar, 1));
+    width: 100%;
+  }
 }

package/src/inputs/suggestions/suggestion_list.tsx

@@ -388,7 +388,7 @@ export function SuggestionList({
         minWidth={suggestionsWidth}
         width="auto"
         hAlign="start"
-        className={clsx(styles['suggestion-list'], 'suggestion-list')}
+        className={clsx(styles['suggestion-list'], 'tcn-suggestion-list')}
       >
         <input
           ref={internalInputRef}
@@ -397,7 +397,7 @@ export function SuggestionList({
           onKeyUp={handleKeyUp}
           onKeyDown={handleKeyDown}
           onChange={handleChange}
-          className={clsx(styles.input, 'suggestion-list-search-input')}
+          className={clsx(styles.input, 'tcn-suggestion-list-search-input')}
           {...props}
         />
         <VStack>
@@ -419,7 +419,10 @@ export function SuggestionList({
           )}
         </VStack>
         {matchedOptions.length === 0 && (
-          <ZStack padding="8px" className={styles['no-results']}>
+          <ZStack
+            padding="8px"
+            className={clsx(styles['no-results'], 'tcn-suggestion-list-no-results')}
+          >
             <BodyText>{noSuggestionMessage}</BodyText>
           </ZStack>
         )}