@tcn/ui 0.3.1 → 0.3.3

package/src/tokens/badge/badge.module.css

@@ -1,14 +1,16 @@
-.badge-bubble {
-  position: absolute;
-  transform: translate(-50%, -75%);
-}
+@layer tcn-system {
+  :where(.badge-bubble) {
+    position: absolute;
+    transform: translate(-50%, -75%);
+  }
 
-body[dir="ltr"] .badge-bubble {
-  top: 0;
-  left: 100%;
-}
+  :where(body[dir="ltr"] .badge-bubble) {
+    top: 0;
+    left: 100%;
+  }
 
-body[dir="rtl"] .badge-bubble {
-  top: 0;
-  left: 0;
+  :where(body[dir="rtl"] .badge-bubble) {
+    top: 0;
+    left: 0;
+  }
 }

package/src/tokens/badge/badge.tsx

@@ -33,7 +33,7 @@ export const Badge = React.forwardRef(
         vAlign="end"
         hAlign="end"
         zIndex={0}
-        className={clsx('badge', className)}
+        className={clsx(className, 'tcn-badge')}
         {...props}
       >
         <ZStack zIndex={0} inline width="auto" height="auto">
@@ -41,7 +41,7 @@ export const Badge = React.forwardRef(
         </ZStack>
         <VStack zIndex={1} height="100%" width="auto">
           <Bubble
-            className={clsx(styles['badge-bubble'], 'badge-bubble')}
+            className={clsx(styles['badge-bubble'], 'tcn-badge-bubble')}
             backgroundColor={backgroundColor}
             textColor={color}
             elevate

package/src/tokens/bubble/bubble.module.css

@@ -1,11 +1,13 @@
-.bubble {
-  color: var(--bubble-text-color, inherit);
-  background-color: var(--bubble-color, transparent);
-  box-sizing: border-box;
-  font-size: calc(11px * var(--scalar, 1));
-  border-radius: calc(10px * var(--scalar, 1));
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
-  min-height: calc(20px * var(--scalar, 1));
-  min-width: calc(20px * var(--scalar, 1));
-  overflow: hidden;
+@layer tcn-system {
+  :where(.bubble) {
+    color: var(--bubble-text-color, inherit);
+    background-color: var(--bubble-color, transparent);
+    box-sizing: border-box;
+    font-size: calc(11px * var(--scalar, 1));
+    border-radius: calc(10px * var(--scalar, 1));
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
+    min-height: calc(20px * var(--scalar, 1));
+    min-width: calc(20px * var(--scalar, 1));
+    overflow: hidden;
+  }
 }

package/src/tokens/bubble/bubble.tsx

@@ -35,7 +35,7 @@ export const Bubble = React.forwardRef(function Bubble(
   return (
     <HStack
       inline
-      className={clsx(styles.bubble, 'bubble', className)}
+      className={clsx(styles.bubble, className, 'tcn-bubble')}
       width="auto"
       height="auto"
       ref={ref}

package/src/tokens/chip/chip.module.css

@@ -1,13 +1,15 @@
-.chip {
-  box-sizing: border-box;
-  color: var(--chip-color, inherit);
-  background-color: transparent;
-  width: auto;
-  height: auto;
-  word-break: break-all;
-  overflow-wrap: break-word;
-  hyphens: auto;
-  padding: calc(2px * var(--scalar, 1)) calc(4px * var(--scalar, 1));
-  border-radius: calc(10px * var(--scalar, 1));
-  border: 1px solid var(--chip-color, inherit);
+@layer tcn-system {
+  :where(.chip) {
+    box-sizing: border-box;
+    color: var(--chip-color, inherit);
+    background-color: transparent;
+    width: auto;
+    height: auto;
+    word-break: break-all;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    padding: calc(2px * var(--scalar, 1)) calc(4px * var(--scalar, 1));
+    border-radius: calc(10px * var(--scalar, 1));
+    border: 1px solid var(--chip-color, inherit);
+  }
 }

package/src/tokens/chip/chip.tsx

@@ -26,7 +26,7 @@ export const Chip = React.forwardRef(function Chip(
       width="auto"
       height="auto"
       vAlign="center"
-      className={clsx(styles.chip, 'chip', className)}
+      className={clsx(styles.chip, className, 'tcn-chip')}
       style={finalStyle}
       {...props}
     >

package/src/typography/body_text/body_text.module.css

@@ -1,60 +1,62 @@
-.body-text {
-  display: inline-block;
-  line-height: 1.5;
-}
-
-.body-text[data-word-break="true"] {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-}
-
-.body-text[data-selectable="true"] {
-  user-select: auto;
-}
-
-.body-text[data-selectable="false"] {
-  user-select: none;
-}
-
-/* Sizes */
-.body-text[data-size="sm"] {
-  font-size: calc(10px * var(--scalar, 1));
-  line-height: 1.7;
-}
-
-.body-text[data-size="md"] {
-  font-size: calc(12px * var(--scalar, 1));
-  line-height: 1.5;
-}
-
-.body-text[data-size="lg"] {
-  font-size: calc(14px * var(--scalar, 1));
-  line-height: 1.3;
-}
-
-/* Hierarchy */
-.body-text[data-hierarchy="primary"] {
-  opacity: 1;
-}
-
-.body-text[data-hierarchy="secondary"] {
-  opacity: 0.85;
-}
-
-.body-text[data-hierarchy="tertiary"] {
-  opacity: 0.7;
-}
-
-/* Emphasis */
-.body-text[data-emphasis="strong"] {
-  font-weight: 700;
-}
-
-.body-text[data-emphasis="normal"] {
-  font-weight: 400;
-}
-
-.body-text[data-emphasis="light"] {
-  font-weight: 200;
+@layer tcn-system {
+  :where(.body-text) {
+    display: inline-block;
+    line-height: 1.5;
+  }
+
+  :where(.body-text[data-word-break="true"]) {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+  }
+
+  :where(.body-text[data-selectable="true"]) {
+    user-select: auto;
+  }
+
+  :where(.body-text[data-selectable="false"]) {
+    user-select: none;
+  }
+
+  /* Sizes */
+  :where(.body-text[data-size="sm"]) {
+    font-size: calc(10px * var(--scalar, 1));
+    line-height: 1.7;
+  }
+
+  :where(.body-text[data-size="md"]) {
+    font-size: calc(12px * var(--scalar, 1));
+    line-height: 1.5;
+  }
+
+  :where(.body-text[data-size="lg"]) {
+    font-size: calc(14px * var(--scalar, 1));
+    line-height: 1.3;
+  }
+
+  /* Hierarchy */
+  :where(.body-text[data-hierarchy="primary"]) {
+    opacity: 1;
+  }
+
+  :where(.body-text[data-hierarchy="secondary"]) {
+    opacity: 0.85;
+  }
+
+  :where(.body-text[data-hierarchy="tertiary"]) {
+    opacity: 0.7;
+  }
+
+  /* Emphasis */
+  :where(.body-text[data-emphasis="strong"]) {
+    font-weight: 700;
+  }
+
+  :where(.body-text[data-emphasis="normal"]) {
+    font-weight: 400;
+  }
+
+  :where(.body-text[data-emphasis="light"]) {
+    font-weight: 200;
+  }
 }

package/src/typography/body_text/body_text.tsx

@@ -65,7 +65,7 @@ export function BodyText({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={clsx(styles['body-text'], 'body-text', className)}
+      className={clsx(styles['body-text'], className, 'tcn-body-text')}
       style={style}
       data-size={size}
       data-word-break={breakWords}

package/src/typography/callout/callout.module.css

@@ -1,55 +1,57 @@
-.callout {
-  display: inline-block;
-  line-height: 1.4;
-  letter-spacing: 0.01em;
-}
-
-.callout[data-selectable="true"] {
-  user-select: auto;
-}
-
-.callout[data-selectable="false"] {
-  user-select: none;
-}
-
-/* Sizes */
-.callout[data-size="sm"] {
-  font-size: calc(13px * var(--scalar, 1));
-  line-height: 1.5;
-}
-
-.callout[data-size="md"] {
-  font-size: calc(15px * var(--scalar, 1));
-  line-height: 1.4;
-}
-
-.callout[data-size="lg"] {
-  font-size: calc(17px * var(--scalar, 1));
-  line-height: 1.35;
-}
-
-/* Hierarchy */
-.callout[data-hierarchy="primary"] {
-  opacity: 1;
-}
-
-.callout[data-hierarchy="secondary"] {
-  opacity: 0.85;
-}
-
-.callout[data-hierarchy="tertiary"] {
-  opacity: 0.7;
-}
-
-/* Emphasis */
-.callout[data-emphasis="strong"] {
-  font-weight: 600;
-}
-
-.callout[data-emphasis="normal"] {
-  font-weight: 400;
-}
-
-.callout[data-emphasis="light"] {
-  font-weight: 300;
+@layer tcn-system {
+  :where(.callout) {
+    display: inline-block;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+
+  :where(.callout[data-selectable="true"]) {
+    user-select: auto;
+  }
+
+  :where(.callout[data-selectable="false"]) {
+    user-select: none;
+  }
+
+  /* Sizes */
+  :where(.callout[data-size="sm"]) {
+    font-size: calc(13px * var(--scalar, 1));
+    line-height: 1.5;
+  }
+
+  :where(.callout[data-size="md"]) {
+    font-size: calc(15px * var(--scalar, 1));
+    line-height: 1.4;
+  }
+
+  :where(.callout[data-size="lg"]) {
+    font-size: calc(17px * var(--scalar, 1));
+    line-height: 1.35;
+  }
+
+  /* Hierarchy */
+  :where(.callout[data-hierarchy="primary"]) {
+    opacity: 1;
+  }
+
+  :where(.callout[data-hierarchy="secondary"]) {
+    opacity: 0.85;
+  }
+
+  :where(.callout[data-hierarchy="tertiary"]) {
+    opacity: 0.7;
+  }
+
+  /* Emphasis */
+  :where(.callout[data-emphasis="strong"]) {
+    font-weight: 600;
+  }
+
+  :where(.callout[data-emphasis="normal"]) {
+    font-weight: 400;
+  }
+
+  :where(.callout[data-emphasis="light"]) {
+    font-weight: 300;
+  }
 }

package/src/typography/callout/callout.tsx

@@ -64,7 +64,7 @@ export function Callout({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={clsx(styles['callout'], 'callout', className)}
+      className={clsx(styles['callout'], className, 'tcn-callout')}
       style={style}
       data-size={size}
     >

package/src/typography/caption/caption.module.css

@@ -1,55 +1,57 @@
-.caption {
-  display: inline-block;
-  line-height: 1.6;
-  letter-spacing: 0.03em;
-}
-
-.caption[data-selectable="true"] {
-  user-select: auto;
-}
-
-.caption[data-selectable="false"] {
-  user-select: none;
-}
-
-/* Sizes */
-.caption[data-size="sm"] {
-  font-size: calc(9px * var(--scalar, 1));
-  line-height: 1.7;
-}
-
-.caption[data-size="md"] {
-  font-size: calc(11px * var(--scalar, 1));
-  line-height: 1.6;
-}
-
-.caption[data-size="lg"] {
-  font-size: calc(13px * var(--scalar, 1));
-  line-height: 1.5;
-}
-
-/* Hierarchy */
-.caption[data-hierarchy="primary"] {
-  opacity: 1;
-}
-
-.caption[data-hierarchy="secondary"] {
-  opacity: 0.85;
-}
-
-.caption[data-hierarchy="tertiary"] {
-  opacity: 0.7;
-}
-
-/* Emphasis */
-.caption[data-emphasis="strong"] {
-  font-weight: 500;
-}
-
-.caption[data-emphasis="normal"] {
-  font-weight: 400;
-}
-
-.caption[data-emphasis="light"] {
-  font-weight: 300;
+@layer tcn-system {
+  :where(.caption) {
+    display: inline-block;
+    line-height: 1.6;
+    letter-spacing: 0.03em;
+  }
+
+  :where(.caption[data-selectable="true"]) {
+    user-select: auto;
+  }
+
+  :where(.caption[data-selectable="false"]) {
+    user-select: none;
+  }
+
+  /* Sizes */
+  :where(.caption[data-size="sm"]) {
+    font-size: calc(9px * var(--scalar, 1));
+    line-height: 1.7;
+  }
+
+  :where(.caption[data-size="md"]) {
+    font-size: calc(11px * var(--scalar, 1));
+    line-height: 1.6;
+  }
+
+  :where(.caption[data-size="lg"]) {
+    font-size: calc(13px * var(--scalar, 1));
+    line-height: 1.5;
+  }
+
+  /* Hierarchy */
+  :where(.caption[data-hierarchy="primary"]) {
+    opacity: 1;
+  }
+
+  :where(.caption[data-hierarchy="secondary"]) {
+    opacity: 0.85;
+  }
+
+  :where(.caption[data-hierarchy="tertiary"]) {
+    opacity: 0.7;
+  }
+
+  /* Emphasis */
+  :where(.caption[data-emphasis="strong"]) {
+    font-weight: 500;
+  }
+
+  :where(.caption[data-emphasis="normal"]) {
+    font-weight: 400;
+  }
+
+  :where(.caption[data-emphasis="light"]) {
+    font-weight: 300;
+  }
 }

package/src/typography/caption/caption.tsx

@@ -64,7 +64,7 @@ export function Caption({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={clsx(styles['caption'], 'caption', className)}
+      className={clsx(styles['caption'], className, 'tcn-caption')}
       style={style}
       data-size={size}
     >

package/src/typography/footnote/footnote.module.css

@@ -1,55 +1,57 @@
-.footnote {
-  display: inline-block;
-  line-height: 1.5;
-  letter-spacing: 0.02em;
-}
-
-.footnote[data-selectable="true"] {
-  user-select: auto;
-}
-
-.footnote[data-selectable="false"] {
-  user-select: none;
-}
-
-/* Sizes */
-.footnote[data-size="sm"] {
-  font-size: calc(11px * var(--scalar, 1));
-  line-height: 1.6;
-}
-
-.footnote[data-size="md"] {
-  font-size: calc(13px * var(--scalar, 1));
-  line-height: 1.5;
-}
-
-.footnote[data-size="lg"] {
-  font-size: calc(15px * var(--scalar, 1));
-  line-height: 1.4;
-}
-
-/* Hierarchy */
-.footnote[data-hierarchy="primary"] {
-  opacity: 1;
-}
-
-.footnote[data-hierarchy="secondary"] {
-  opacity: 0.85;
-}
-
-.footnote[data-hierarchy="tertiary"] {
-  opacity: 0.7;
-}
-
-/* Emphasis */
-.footnote[data-emphasis="strong"] {
-  font-weight: 500;
-}
-
-.footnote[data-emphasis="normal"] {
-  font-weight: 400;
-}
-
-.footnote[data-emphasis="light"] {
-  font-weight: 300;
+@layer tcn-system {
+  :where(.footnote) {
+    display: inline-block;
+    line-height: 1.5;
+    letter-spacing: 0.02em;
+  }
+
+  :where(.footnote[data-selectable="true"]) {
+    user-select: auto;
+  }
+
+  :where(.footnote[data-selectable="false"]) {
+    user-select: none;
+  }
+
+  /* Sizes */
+  :where(.footnote[data-size="sm"]) {
+    font-size: calc(11px * var(--scalar, 1));
+    line-height: 1.6;
+  }
+
+  :where(.footnote[data-size="md"]) {
+    font-size: calc(13px * var(--scalar, 1));
+    line-height: 1.5;
+  }
+
+  :where(.footnote[data-size="lg"]) {
+    font-size: calc(15px * var(--scalar, 1));
+    line-height: 1.4;
+  }
+
+  /* Hierarchy */
+  :where(.footnote[data-hierarchy="primary"]) {
+    opacity: 1;
+  }
+
+  :where(.footnote[data-hierarchy="secondary"]) {
+    opacity: 0.85;
+  }
+
+  :where(.footnote[data-hierarchy="tertiary"]) {
+    opacity: 0.7;
+  }
+
+  /* Emphasis */
+  :where(.footnote[data-emphasis="strong"]) {
+    font-weight: 500;
+  }
+
+  :where(.footnote[data-emphasis="normal"]) {
+    font-weight: 400;
+  }
+
+  :where(.footnote[data-emphasis="light"]) {
+    font-weight: 300;
+  }
 }

package/src/typography/footnote/footnote.tsx

@@ -64,7 +64,7 @@ export function Footnote({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={clsx(styles['footnote'], 'footnote', className)}
+      className={clsx(styles['footnote'], className, 'tcn-footnote')}
       style={style}
       data-size={size}
     >