@pandacss/studio 0.0.0-dev-20230613163214

package/styled-system/chunks/src__components__token-analyzer.css

@@ -0,0 +1,227 @@
+@layer utilities {
+  .py_20px {
+    padding-block: 20px;
+  }
+
+  .p_4px_8px {
+    padding: 4px 8px;
+  }
+
+  .bg_white {
+    background: var(--colors-white);
+  }
+
+  .list-style_none {
+    list-style: none;
+  }
+
+  .p_4 {
+    padding: var(--spacing-4);
+  }
+
+  .hover\:bg_gray\.50 {
+    &:where(:hover, [data-hover]) {
+      background-color: var(--colors-gray-50);
+    }
+  }
+
+  .px_24 {
+    padding-inline: var(--spacing-24);
+  }
+
+  .w_100\% {
+    width: 100%;
+  }
+
+  .w_26px {
+    width: 26px;
+  }
+
+  .ml_auto {
+    margin-left: auto;
+  }
+
+  .mt_8 {
+    margin-top: var(--spacing-8);
+  }
+
+  .fs_xl {
+    font-size: var(--font-sizes-xl);
+  }
+
+  .bg_gray\.100 {
+    background: var(--colors-gray-100);
+  }
+
+  .border_1px_solid_rgba\(0\,_0\,_0\,_0\.1\) {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .rounded_md {
+    border-radius: var(--radii-md);
+  }
+
+  .fs_md {
+    font-size: var(--font-sizes-md);
+  }
+
+  .font_bold {
+    font-weight: var(--font-weights-bold);
+  }
+
+  .ml_2 {
+    margin-left: var(--spacing-2);
+  }
+
+  .d_inline-block {
+    display: inline-block;
+  }
+
+  .bg_gray\.50 {
+    background: var(--colors-gray-50);
+  }
+
+  .p_0 {
+    padding: 0;
+  }
+
+  .hover\:bg_gray\.100 {
+    &:where(:hover, [data-hover]) {
+      background-color: var(--colors-gray-100);
+    }
+  }
+
+  .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: var(--colors-gray-100);
+    }
+  }
+
+  .bg_none {
+    background: none;
+  }
+
+  .p_2 {
+    padding: var(--spacing-2);
+  }
+
+  .gap_10px {
+    gap: 10px;
+  }
+
+  .mb_4 {
+    margin-bottom: var(--spacing-4);
+  }
+
+  .p_20px {
+    padding: 20px;
+  }
+
+  .fs_lg {
+    font-size: var(--font-sizes-lg);
+  }
+
+  .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);
+    }
+  }
+
+  .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);
+    }
+  }
+
+  .gap_4 {
+    gap: var(--spacing-4);
+  }
+
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+  }
+
+  .mt_4 {
+    margin-top: var(--spacing-4);
+  }
+
+  .d_flex {
+    display: flex;
+  }
+
+  .flex_column {
+    flex-direction: column;
+  }
+
+  .gap_2 {
+    gap: var(--spacing-2);
+  }
+
+  .px_2 {
+    padding-inline: var(--spacing-2);
+  }
+
+  .fs_sm {
+    font-size: var(--font-sizes-sm);
+  }
+
+  .w_full {
+    width: var(--sizes-full);
+  }
+}

package/styled-system/chunks/src__components__token-content.css

@@ -0,0 +1,13 @@
+@layer utilities {
+  .d_flex {
+    display: flex;
+  }
+
+  .flex_column {
+    flex-direction: column;
+  }
+
+  .gap_12 {
+    gap: var(--spacing-12);
+  }
+}

package/styled-system/chunks/src__components__token-group.css

@@ -0,0 +1,21 @@
+@layer utilities {
+  .d_flex {
+    display: flex;
+  }
+
+  .flex_column {
+    flex-direction: column;
+  }
+
+  .gap_3 {
+    gap: var(--spacing-3);
+  }
+
+  .w_full {
+    width: var(--sizes-full);
+  }
+
+  .mt_5 {
+    margin-top: var(--spacing-5);
+  }
+}

package/styled-system/chunks/src__components__token-search-combobox.css

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

package/styled-system/chunks/src__components__typography-playground.css

