@tcn/ui 0.3.1 → 0.3.2

package/src/stacks/story_components/circle.module.css

@@ -1,7 +1,9 @@
-.circle {
-  border: 1px solid color-mix(in srgb, var(--color) 25%, rgba(0, 0, 0, 0.5));
-  color: color-mix(in srgb, var(--color) 15%, rgba(0, 0, 0, 0.8));
-  background-color: var(--color);
-  border-radius: 50%;
-  flex-shrink: 0;
+@layer tcn-system {
+  :where(.circle) {
+    border: 1px solid color-mix(in srgb, var(--color) 25%, rgba(0, 0, 0, 0.5));
+    color: color-mix(in srgb, var(--color) 15%, rgba(0, 0, 0, 0.8));
+    background-color: var(--color);
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
 }

package/src/stacks/story_components/circle.tsx

@@ -23,7 +23,7 @@ export const Circle = React.forwardRef(function Circle(
       style={finalStyle}
       width={size}
       height={size}
-      className={clsx(className, styles['circle'])}
+      className={clsx(className, styles['circle'], 'tcn-circle')}
       {...props}
     />
   );

package/src/stacks/story_components/picture_placeholder.module.css

@@ -1,3 +1,5 @@
-.picture-placeholder {
-  color: var(--color);
+@layer tcn-system {
+  :where(.picture-placeholder) {
+    color: var(--color);
+  }
 }

package/src/stacks/story_components/picture_placeholder.tsx

@@ -29,7 +29,11 @@ export const PicturePlaceholder = React.forwardRef(function PicturePlaceholder(
       height={size}
       viewBox="0 0 16 16"
       xmlns="http://www.w3.org/2000/svg"
-      className={clsx(className, styles['picture-placeholder'])}
+      className={clsx(
+        className,
+        styles['picture-placeholder'],
+        'tcn-picture-placeholder'
+      )}
       style={finalStyle}
       {...props}
     >

package/src/stacks/story_components/rect.module.css

@@ -1,8 +1,10 @@
-.rect {
-  display: grid;
-  place-items: center center;
-  border: 1px solid color-mix(in srgb, var(--color) 25%, rgba(0, 0, 0, 0.5));
-  color: color-mix(in srgb, var(--color) 15%, rgba(0, 0, 0, 0.8));
-  background-color: var(--color);
-  flex-shrink: 0;
+@layer tcn-system {
+  :where(.rect) {
+    display: grid;
+    place-items: center center;
+    border: 1px solid color-mix(in srgb, var(--color) 25%, rgba(0, 0, 0, 0.5));
+    color: color-mix(in srgb, var(--color) 15%, rgba(0, 0, 0, 0.8));
+    background-color: var(--color);
+    flex-shrink: 0;
+  }
 }

package/src/stacks/story_components/rect.tsx

@@ -27,7 +27,7 @@ export const Rect = React.forwardRef(function Rect(
     <Box
       ref={ref}
       style={finalStyle}
-      className={clsx(className, styles['rect'])}
+      className={clsx(className, styles['rect'], 'tcn-rect')}
       width={width}
       height={height}
       {...props}

package/src/stacks/v_collapsible_box.tsx

@@ -41,7 +41,11 @@ export const VCollapsibleBox = React.forwardRef(function CollapsibleBox(
         collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);
         props.onHeightResizeEnd?.(height);
       }}
-      className={clsx(props.className, styles['collapsible-box'])}
+      className={clsx(
+        props.className,
+        styles['collapsible-box'],
+        'tcn-v-collapsible-box'
+      )}
       children={children}
     />
   );

package/src/stacks/v_stack.tsx

@@ -100,7 +100,7 @@ export const VStack = React.forwardRef(function VStack<
   return (
     <As
       ref={ref}
-      className={clsx(styles['v-stack'], className, 'v-stack', 'stack')}
+      className={clsx(styles['v-stack'], className, 'tcn-v-stack', 'tcn-stack')}
       style={finalStyles}
       data-inline={Boolean(inline)}
       data-allow-flow={Boolean(allowFlow)}

package/src/stacks/z_stack.tsx

@@ -90,7 +90,7 @@ export const ZStack = React.forwardRef(function ZStack<T extends HTMLElement>(
         ...removeUndefinedProperties(defaultStyles),
         ...style,
       }}
-      className={clsx(styles['z-stack'], className, 'z-stack', 'stack')}
+      className={clsx(styles['z-stack'], className, 'tcn-z-stack', 'tcn-stack')}
       data-inline={Boolean(inline)}
       data-v-alignment={vAlign}
       data-h-alignment={hAlign}

package/src/surfaces/alert/alert.tsx

@@ -18,7 +18,7 @@ export const Alert = React.forwardRef(function Alert(
   return (
     <Confirm
       ref={ref}
-      className={clsx(className, 'alert')}
+      className={clsx(className, 'tcn-alert')}
       {...props}
       actions={
         <Button onClick={onAccept} hierarchy="primary" width="100%">

package/src/surfaces/card/card_stories.module.css

@@ -1,13 +1,15 @@
-.content-box {
-  background: rgba(0, 128, 0, 0.5);
-  min-height: 200px;
-  width: 100%;
-}
+@layer tcn-system {
+  :where(.content-box) {
+    background: rgba(0, 128, 0, 0.5);
+    min-height: 200px;
+    width: 100%;
+  }
 
-.stories-container {
-  width: 100%;
-  height: 100%;
-  padding: 16px;
-  background-color: #ccc;
-  overflow: auto;
+  :where(.stories-container) {
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+    background-color: #ccc;
+    overflow: auto;
+  }
 }

package/src/surfaces/confirm/confirm.module.css

@@ -1,40 +1,42 @@
-.confirm {
-  border-radius: 16px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
-  background-color: var(--body-color);
-  text-align: center;
-  padding: 16px;
-  width: 250px;
-  height: auto;
-}
-
-.confirm[data-shake="true"] {
-  animation: shake 0.3s ease-in-out;
-  animation-iteration-count: 1;
-}
-
-.actions > button {
-  width: 100%;
-  margin-bottom: 8px;
-}
-
-@keyframes shake {
-  0% {
-    transform: translateX(0);
+@layer tcn-system {
+  :where(.confirm) {
+    border-radius: 16px;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
+    background-color: var(--body-color);
+    text-align: center;
+    padding: 16px;
+    width: 250px;
+    height: auto;
   }
-  20% {
-    transform: translateX(-10px);
-  }
-  40% {
-    transform: translateX(10px);
-  }
-  60% {
-    transform: translateX(-10px);
+
+  :where(.confirm[data-shake="true"]) {
+    animation: shake 0.3s ease-in-out;
+    animation-iteration-count: 1;
   }
-  80% {
-    transform: translateX(10px);
+
+  :where(.actions > button) {
+    width: 100%;
+    margin-bottom: 8px;
   }
-  100% {
-    transform: translateX(0);
+
+  @keyframes shake {
+    0% {
+      transform: translateX(0);
+    }
+    20% {
+      transform: translateX(-10px);
+    }
+    40% {
+      transform: translateX(10px);
+    }
+    60% {
+      transform: translateX(-10px);
+    }
+    80% {
+      transform: translateX(10px);
+    }
+    100% {
+      transform: translateX(0);
+    }
   }
 }

package/src/surfaces/confirm/confirm.tsx

@@ -62,20 +62,23 @@ export const Confirm = React.forwardRef(function Confirm(
             <Box onClick={shakeConfirm} {...veilProps} height="100%"></Box>
             <div
               ref={ref}
-              className={clsx(styles.confirm, className, 'confirm')}
+              className={clsx(styles.confirm, className, 'tcn-confirm')}
               data-shake={shake}
               {...props}
             >
               <VStack hAlign="center">
                 {graphic}
-                <Title className="confirm-title" emphasis="strong" size="sm">
+                <Title className="tcn-confirm-title" emphasis="strong" size="sm">
                   {title}
                 </Title>
-                <BodyText className="confirm-description" hierarchy="tertiary">
+                <BodyText className="tcn-confirm-description" hierarchy="tertiary">
                   {description}
                 </BodyText>
                 <Spacer height="16px" />
-                <Box className={clsx(styles.actions, 'confirm-actions')} height="auto">
+                <Box
+                  className={clsx(styles.actions, 'tcn-confirm-actions')}
+                  height="auto"
+                >
                   {actions}
                 </Box>
               </VStack>

package/src/surfaces/drawers/drawer_bottom/drawer_bottom.module.css

@@ -1,3 +1,5 @@
-.drawerBottom {
-  background-color: var(--background-color-primary);
+@layer tcn-system {
+  :where(.drawerBottom) {
+    background-color: var(--background-color-primary);
+  }
 }

package/src/surfaces/drawers/drawer_bottom/drawer_bottom.tsx

@@ -13,7 +13,7 @@ export const DrawerBottom = React.forwardRef<HTMLElement, DrawerBottomProps>(
       <VStack
         ref={ref}
         as="section"
-        className={clsx(styles.drawerBottom, className, 'drawer-bottom')}
+        className={clsx(styles.drawerBottom, className, 'tcn-drawer-bottom')}
         {...props}
       >
         {children}

package/src/surfaces/drawers/drawer_end/drawer_end.module.css

@@ -1,3 +1,5 @@
-.drawerEnd {
-  background-color: var(--background-color-primary);
+@layer tcn-system {
+  :where(.drawerEnd) {
+    background-color: var(--background-color-primary);
+  }
 }

package/src/surfaces/drawers/drawer_end/drawer_end.tsx

@@ -15,7 +15,7 @@ export const DrawerEnd = React.forwardRef<HTMLElement, DrawerEndProps>(function
     <VStack
       ref={ref}
       as="section"
-      className={clsx(styles.drawerEnd, className, 'drawerEnd')}
+      className={clsx(styles.drawerEnd, className, 'tcn-drawerEnd')}
       {...props}
     >
       {children}

package/src/surfaces/drawers/drawer_start/drawer_start.module.css

@@ -1,3 +1,5 @@
-.drawerStart {
-  background-color: var(--background-color-primary);
+@layer tcn-system {
+  :where(.drawerStart) {
+    background-color: var(--background-color-primary);
+  }
 }

package/src/surfaces/drawers/drawer_start/drawer_start.tsx

@@ -13,7 +13,7 @@ export const DrawerStart = React.forwardRef<HTMLElement, DrawerStartProps>(
       <VStack
         ref={ref}
         as="section"
-        className={clsx(styles.drawerStart, className, 'drawerStart')}
+        className={clsx(styles.drawerStart, className, 'tcn-drawerStart')}
         {...props}
       >
         {children}

package/src/surfaces/drawers/drawer_top/drawer_top.module.css

@@ -1,3 +1,5 @@
-.drawerBottom {
-  background-color: var(--background-color-primary);
+@layer tcn-system {
+  :where(.drawerBottom) {
+    background-color: var(--background-color-primary);
+  }
 }

package/src/surfaces/drawers/drawer_top/drawer_top.tsx

@@ -15,7 +15,7 @@ export const DrawerTop = React.forwardRef<HTMLElement, DrawerTopProps>(function
     <VStack
       ref={ref}
       as="section"
-      className={clsx(styles.drawerTop, className, 'drawerTop')}
+      className={clsx(styles.drawerTop, className, 'tcn-drawerTop')}
       {...props}
     >
       {children}

package/src/surfaces/modal/modal.module.css

@@ -1,4 +1,6 @@
-.modal {
-  width: auto;
-  height: auto;
+@layer tcn-system {
+  :where(.modal) {
+    width: auto;
+    height: auto;
+  }
 }

package/src/surfaces/page/h_page.tsx

@@ -13,7 +13,7 @@ export const HPage = React.forwardRef<HTMLElement, HPageProps>(function HPage(
     <HStack
       ref={ref}
       as="main"
-      className={clsx(styles.page, className, 'page')}
+      className={clsx(styles.page, className, 'tcn-h-page')}
       vAlign="start"
       {...props}
     >

package/src/surfaces/page/page.module.css

@@ -1,12 +1,14 @@
-.page {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  z-index: 1;
-  gap: var(--gap);
-  padding: var(--padding);
-}
+@layer tcn-system {
+  :where(.page) {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    z-index: 1;
+    gap: var(--gap);
+    padding: var(--padding);
+  }
 
-.page > :global(.stack) {
-  gap: var(--gap);
+  :where(.page > :global(.stack)) {
+    gap: var(--gap);
+  }
 }

package/src/surfaces/page/v_page.tsx

@@ -13,7 +13,7 @@ export const VPage = React.forwardRef<HTMLElement, VPageProps>(function VPage(
     <VStack
       ref={ref}
       as="main"
-      className={clsx(styles.page, className, 'page')}
+      className={clsx(styles.page, className, 'tcn-v-page')}
       {...props}
     >
       {children}

package/src/surfaces/panel/panel.module.css

@@ -1,9 +1,10 @@
-.panel-stack {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-
-/* .page-stack > :global(.stack) {
+@layer tcn-system {
+  :where(.panel-stack) {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+  /* .page-stack > :global(.stack) {
   gap: var(--gap);
 } */
+}

package/src/surfaces/popover/popover.tsx

@@ -45,7 +45,7 @@ export function Popover({
       open={open}
       onClose={onClose}
     >
-      <VStack inline width="auto" className={clsx(className, 'popover')} {...props}>
+      <VStack inline width="auto" className={clsx(className, 'tcn-popover')} {...props}>
         {children}
       </VStack>
     </Popper>

package/src/surfaces/tooltip/tooltip.module.css

@@ -1,3 +1,5 @@
-.tooltip {
-  background-color: var(--background-color-primary);
+@layer tcn-system {
+  :where(.tooltip) {
+    background-color: var(--background-color-primary);
+  }
 }

package/src/surfaces/window/window.module.css

@@ -1,5 +1,7 @@
-.window {
-  /* Base window styles */
-  position: relative;
-  box-sizing: border-box;
+@layer tcn-system {
+  :where(.window) {
+    /* Base window styles */
+    position: relative;
+    box-sizing: border-box;
+  }
 }