@pandacss/studio 0.0.0-dev-20230613163214

package/src/pages/font-sizes.astro

@@ -0,0 +1,15 @@
+---
+import { FontTokens } from '../components/font-tokens'
+import Layout from '../layouts/Layout.astro'
+import Sidebar from '../layouts/Sidebar.astro'
+
+import context from '../lib/panda.context'
+
+const fontSizes = context.getCategory('fontSizes')
+---
+
+<Layout>
+  <Sidebar title="Font Sizes">
+    <FontTokens client:load fontTokens={fontSizes} token="fontSize" />
+  </Sidebar>
+</Layout>

package/src/pages/font-weights.astro

@@ -0,0 +1,15 @@
+---
+import { FontTokens } from '../components/font-tokens'
+import Layout from '../layouts/Layout.astro'
+import Sidebar from '../layouts/Sidebar.astro'
+
+import context from '../lib/panda.context'
+
+const fontWeights = context.getCategory('fontWeights')
+---
+
+<Layout>
+  <Sidebar title="Font Weights">
+    <FontTokens client:load fontTokens={fontWeights} token="fontWeight" />
+  </Sidebar>
+</Layout>

package/src/pages/fonts.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '../layouts/Layout.astro'
+import Sidebar from '../layouts/Sidebar.astro'
+import { FontFamily } from '../components/font-family'
+---
+
+<Layout>
+    <Sidebar title="Fonts">
+        <FontFamily />
+    </Sidebar>
+</Layout>

package/src/pages/index.astro

@@ -0,0 +1,8 @@
+---
+import { Overview } from '../components/overview'
+import Layout from '../layouts/Layout.astro'
+---
+
+<Layout>
+  <Overview client:load />
+</Layout>

package/src/pages/layer-styles.astro

@@ -0,0 +1,11 @@
+---
+import { LayerStyles } from '../components/layer-styles'
+import Layout from '../layouts/Layout.astro'
+import Sidebar from '../layouts/Sidebar.astro'
+---
+
+<Layout>
+  <Sidebar title="Layer Styles">
+    <LayerStyles client:load />
+  </Sidebar>
+</Layout>

package/src/pages/letter-spacings.astro

@@ -0,0 +1,20 @@
+---
+import { FontTokens } from '../components/font-tokens'
+import Layout from '../layouts/Layout.astro'
+import Sidebar from '../layouts/Sidebar.astro'
+
+import context from '../lib/panda.context'
+
+const tokens = context.getCategory('letterSpacings')
+---
+
+<Layout>
+  <Sidebar title="Letter Spacings">
+    <FontTokens
+      client:load
+      fontTokens={tokens}
+      token="letterSpacing"
+      text="The quick brown fox jumps over the lazy dog."
+    />
+  </Sidebar>
+</Layout>

package/src/pages/line-heights.astro

@@ -0,0 +1,21 @@
+---
+import { FontTokens } from '../components/font-tokens'
+import Layout from '../layouts/Layout.astro'
+import Sidebar from '../layouts/Sidebar.astro'
+
+import context from '../lib/panda.context'
+
+const tokens = context.getCategory('lineHeights')
+---
+
+<Layout>
+  <Sidebar title="Line Heights">
+    <FontTokens
+      client:load
+      fontTokens={tokens}
+      token="lineHeight"
+      largeText
+      text={`Panda design system lineHeight specifies the vertical distance between two lines of text. You can peveiew this visually here.`}
+    />
+  </Sidebar>
+</Layout>

package/src/pages/playground/contrast-checker.astro

@@ -0,0 +1,11 @@
+---
+import { ColorContrastChecker } from '../../components/color-constrast'
+import Layout from '../../layouts/Layout.astro'
+import Sidebar from '../../layouts/Sidebar.astro'
+---
+
+<Layout>
+  <Sidebar>
+    <ColorContrastChecker client:load />
+  </Sidebar>
+</Layout>

package/src/pages/playground/typography.astro