@@ -0,0 +1,61 @@
+@layer utilities {
+  .bg_card {
+    background: var(--colors-card);
+  }
+
+  .ring_0 {
+    outline: 0;
+  }
+
+  .pt_28 {
+    padding-top: var(--spacing-28);
+  }
+
+  .pb_28 {
+    padding-bottom: var(--spacing-28);
+  }
+
+  .mx_auto {
+    margin-inline: auto;
+  }
+
+  .w_fit-content {
+    width: fit-content;
+  }
+
+  .items_center {
+    align-items: center;
+  }
+
+  .gap_1\.5 {
+    gap: var(--spacing-1\.5);
+  }
+
+  .white-space_nowrap {
+    white-space: nowrap;
+  }
+
+  .w_48 {
+    width: var(--sizes-48);
+  }
+
+  .text_capitalize {
+    text-transform: capitalize;
+  }
+
+  .mr_2 {
+    margin-right: var(--spacing-2);
+  }
+
+  .d_flex {
+    display: flex;
+  }
+
+  .flex_column {
+    flex-direction: column;
+  }
+
+  .gap_4 {
+    gap: var(--spacing-4);
+  }
+}

package/styled-system/chunks/src__layouts__Layout.css

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

package/styled-system/chunks/src__layouts__Sidebar.css

@@ -0,0 +1,113 @@
+@layer utilities {
+  .h_calc\(100vh_-_env\(safe-area-inset-bottom\)\) {
+    height: calc(100vh - env(safe-area-inset-bottom));
+  }
+
+  .font_bold {
+    font-weight: var(--font-weights-bold);
+  }
+
+  .fs_2xl {
+    font-size: var(--font-sizes-2xl);
+  }
+
+  .gap_2 {
+    gap: var(--spacing-2);
+  }
+
+  .w_16 {
+    width: var(--sizes-16);
+  }
+
+  .mt_4 {
+    margin-top: var(--spacing-4);
+  }
+
+  .pt_14 {
+    padding-top: var(--spacing-14);
+  }
+
+  .pb_8 {
+    padding-bottom: var(--spacing-8);
+  }
+
+  .fs_3xl {
+    font-size: var(--font-sizes-3xl);
+  }
+
+  .font_semibold {
+    font-weight: var(--font-weights-semibold);
+  }
+
+  .mb_8 {
+    margin-bottom: var(--spacing-8);
+  }
+
+  .tracking_tight {
+    letter-spacing: var(--letter-spacings-tight);
+  }
+
+  .d_flex {
+    display: flex;
+  }
+
+  .flex_column {
+    flex-direction: column;
+  }
+
+  .gap_10px {
+    gap: 10px;
+  }
+
+  .h_full {
+    height: var(--sizes-full);
+  }
+
+  .min-w_60 {
+    min-width: var(--sizes-60);
+  }
+
+  .overflow_auto {
+    overflow: auto;
+  }
+
+  .px_12 {
+    padding-inline: var(--spacing-12);
+  }
+
+  .py_8 {
+    padding-block: var(--spacing-8);
+  }
+
+  .pos_relative {
+    position: relative;
+  }
+
+  .max-w_8xl {
+    max-width: var(--sizes-8xl);
+  }
+
+  .mx_auto {
+    margin-inline: auto;
+  }
+
+  .px_4 {
+    padding-inline: var(--spacing-4);
+  }
+
+  .w_full {
+    width: var(--sizes-full);
+  }
+
+  .md\:px_6 {
+    @media screen and (min-width: 768px) {
+      padding-inline: var(--spacing-6);
+    }
+  }
+
+  .lg\:px_8 {
+    @media screen and (min-width: 1024px) {
+      padding-inline: var(--spacing-8);
+    }
+  }
+}

package/styled-system/chunks/src__pages__colors.css

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

package/styled-system/chunks/src__pages__font-sizes.css

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

package/styled-system/chunks/src__pages__font-weights.css

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

package/styled-system/chunks/src__pages__fonts.css

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

package/styled-system/chunks/src__pages__index.css

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

package/styled-system/chunks/src__pages__layer-styles.css

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

package/styled-system/chunks/src__pages__letter-spacings.css

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

package/styled-system/chunks/src__pages__line-heights.css

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

package/styled-system/chunks/src__pages__playground__contrast-checker.css

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

package/styled-system/chunks/src__pages__playground__typography.css

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

package/styled-system/chunks/src__pages__radii.css

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

