@tcn/ui 0.3.1 → 0.3.3

package/src/inputs/switch/switch.module.css

@@ -1,110 +1,112 @@
-/*** wrapper ************************************************************/
-.switch-wrapper {
-  position: relative;
-  display: inline-block;
-  width: calc(36px * var(--scalar, 1));
-  height: calc(18px * var(--scalar, 1));
-  border-radius: 13px;
-  cursor: pointer;
-  box-sizing: border-box;
-  background-color: #aaa;
-  border: 1px solid #aaa;
-  transition:
-    background-color 200ms ease-out,
-    border-color 200ms ease-out;
-}
-
-.switch-wrapper[data-focused="true"][data-is-checked="false"],
-.switch-wrapper[data-focused="true"][data-is-checked="true"] {
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
-
-/* wrapper end*/
-
-.switch {
-  -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  appearance: none !important;
-  outline: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
-  margin: 0;
-  -webkit-tap-highlight-color: transparent;
-}
-
-/*** track ***************************************************************/
-
-.switch-wrapper[data-is-disabled="true"] {
-  cursor: not-allowed;
-}
-
-.switch-wrapper[data-is-disabled="true"] {
-  background-color: #d3d3d3;
-  border-color: #d3d3d3;
-}
-
-.switch-wrapper[data-is-checked="true"][data-is-disabled="false"] {
-  background-color: var(--accent-color);
-  border-color: var(--accent-color);
-}
-
-/*** switch ***************************************************************/
-.switch::after {
-  content: "";
-  position: absolute;
-  top: 0px;
-  transition: transform 200ms ease-out;
-  width: calc(16px * var(--scalar, 1));
-  height: calc(16px * var(--scalar, 1));
-  border-radius: 12px;
-  background-color: var(--surface, #fff);
-  box-sizing: border-box;
-}
-
-.switch-wrapper[data-is-disabled="true"] > .switch::after,
-.switch-wrapper[data-is-disabled="true"] > .switch,
-.switch-wrapper[data-is-disabled="true"] {
-  cursor: not-allowed;
-}
-
-.switch-wrapper[data-is-disabled="false"] > .switch::after,
-.switch-wrapper[data-is-disabled="false"] > .switch,
-.switch-wrapper[data-is-disabled="false"] {
-  cursor: pointer;
-}
-
-.switch:dir(ltr)::after {
-  transform: translate(0%, 0px);
-  left: 0;
-}
-
-.switch:dir(rtl)::after {
-  transform: translate(0%, 0px);
-  right: 0;
-}
-
-.switch-wrapper[data-is-checked="true"] .switch:dir(ltr)::after {
-  transform: translate(112%, 0px);
-}
-
-.switch-wrapper[data-is-checked="true"] .switch:dir(rtl)::after {
-  transform: translate(-112%, 0px);
-}
-
-/*** icon ********************************************************************/
-.switch-icon {
-  position: absolute;
-  display: inline-block;
-  color: #fff;
-  top: 50%;
-  left: calc(3px * var(--scalar, 1) - 1px);
-  height: calc(16px * var(--scalar, 1) - 2px);
-  width: calc(16px * var(--scalar, 1) - 2px);
-  pointer-events: none;
-  translate: 0 -50%;
-}
-
-.switch-icon[data-is-checked="false"]:dir(ltr),
-.switch-icon[data-is-checked="true"]:dir(rtl) {
-  translate: calc(16px * var(--scalar, 1)) -50%;
+@layer tcn-system {
+  /*** wrapper ************************************************************/
+  :where(.switch-wrapper) {
+    position: relative;
+    display: inline-block;
+    width: calc(36px * var(--scalar, 1));
+    height: calc(18px * var(--scalar, 1));
+    border-radius: 13px;
+    cursor: pointer;
+    box-sizing: border-box;
+    background-color: #aaa;
+    border: 1px solid #aaa;
+    transition:
+      background-color 200ms ease-out,
+      border-color 200ms ease-out;
+  }
+
+  :where(.switch-wrapper[data-focused="true"][data-is-checked="false"]),
+  :where(.switch-wrapper[data-focused="true"][data-is-checked="true"]) {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
+
+  /* wrapper end*/
+
+  :where(.switch) {
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    appearance: none !important;
+    outline: 0 !important;
+    height: 100% !important;
+    width: 100% !important;
+    margin: 0;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /*** track ***************************************************************/
+
+  :where(.switch-wrapper[data-is-disabled="true"]) {
+    cursor: not-allowed;
+  }
+
+  :where(.switch-wrapper[data-is-disabled="true"]) {
+    background-color: #d3d3d3;
+    border-color: #d3d3d3;
+  }
+
+  :where(.switch-wrapper[data-is-checked="true"][data-is-disabled="false"]) {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+  }
+
+  /*** switch ***************************************************************/
+  :where(.switch)::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    transition: transform 200ms ease-out;
+    width: calc(16px * var(--scalar, 1));
+    height: calc(16px * var(--scalar, 1));
+    border-radius: 12px;
+    background-color: var(--surface, #fff);
+    box-sizing: border-box;
+  }
+
+  :where(.switch-wrapper[data-is-disabled="true"] > .switch)::after,
+  :where(.switch-wrapper[data-is-disabled="true"] > .switch),
+  :where(.switch-wrapper[data-is-disabled="true"]) {
+    cursor: not-allowed;
+  }
+
+  :where(.switch-wrapper[data-is-disabled="false"] > .switch)::after,
+  :where(.switch-wrapper[data-is-disabled="false"] > .switch),
+  :where(.switch-wrapper[data-is-disabled="false"]) {
+    cursor: pointer;
+  }
+
+  :where(.switch:dir(ltr))::after {
+    transform: translate(0%, 0px);
+    left: 0;
+  }
+
+  :where(.switch:dir(rtl))::after {
+    transform: translate(0%, 0px);
+    right: 0;
+  }
+
+  :where(.switch-wrapper[data-is-checked="true"] > .switch:dir(ltr))::after {
+    transform: translate(112%, 0px);
+  }
+
+  :where(.switch-wrapper[data-is-checked="true"] > .switch:dir(rtl))::after {
+    transform: translate(-112%, 0px);
+  }
+
+  /*** icon ********************************************************************/
+  :where(.switch-icon) {
+    position: absolute;
+    display: inline-block;
+    color: #fff;
+    top: 50%;
+    left: calc(3px * var(--scalar, 1) - 1px);
+    height: calc(16px * var(--scalar, 1) - 2px);
+    width: calc(16px * var(--scalar, 1) - 2px);
+    pointer-events: none;
+    translate: 0 -50%;
+  }
+
+  :where(.switch-icon[data-is-checked="false"]):dir(ltr),
+  :where(.switch-icon[data-is-checked="true"]):dir(rtl) {
+    translate: calc(16px * var(--scalar, 1)) -50%;
+  }
 }

package/src/inputs/switch/switch.tsx

@@ -55,18 +55,18 @@ export const Switch = React.forwardRef(function Switch(
       data-is-checked={Boolean(checked)}
       data-is-disabled={props.disabled || false}
       data-width="fixed"
-      className={clsx(styles['switch-wrapper'], className, 'switch-wrapper')}
+      className={clsx(styles['switch-wrapper'], className, 'tcn-switch-wrapper')}
     >
       {!omitIcons && (
         <Icon
-          className={clsx(styles['switch-icon'], 'switch-icon')}
+          className={clsx(styles['switch-icon'], 'tcn-switch-icon')}
           data-is-checked={checked}
         />
       )}
       <input
         ref={forkedInputRef}
         type="checkbox"
-        className={clsx(styles.switch, 'switch')}
+        className={clsx(styles.switch, 'tcn-switch')}
         onBlur={blur}
         onFocus={focus}
         style={{ ...style, ...customStyles }}

package/src/inputs/textarea/textarea.module.css

@@ -1,66 +1,47 @@
-:root {
-  --disabled-input-color: var(--status-disabled, rgba(0, 0, 0, 0.3));
-  --disabled-input-background-color: rgba(0, 0, 0, 0.05);
-}
-
-.textarea {
-  min-height: 100px;
-  height: calc(100px * var(--scalar, 1));
-  width: 100%;
-  background-color: #fff;
-  color: var(--font-color);
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  padding: 0;
-  padding-inline: 4px;
-  padding-block: 4px;
-  box-sizing: border-box;
-  font-family: Lato, Arial, Helvetica, sans-serif;
-  font-size: calc(14px * var(--scalar, 1));
-  resize: vertical;
-  cursor: text;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.textarea[data-is-disabled="false"]:hover {
-  border: 1px solid var(--accent-color);
-}
-
-.textarea:focus {
-  outline: none;
-  border: 1px solid var(--accent-color);
-}
-
-.textarea:focus-visible {
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
-
-.textarea[data-is-disabled="true"] {
-  cursor: not-allowed;
-  color: var(--disabled-input-color);
-  background-color: var(--disabled-input-background-color);
-}
-
-.textarea[data-is-disabled="true"]::placeholder {
-  color: var(--disabled-input-color);
-}
-
-:global(.small-text) .textarea {
-  font-size: 12px;
-}
-
-:global(.medium-small-text) .textarea {
-  font-size: 14px;
-}
-
-:global(.medium-text) .textarea {
-  font-size: 16px;
-}
-
-:global(.medium-large-text) .textarea {
-  font-size: 18px;
-}
-
-:global(.large-text) .textarea {
-  font-size: 20px;
+@layer tcn-system {
+  :root {
+    --disabled-input-color: var(--status-disabled, rgba(0, 0, 0, 0.3));
+    --disabled-input-background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  :where(.textarea) {
+    min-height: 100px;
+    height: calc(100px * var(--scalar, 1));
+    width: 100%;
+    background-color: #fff;
+    color: var(--font-color);
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: 0;
+    padding-inline: 4px;
+    padding-block: 4px;
+    box-sizing: border-box;
+    font-size: calc(14px * var(--scalar, 1));
+    resize: vertical;
+    cursor: text;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :where(.textarea[data-is-disabled="false"]:hover) {
+    border: 1px solid var(--accent-color);
+  }
+
+  :where(.textarea:focus) {
+    outline: none;
+    border: 1px solid var(--accent-color);
+  }
+
+  :where(.textarea:focus-visible) {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
+
+  :where(.textarea[data-is-disabled="true"]) {
+    cursor: not-allowed;
+    color: var(--disabled-input-color);
+    background-color: var(--disabled-input-background-color);
+  }
+
+  :where(.textarea[data-is-disabled="true"]::placeholder) {
+    color: var(--disabled-input-color);
+  }
 }

package/src/inputs/textarea/textarea.tsx

@@ -20,7 +20,7 @@ export const Textarea = React.forwardRef(function Textarea(
   return (
     <textarea
       style={{ width, height, ...style }}
-      className={clsx(className, styles.textarea, 'textarea')}
+      className={clsx(className, styles.textarea, 'tcn-textarea')}
       data-is-disabled={props.disabled || false}
       ref={ref}
       onChange={e => {

package/src/inputs/unit_input/unit_input.module.css

@@ -1,23 +1,25 @@
-.unit-input {
-  position: relative;
-  opacity: 1;
-}
+@layer tcn-system {
+  :where(.unit-input) {
+    position: relative;
+    opacity: 1;
+  }
 
-.unit-input-flex-box {
-  z-index: inherit;
-}
+  :where(.unit-input-flex-box) {
+    z-index: inherit;
+  }
 
-.unit-input-number {
-  padding-inline-end: 8px;
-}
+  :where(.unit-input-number) {
+    padding-inline-end: 8px;
+  }
 
-.unit-input-number,
-.unit-input-select {
-  position: relative;
-  z-index: 1;
-}
+  :where(.unit-input-number),
+  :where(.unit-input-select) {
+    position: relative;
+    z-index: 1;
+  }
 
-.unit-input-number:focus,
-.unit-input-select:focus {
-  z-index: 2;
+  :where(.unit-input-number:focus),
+  :where(.unit-input-select:focus) {
+    z-index: 2;
+  }
 }

package/src/inputs/unit_input/unit_input.tsx

@@ -82,13 +82,13 @@ export const UnitInput = React.forwardRef(function UnitInput(
   return (
     <HStack
       ref={ref}
-      className={clsx(styles['unit-input'], 'unit-input')}
+      className={clsx(styles['unit-input'], 'tcn-unit-input')}
       height="auto"
       {...props}
     >
       <ZStack width="flex">
         <Input
-          className={clsx(styles['unit-input-number'], 'unit-input-number')}
+          className={clsx(styles['unit-input-number'], 'tcn-unit-input-number')}
           ref={forkedInputRef}
           onChange={valueHandler}
           disabled={disabled}
@@ -100,7 +100,7 @@ export const UnitInput = React.forwardRef(function UnitInput(
         />
       </ZStack>
       <Select
-        className={clsx(styles['unit-input-select'], 'unit-input-select')}
+        className={clsx(styles['unit-input-select'], 'tcn-unit-input-select')}
         ref={unitRef}
         width="auto"
         value={unit}

package/src/layouts/body/h_body.module.css

@@ -1,5 +1,8 @@
-.h-body {
-  min-width: 0;
-  flex-grow: 1;
-  height: 100%;
+@layer tcn-system {
+  :where(.h-body) {
+    min-width: 0;
+    flex-grow: 1;
+    flex-grow: 1;
+    height: 100%;
+  }
 }

package/src/layouts/body/h_body.tsx

@@ -14,7 +14,7 @@ export const HBody = React.forwardRef<HTMLElement, HBodyProps>(function HBody(
       ref={ref}
       as="div"
       overflowX={overflowX}
-      className={clsx(styles['h-body'], className, 'tcn-h-body', 'body')}
+      className={clsx(styles['h-body'], className, 'tcn-h-body', 'tcn-body')}
       {...props}
     >
       {children}

package/src/layouts/body/v_body.module.css

@@ -1,5 +1,7 @@
-.v-body {
-  min-height: 0;
-  flex-grow: 1;
-  width: 100%;
+@layer tcn-system {
+  .v-body {
+    min-height: 0;
+    flex-grow: 1;
+    width: 100%;
+  }
 }

package/src/layouts/column/column.module.css

@@ -1,33 +1,35 @@
-.column {
-  min-width: 250px;
-  height: 100%;
-  min-height: 100%;
-}
+@layer tcn-system {
+  :where(.column) {
+    min-width: 250px;
+    height: 100%;
+    min-height: 100%;
+  }
 
-.column-stack {
-  gap: 8px;
-  padding: 8px;
-  width: 100%;
-  height: 100%;
-}
+  :where(.column-stack) {
+    gap: 8px;
+    padding: 8px;
+    width: 100%;
+    height: 100%;
+  }
 
-.column:after {
-  content: "";
-  position: absolute;
-  bottom: var(--padding);
-  top: var(--padding);
-  right: 0;
-  width: 1px;
-  background-color: rgb(221, 221, 221);
-}
+  :where(.column:after) {
+    content: "";
+    position: absolute;
+    bottom: var(--padding);
+    top: var(--padding);
+    right: 0;
+    width: 1px;
+    background-color: rgb(221, 221, 221);
+  }
 
-.column:last-child:after {
-  display: none;
-}
+  :where(.column:last-child:after) {
+    display: none;
+  }
 
-:global(.h-stack) > .column[data-width="default"] {
-  width: auto;
-  flex-basis: auto;
-  flex-grow: 0;
-  flex-shrink: 0;
+  :where(:global(.h-stack) > .column[data-width="default"]) {
+    width: auto;
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
 }

package/src/layouts/column/column.tsx

@@ -35,7 +35,7 @@ export const Column = React.forwardRef<HTMLElement, ColumnProps>(function Column
       maxWidth={maxWidth}
       minHeight={minHeight}
       maxHeight={maxHeight}
-      className={clsx(className, styles['column'], 'column')}
+      className={clsx(className, styles['column'], 'tcn-column')}
       {...props}
     >
       <VStack
@@ -47,7 +47,7 @@ export const Column = React.forwardRef<HTMLElement, ColumnProps>(function Column
         vAlign={vAlign}
         ref={ref}
         as="section"
-        className={clsx(styles['column-stack'], 'column-stack')}
+        className={clsx(styles['column-stack'], 'tcn-column-stack')}
         zIndex={0}
       >
         {children}