@@ -0,0 +1,11 @@
+---
+import { TypographyPlayground } from '../../components/typography-playground'
+import Layout from '../../layouts/Layout.astro'
+import Sidebar from '../../layouts/Sidebar.astro'
+---
+
+<Layout>
+  <Sidebar>
+    <TypographyPlayground client:load />
+  </Sidebar>
+</Layout>

package/src/pages/radii.astro

@@ -0,0 +1,11 @@
+---
+import { Radii } from '../components/radii'
+import Layout from '../layouts/Layout.astro'
+import Sidebar from '../layouts/Sidebar.astro'
+---
+
+<Layout>
+  <Sidebar title="Border Radius">
+    <Radii client:load />
+  </Sidebar>
+</Layout>

package/src/pages/sizes.astro

@@ -0,0 +1,14 @@
+---
+import { Sizes } from '../components/sizes'
+import Layout from '../layouts/Layout.astro'
+import Sidebar from '../layouts/Sidebar.astro'
+import context from '../lib/panda.context'
+
+const tokens = context.getCategory('sizes')
+---
+
+<Layout>
+  <Sidebar title="Sizes">
+    <Sizes sizes={tokens} client:load />
+  </Sidebar>
+</Layout>

package/src/pages/spacing.astro

@@ -0,0 +1,14 @@
+---
+import { Sizes } from '../components/sizes'
+import Layout from '../layouts/Layout.astro'
+import Sidebar from '../layouts/Sidebar.astro'
+import context from '../lib/panda.context'
+
+const tokens = context.getCategory('spacing')
+---
+
+<Layout>
+    <Sidebar title="Spacing">
+        <Sizes sizes={tokens} client:load />
+    </Sidebar>
+</Layout>

package/src/pages/text-styles.astro

@@ -0,0 +1,11 @@
+---
+import { TextStyles } from '../components/text-styles'
+import Layout from '../layouts/Layout.astro'
+import Sidebar from '../layouts/Sidebar.astro'
+---
+
+<Layout>
+  <Sidebar title="Text Styles">
+    <TextStyles client:load />
+  </Sidebar>
+</Layout>

package/src/pages/token-analyzer/file.astro

@@ -0,0 +1,11 @@
+---
+import { FileDetails } from '../../components/analyzer/file-details'
+import Layout from '../../layouts/Layout.astro'
+import Sidebar from '../../layouts/Sidebar.astro'
+---
+
+<Layout>
+  <Sidebar title="Token Analyzer - Files">
+    <FileDetails client:only />
+  </Sidebar>
+</Layout>

package/src/pages/token-analyzer/index.astro

@@ -0,0 +1,11 @@
+---
+import { TokenAnalyzer } from '../../components/token-analyzer'
+import Layout from '../../layouts/Layout.astro'
+import Sidebar from '../../layouts/Sidebar.astro'
+---
+
+<Layout>
+  <Sidebar title="Token Analyzer">
+    <TokenAnalyzer client:load />
+  </Sidebar>
+</Layout>

package/src/pages/token-analyzer/utility.astro

@@ -0,0 +1,11 @@
+---
+import { UtilityDetails } from '../../components/analyzer/utility-details'
+import Layout from '../../layouts/Layout.astro'
+import Sidebar from '../../layouts/Sidebar.astro'
+---
+
+<Layout>
+  <Sidebar title="Token Analyzer - Utilities">
+    <UtilityDetails client:only />
+  </Sidebar>
+</Layout>

package/styled-system/chunks/..__core____tests____composition.test.css

@@ -0,0 +1,2 @@
+@layer utilities {
+}

package/styled-system/chunks/src__components__analyzer__category-utilities.css

