@pandacss/studio 0.17.3 → 0.17.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pandacss/studio",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.4",
|
|
4
4
|
"description": "The automated token documentation for Panda CSS",
|
|
5
5
|
"main": "dist/studio.js",
|
|
6
6
|
"module": "dist/studio.mjs",
|
|
@@ -43,12 +43,12 @@
|
|
|
43
43
|
"react": "18.2.0",
|
|
44
44
|
"react-dom": "18.2.0",
|
|
45
45
|
"vite": "4.4.11",
|
|
46
|
-
"@pandacss/config": "0.17.
|
|
47
|
-
"@pandacss/logger": "0.17.
|
|
48
|
-
"@pandacss/node": "0.17.
|
|
49
|
-
"@pandacss/shared": "0.17.
|
|
50
|
-
"@pandacss/token-dictionary": "0.17.
|
|
51
|
-
"@pandacss/types": "0.17.
|
|
46
|
+
"@pandacss/config": "0.17.4",
|
|
47
|
+
"@pandacss/logger": "0.17.4",
|
|
48
|
+
"@pandacss/node": "0.17.4",
|
|
49
|
+
"@pandacss/shared": "0.17.4",
|
|
50
|
+
"@pandacss/token-dictionary": "0.17.4",
|
|
51
|
+
"@pandacss/types": "0.17.4"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@types/react": "18.2.22",
|
|
@@ -1,14 +1,26 @@
|
|
|
1
1
|
import { Flex, panda } from '../../styled-system/jsx'
|
|
2
2
|
import { ColorWrapper } from './color-wrapper'
|
|
3
|
+
import context from '../lib/panda.context'
|
|
4
|
+
|
|
5
|
+
const getSemanticColorValue = (variable: string): string => {
|
|
6
|
+
const name = variable.match(/var\(\s*--(.*?)\s*\)/)![1].replaceAll('-', '.')
|
|
7
|
+
const token = context.tokens.getByName(name)
|
|
8
|
+
if (token) return token.originalValue
|
|
9
|
+
const defaultToken = context.tokens.getByName(`${name}.default`)
|
|
10
|
+
return getSemanticColorValue(defaultToken?.value)
|
|
11
|
+
}
|
|
3
12
|
|
|
4
13
|
// remove initial underscore
|
|
5
14
|
const cleanCondition = (condition: string) => condition.replace(/^_/, '')
|
|
6
15
|
|
|
7
16
|
export function SemanticColorDisplay(props: { value: string; condition: string; token?: string }) {
|
|
8
17
|
const { value, condition, token } = props
|
|
18
|
+
|
|
19
|
+
const tokenValue = getSemanticColorValue(value)
|
|
20
|
+
|
|
9
21
|
return (
|
|
10
22
|
<Flex direction="column" w="full">
|
|
11
|
-
<ColorWrapper height="12" style={{ background:
|
|
23
|
+
<ColorWrapper height="12" style={{ background: tokenValue }}>
|
|
12
24
|
<panda.span
|
|
13
25
|
fontWeight="medium"
|
|
14
26
|
fontSize="sm"
|
|
@@ -26,7 +38,7 @@ export function SemanticColorDisplay(props: { value: string; condition: string;
|
|
|
26
38
|
</ColorWrapper>
|
|
27
39
|
{token && <panda.div fontWeight="medium">{token}</panda.div>}
|
|
28
40
|
<panda.div opacity="0.7" fontSize="sm" textTransform="uppercase">
|
|
29
|
-
{value}
|
|
41
|
+
{value} - {tokenValue}
|
|
30
42
|
</panda.div>
|
|
31
43
|
</Flex>
|
|
32
44
|
)
|