twntyx-css 1.0.0

package/styles/code.css

@@ -0,0 +1,264 @@
+/* Code */
+
+/* Light */
+code[class*="language-"],
+pre[class*="language-"],
+.code {
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+}
+
+:root:not(.dark) {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #000;
+    background: 0 0;
+    text-shadow: 0 1px #fff;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+  /* 
+  code[class*="language-"] ::-moz-selection,
+  code[class*="language-"]::-moz-selection,
+  pre[class*="language-"] ::-moz-selection,
+  pre[class*="language-"]::-moz-selection {
+    text-shadow: none;
+    background: transparent;
+  }
+
+  code[class*="language-"] ::selection,
+  code[class*="language-"]::selection,
+  pre[class*="language-"] ::selection,
+  pre[class*="language-"]::selection {
+    text-shadow: none;
+    background: transparent;
+  } */
+
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: transparent;
+  }
+
+  :not(pre) > code[class*="language-"] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+  }
+
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #708090;
+  }
+
+  .token.punctuation {
+    color: #999;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.boolean,
+  .token.constant,
+  .token.deleted,
+  .token.number,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: #905;
+  }
+
+  .token.attr-name,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.selector,
+  .token.string {
+    color: #690;
+  }
+
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.operator,
+  .token.url {
+    color: #9a6e3a;
+    background: hsla(0, 0%, 100%, 0.5);
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #07a;
+  }
+
+  .token.class-name,
+  .token.function {
+    color: #dd4a68;
+  }
+
+  .token.important,
+  .token.regex,
+  .token.variable {
+    color: #e90;
+  }
+
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
+
+/* Dark */
+
+:root.dark,
+.dark {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #f8f8f2;
+    background: 0 0;
+    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border-radius: 0.3em;
+  }
+
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: transparent;
+  }
+
+  :not(pre) > code[class*="language-"] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+  }
+
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #8292a2;
+  }
+
+  .token.punctuation {
+    color: #f8f8f2;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.constant,
+  .token.deleted,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: #f92672;
+  }
+
+  .token.boolean,
+  .token.number {
+    color: #ae81ff;
+  }
+
+  .token.attr-name,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.selector,
+  .token.string {
+    color: #a6e22e;
+  }
+
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.operator,
+  .token.url,
+  .token.variable {
+    color: #f8f8f2;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.class-name,
+  .token.function {
+    color: #e6db74;
+  }
+
+  .token.keyword {
+    color: #66d9ef;
+  }
+
+  .token.important,
+  .token.regex {
+    color: #fd971f;
+  }
+
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}

package/styles/collapsible.css

@@ -0,0 +1,93 @@
+/*----------------------------*/
+/* COLLAPSIBLE */
+/*----------------------------*/
+
+@utility collapsible {
+  &[open],
+  &.is-open {
+    > .collapsible-header::after,
+    .collapsible-arrow {
+      @apply rotate-180;
+    }
+    > .collapsible-content {
+      @apply grid-rows-[1fr]!;
+    }
+  }
+
+  &.collapsible-has-arrow {
+    > .collapsible-header {
+      &::after {
+        @apply shrink-0 content-[''] ml-auto opacity-50 transition-transform duration-150 ease-anticipate include-transition bg-text-secondary mask-carat text-text-secondary size-5;
+      }
+    }
+    .collapsible-arrow {
+      @apply transition-transform duration-150 ease-anticipate;
+    }
+  }
+
+  &:not(.collapsible-has-arrow) {
+    > .collapsible-header {
+      @apply underline active:no-underline;
+    }
+  }
+
+  &.collapsible-full-width {
+    > .collapsible-header {
+      @apply w-full;
+    }
+  }
+
+  &.collapsible-card {
+    --space-x: 0.75rem;
+    --space-y: 0.5rem;
+    @apply p-0.5 card;
+
+    > .collapsible-header {
+      @apply py-(--space-y) px-(--space-x) w-full text-sm font-medium min-h-10 include-hover-primary;
+    }
+
+    > .collapsible-content {
+      > * {
+        > * {
+          @apply py-(--space-x) px-(--space-x) border-t border-line-default;
+        }
+      }
+    }
+  }
+
+  &:not(.collapsible-card) {
+    .collapsible-header {
+      @apply hover:text-text-tertiary active:text-text-tertiary;
+    }
+  }
+
+  &:not([class*="rounded"]) {
+    --roundness: 1.5rem;
+  }
+  &.rounded-none {
+    --roundness: 0;
+  }
+  &.rounded-sm {
+    --roundness: 0.25rem;
+  }
+  &.rounded-lg {
+    --roundness: 0.5rem;
+  }
+  &.rounded-xl {
+    --roundness: 0.75rem;
+  }
+  &.rounded-2xl {
+    --roundness: 1rem;
+  }
+
+  .collapsible-header {
+    @apply rounded-[calc(var(--roundness)-0.125rem-1px)] flex items-center gap-2 include-interactive cursor-pointer include-interactive text-text-default;
+  }
+
+  .collapsible-content {
+    @apply grid overflow-hidden transition-[grid-template-rows] duration-700 ease-[cubic-bezier(0.075,0.82,0.165,1)] grid-rows-[0fr];
+    > * {
+      @apply overflow-hidden;
+    }
+  }
+}