@@ -0,0 +1,97 @@
+@layer utilities {
+  .p_4px_8px {
+    padding: 4px 8px;
+  }
+
+  .bg_white {
+    background: var(--colors-white);
+  }
+
+  .list-style_none {
+    list-style: none;
+  }
+
+  .p_0 {
+    padding: 0;
+  }
+
+  .ml_auto {
+    margin-left: auto;
+  }
+
+  .w_26px {
+    width: 26px;
+  }
+
+  .ml_2 {
+    margin-left: var(--spacing-2);
+  }
+
+  .p_4 {
+    padding: var(--spacing-4);
+  }
+
+  .bg_gray\.50 {
+    background: var(--colors-gray-50);
+  }
+
+  .d_grid {
+    display: grid;
+  }
+
+  .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .gap_4 {
+    gap: var(--spacing-4);
+  }
+
+  .col-span_span_2 {
+    grid-column: span 2;
+  }
+
+  .d_inline-flex {
+    display: inline-flex;
+  }
+
+  .items_center {
+    align-items: center;
+  }
+
+  .opacity_0\.5 {
+    opacity: 0.5;
+  }
+
+  .border-b_1px_solid_transparent {
+    border-bottom: 1px solid transparent;
+  }
+
+  .cursor_pointer {
+    cursor: pointer;
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .d_flex {
+    display: flex;
+  }
+
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+  }
+
+  .gap_2 {
+    gap: var(--spacing-2);
+  }
+}

package/styled-system/chunks/src__components__analyzer__data-combobox.css

@@ -0,0 +1,77 @@
+@layer utilities {
+  .w_full {
+    width: var(--sizes-full);
+  }
+
+  .highlighted\:ring_1px_solid_token\(colors\.blue\.400\,_blue\) {
+    &[data-highlighted] {
+      outline: 1px solid var(--colors-blue-400, blue);
+    }
+  }
+
+  .max-h_300px {
+    max-height: 300px;
+  }
+
+  .overflow_auto {
+    overflow: auto;
+  }
+
+  .bg_white {
+    background: var(--colors-white);
+  }
+
+  .list-style_none {
+    list-style: none;
+  }
+
+  .p_4px_8px {
+    padding: 4px 8px;
+  }
+
+  .highlighted\:ring_1px_solid_token\(colors\.blue\.400\,_blue\) {
+    &[data-highlighted] {
+      outline: 1px solid var(--colors-blue-400, blue);
+    }
+  }
+
+  .flex_column {
+    flex-direction: column;
+  }
+
+  .d_flex {
+    display: flex;
+  }
+
+  .border_1px_solid_token\(colors\.blue\.400\,_blue\) {
+    border: 1px solid var(--colors-blue-400, blue);
+  }
+
+  .mr_-2 {
+    margin-right: calc(var(--spacing-2) * -1);
+  }
+
+  .select_none {
+    user-select: none;
+  }
+
+  .fs_lg {
+    font-size: var(--font-sizes-lg);
+  }
+
+  .font_bold {
+    font-weight: var(--font-weights-bold);
+  }
+
+  .ml_auto {
+    margin-left: auto;
+  }
+
+  .px_2 {
+    padding-inline: var(--spacing-2);
+  }
+
+  .cursor_pointer {
+    cursor: pointer;
+  }
+}

package/styled-system/chunks/src__components__analyzer__data-table.css

@@ -0,0 +1,37 @@
+@layer utilities {
+  .font_bold {
+    font-weight: var(--font-weights-bold);
+  }
+
+  .fs_lg {
+    font-size: var(--font-sizes-lg);
+  }
+
+  .mb_2 {
+    margin-bottom: var(--spacing-2);
+  }
+
+  .d_grid {
+    display: grid;
+  }
+
+  .gap_10px {
+    gap: 10px;
+  }
+
+  .w_full {
+    width: var(--sizes-full);
+  }
+
+  .d_flex {
+    display: flex;
+  }
+
+  .flex_column {
+    flex-direction: column;
+  }
+
+  .gap_2 {
+    gap: var(--spacing-2);
+  }
+}

package/styled-system/chunks/src__components__analyzer__file-details.css

