@tcn/ui 0.3.3 → 0.5.0

package/src/themes/themes/windows_98/windows_98.css

@@ -57,7 +57,6 @@
     font-family: var(--font-family);
     color: var(--font-color);
     -webkit-font-smoothing: none;
-    background-color: var(--background-color-primary);
   }
 
   /* ===== TYPOGRAPHY ===== */
@@ -1036,6 +1035,114 @@
     border-right: 1px solid #f5f5f5;
     border-left: 1px solid #808080;
   }
+
+  /* ===== SECTIONS ===== */
+
+  .tcn-section {
+    background: silver;
+    gap: 0px;
+    font-size: 12px;
+  }
+
+  .tcn-heading {
+    background: silver;
+    padding-inline-start: 8px;
+    height: 23px;
+    z-index: 5;
+    box-shadow:
+      inset -1px -1px #0a0a0a,
+      inset 1px 1px #fff,
+      inset -2px -2px grey,
+      inset 2px 2px #c0c0c0;
+  }
+
+  .tcn-section > .tcn-heading {
+    top: 0;
+    padding-inline-start: 8px;
+    z-index: 4;
+  }
+
+  .tcn-section > .tcn-section > .tcn-heading {
+    top: 23px;
+    padding-inline-start: 12px;
+    z-index: 3;
+  }
+
+  .tcn-section > .tcn-section > .tcn-section > .tcn-heading {
+    top: 46px;
+    padding-inline-start: 16px;
+    z-index: 2;
+  }
+
+  .tcn-section > .tcn-section > .tcn-section > .tcn-section .tcn-heading {
+    top: 69px;
+    padding-inline-start: 20px;
+    z-index: 1;
+  }
+
+  .tcn-section > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 8px;
+  }
+
+  .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 12px;
+  }
+
+  .tcn-section > .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 16px;
+  }
+
+  .tcn-section
+    > .tcn-section
+    > .tcn-section
+    > .tcn-section
+    > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 20px;
+  }
+
+  .tcn-section > .tcn-row {
+    background: #fff;
+    padding: 4px;
+    font-size: 12px;
+    gap: 4px;
+  }
+
+  .tcn-base-carrot {
+    --carrot-size: 12px;
+    --carrot-triangle-height: calc(var(--carrot-size) / 2);
+    --carrot-triangle-width: var(--carrot-size);
+    --carrot-triangle-base: var(--carrot-triangle-height) solid transparent;
+    --carrot-triangle-peak: var(--carrot-triangle-width) solid #000;
+
+    width: 0;
+    height: 0;
+    flex-grow: 0;
+    display: inline-block;
+
+    &[data-direction="top"] {
+      border-bottom: var(--carrot-triangle-peak);
+      border-left: var(--carrot-triangle-base);
+      border-right: var(--carrot-triangle-base);
+    }
+
+    &[data-direction="bottom"] {
+      border-top: var(--carrot-triangle-peak);
+      border-left: var(--carrot-triangle-base);
+      border-right: var(--carrot-triangle-base);
+    }
+
+    &[data-direction="start"] {
+      border-right: var(--carrot-triangle-peak);
+      border-top: var(--carrot-triangle-base);
+      border-bottom: var(--carrot-triangle-base);
+    }
+
+    &[data-direction="end"] {
+      border-left: var(--carrot-triangle-peak);
+      border-top: var(--carrot-triangle-base);
+      border-bottom: var(--carrot-triangle-base);
+    }
+  }
 }
 
 /* ===== TABS ===== */

package/src/tokens/index.ts

@@ -1,3 +1,5 @@
 export * from './chip/chip.js';
 export * from './badge/badge.js';
 export * from './bubble/bubble.js';
+export * from './key/key.js';
+export * from './value/value.js';

package/src/tokens/key/key.tsx

@@ -0,0 +1,10 @@
+import clsx from 'clsx';
+import { HStack, HStackProps } from '../../stacks/h_stack.js';
+
+export const Key = ({ children, className, hAlign = 'start', ...props }: HStackProps) => {
+  return (
+    <HStack className={clsx(className, 'tcn-key')} hAlign={hAlign} {...props}>
+      {children}
+    </HStack>
+  );
+};

package/src/tokens/value/value.tsx

@@ -0,0 +1,10 @@
+import clsx from 'clsx';
+import { HStack, HStackProps } from '../../stacks/h_stack.js';
+
+export const Value = ({ children, className, hAlign = 'end', ...props }: HStackProps) => {
+  return (
+    <HStack className={clsx(className, 'tcn-value')} hAlign={hAlign} {...props}>
+      {children}
+    </HStack>
+  );
+};

package/tsconfig.json

@@ -12,6 +12,9 @@
       "~icons/*": [
         "../icons/src/*"
       ],
+      "~resource-store/*": [
+        "../resource-store/src/*"
+      ],
       "~sb-blackcat-addon/*": [
         "../sb-blackcat-addon/src/*"
       ],
@@ -20,6 +23,9 @@
       ],
       "~ui/*": [
         "./src/*"
+      ],
+      "~ui-table/*": [
+        "../ui-table/src/*"
       ]
     }
   },