package/styled-system/chunks/src__pages__sizes.css

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

package/styled-system/chunks/src__pages__spacing.css

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

package/styled-system/chunks/src__pages__text-styles.css

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

package/styled-system/chunks/src__pages__token-analyzer__file.css

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

package/styled-system/chunks/src__pages__token-analyzer__index.css

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

package/styled-system/chunks/src__pages__token-analyzer__utility.css

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

package/styled-system/css/conditions.mjs

@@ -0,0 +1,147 @@
+import { withoutSpace } from '../helpers.mjs'
+
+const conditions = new Set([
+  '_hover',
+  '_focus',
+  '_focusWithin',
+  '_focusVisible',
+  '_disabled',
+  '_active',
+  '_visited',
+  '_target',
+  '_readOnly',
+  '_readWrite',
+  '_empty',
+  '_checked',
+  '_enabled',
+  '_expanded',
+  '_highlighted',
+  '_before',
+  '_after',
+  '_firstLetter',
+  '_firstLine',
+  '_marker',
+  '_selection',
+  '_file',
+  '_backdrop',
+  '_first',
+  '_last',
+  '_only',
+  '_even',
+  '_odd',
+  '_firstOfType',
+  '_lastOfType',
+  '_onlyOfType',
+  '_peerFocus',
+  '_peerHover',
+  '_peerActive',
+  '_peerFocusWithin',
+  '_peerFocusVisible',
+  '_peerDisabled',
+  '_peerChecked',
+  '_peerInvalid',
+  '_peerExpanded',
+  '_peerPlaceholderShown',
+  '_groupFocus',
+  '_groupHover',
+  '_groupActive',
+  '_groupFocusWithin',
+  '_groupFocusVisible',
+  '_groupDisabled',
+  '_groupChecked',
+  '_groupExpanded',
+  '_groupInvalid',
+  '_indeterminate',
+  '_required',
+  '_valid',
+  '_invalid',
+  '_autofill',
+  '_inRange',
+  '_outOfRange',
+  '_placeholder',
+  '_placeholderShown',
+  '_pressed',
+  '_selected',
+  '_default',
+  '_optional',
+  '_open',
+  '_fullscreen',
+  '_loading',
+  '_currentPage',
+  '_currentStep',
+  '_motionReduce',
+  '_motionSafe',
+  '_print',
+  '_landscape',
+  '_portrait',
+  '_dark',
+  '_light',
+  '_osDark',
+  '_osLight',
+  '_highConstrast',
+  '_lessContrast',
+  '_moreContrast',
+  '_ltr',
+  '_rtl',
+  '_scrollbar',
+  '_scrollbarThumb',
+  '_scrollbarTrack',
+  '_horizontal',
+  '_vertical',
+  'sm',
+  'smOnly',
+  'smDown',
+  'md',
+  'mdOnly',
+  'mdDown',
+  'lg',
+  'lgOnly',
+  'lgDown',
+  'xl',
+  'xlOnly',
+  'xlDown',
+  '2xl',
+  '2xlOnly',
+  'smToMd',
+  'smToLg',
+  'smToXl',
+  'smTo2xl',
+  'mdToLg',
+  'mdToXl',
+  'mdTo2xl',
+  'lgToXl',
+  'lgTo2xl',
+  'xlTo2xl',
+  'base',
+])
+
+export function isCondition(value) {
+  return conditions.has(value) || /^@|&|&$/.test(value)
+}
+
+const underscoreRegex = /^_/
+const selectorRegex = /&|@/
+
+export function finalizeConditions(paths) {
+  return paths.map((path) => {
+    if (conditions.has(path)) {
+      return path.replace(underscoreRegex, '')
+    }
+
+    if (selectorRegex.test(path)) {
+      return `[${withoutSpace(path.trim())}]`
+    }
+
+    return path
+  })
+}
+
+export function sortConditions(paths) {
+  return paths.sort((a, b) => {
+    const aa = isCondition(a)
+    const bb = isCondition(b)
+    if (aa && !bb) return 1
+    if (!aa && bb) return -1
+    return 0
+  })
+}

package/styled-system/css/css.d.ts

@@ -0,0 +1,2 @@
+import type { SystemStyleObject } from '../types'
+export declare function css(styles: SystemStyleObject): string