@@ -0,0 +1,103 @@
+@layer utilities {
+  .ml_auto {
+    margin-left: auto;
+  }
+
+  .p_4 {
+    padding: var(--spacing-4);
+  }
+
+  .justify_center {
+    justify-content: center;
+  }
+
+  .fs_xl {
+    font-size: var(--font-sizes-xl);
+  }
+
+  .p_16 {
+    padding: var(--spacing-16);
+  }
+
+  .mt_8 {
+    margin-top: var(--spacing-8);
+  }
+
+  .mt_1 {
+    margin-top: var(--spacing-1);
+  }
+
+  .font_bold {
+    font-weight: var(--font-weights-bold);
+  }
+
+  .mb_4 {
+    margin-bottom: var(--spacing-4);
+  }
+
+  .py_2 {
+    padding-block: var(--spacing-2);
+  }
+
+  .px_4 {
+    padding-inline: var(--spacing-4);
+  }
+
+  .transition_all_0\.2s_ease {
+    transition: all 0.2s ease;
+  }
+
+  .hover\:bg_gray\.100 {
+    &:where(:hover, [data-hover]) {
+      background-color: var(--colors-gray-100);
+    }
+  }
+
+  .d_inline-flex {
+    display: inline-flex;
+  }
+
+  .items_center {
+    align-items: center;
+  }
+
+  .opacity_0\.5 {
+    opacity: 0.5;
+  }
+
+  .border-b_1px_solid_transparent {
+    border-bottom: 1px solid transparent;
+  }
+
+  .cursor_pointer {
+    cursor: pointer;
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .d_flex {
+    display: flex;
+  }
+
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+  }
+
+  .gap_2 {
+    gap: var(--spacing-2);
+  }
+
+  .mt_4 {
+    margin-top: var(--spacing-4);
+  }
+}

package/styled-system/chunks/src__components__analyzer__quick-tooltip.css

@@ -0,0 +1,2 @@
+@layer utilities {
+}

package/styled-system/chunks/src__components__analyzer__report-item-columns.css

@@ -0,0 +1,29 @@
+@layer utilities {
+  .p_2 {
+    padding: var(--spacing-2);
+  }
+
+  .bg_white {
+    background-color: var(--colors-white);
+  }
+
+  .border_1px_solid_rgba\(0\,_0\,_0\,_0\.1\) {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .mr_2 {
+    margin-right: var(--spacing-2);
+  }
+
+  .select_none {
+    user-select: none;
+  }
+
+  .d_flex {
+    display: flex;
+  }
+
+  .items_center {
+    align-items: center;
+  }
+}

package/styled-system/chunks/src__components__analyzer__report-item-link.css

@@ -0,0 +1,109 @@
+@layer utilities {
+  .d_flex {
+    display: flex;
+  }
+
+  .pos_relative {
+    position: relative;
+  }
+
+  .max-w_14px {
+    max-width: 14px;
+  }
+
+  .shrink_0 {
+    flex-shrink: 0;
+  }
+
+  .p_2 {
+    padding: var(--spacing-2);
+  }
+
+  .bg_white {
+    background-color: var(--colors-white);
+  }
+
+  .border_1px_solid_rgba\(0\,_0\,_0\,_0\.1\) {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .text_red\.400 {
+    color: var(--colors-red-400);
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .d_inline-flex {
+    display: inline-flex;
+  }
+
+  .items_center {
+    align-items: center;
+  }
+
+  .opacity_0\.5 {
+    opacity: 0.5;
+  }
+
+  .border-b_1px_solid_transparent {
+    border-bottom: 1px solid transparent;
+  }
+
+  .cursor_pointer {
+    cursor: pointer;
+  }
+
+  .hover\:opacity_1 {
+    &:where(:hover, [data-hover]) {
+      opacity: 1;
+    }
+  }
+
+  .hover\:border-b_black {
+    &:where(:hover, [data-hover]) {
+      border-bottom-color: var(--colors-black);
+    }
+  }
+
+  .self_flex-start {
+    align-self: flex-start;
+  }
+
+  .mr_2 {
+    margin-right: var(--spacing-2);
+  }
+}