mirror of
https://github.com/penpot/penpot.git
synced 2025-01-21 06:02:32 -05:00
Add initial working export tokens-json
This commit is contained in:
Akshay Gupta
parent
4c236ab423
commit
62fc2cf652
4 changed files with 245 additions and 2 deletions
|
|
@ -273,5 +273,171 @@
|
|||
(binding [cfeat/*current* cfeat/default-features]
|
||||
(File. (fb/create-file name))))
|
||||
|
||||
(def tokens-json
|
||||
{:core
|
||||
{:dimension
|
||||
{:scale {:value "2" :type "dimension"}
|
||||
:xs {:value "4" :type "dimension"}
|
||||
:sm {:value "{dimension.xs} * {dimension.scale}" :type "dimension"}
|
||||
:md {:value "{dimension.sm} * {dimension.scale}" :type "dimension"}
|
||||
:lg {:value "{dimension.md} * {dimension.scale}" :type "dimension"}
|
||||
:xl {:value "{dimension.lg} * {dimension.scale}" :type "dimension"}}
|
||||
:spacing
|
||||
{:xs {:value "{dimension.xs}" :type "spacing"}
|
||||
:sm {:value "{dimension.sm}" :type "spacing"}
|
||||
:md {:value "{dimension.md}" :type "spacing"}
|
||||
:lg {:value "{dimension.lg}" :type "spacing"}
|
||||
:xl {:value "{dimension.xl}" :type "spacing"}
|
||||
:multi-value {:value "{dimension.sm} {dimension.xl}" :type "spacing"
|
||||
:description "You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens"}}
|
||||
:borderRadius
|
||||
{:sm {:value "4" :type "borderRadius"}
|
||||
:lg {:value "8" :type "borderRadius"}
|
||||
:xl {:value "16" :type "borderRadius"}
|
||||
:multi-value {:value "{borderRadius.sm} {borderRadius.lg}" :type "borderRadius"
|
||||
:description "You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values"}}
|
||||
:colors
|
||||
{:black {:value "#000000" :type "color"}
|
||||
:white {:value "#ffffff" :type "color"}
|
||||
:gray
|
||||
{"100" {:value "#f7fafc" :type "color"}
|
||||
"200" {:value "#edf2f7" :type "color"}
|
||||
"300" {:value "#e2e8f0" :type "color"}
|
||||
"400" {:value "#cbd5e0" :type "color"}
|
||||
"500" {:value "#a0aec0" :type "color"}
|
||||
"600" {:value "#718096" :type "color"}
|
||||
"700" {:value "#4a5568" :type "color"}
|
||||
"800" {:value "#2d3748" :type "color"}
|
||||
"900" {:value "#1a202c" :type "color"}}
|
||||
:red
|
||||
{"100" {:value "#fff5f5" :type "color"}
|
||||
"200" {:value "#fed7d7" :type "color"}
|
||||
"300" {:value "#feb2b2" :type "color"}
|
||||
"400" {:value "#fc8181" :type "color"}
|
||||
"500" {:value "#f56565" :type "color"}
|
||||
"600" {:value "#e53e3e" :type "color"}
|
||||
"700" {:value "#c53030" :type "color"}
|
||||
"800" {:value "#9b2c2c" :type "color"}
|
||||
"900" {:value "#742a2a" :type "color"}}
|
||||
:orange
|
||||
{"100" {:value "#fffaf0" :type "color"}
|
||||
"200" {:value "#feebc8" :type "color"}
|
||||
"300" {:value "#fbd38d" :type "color"}
|
||||
"400" {:value "#f6ad55" :type "color"}
|
||||
"500" {:value "#ed8936" :type "color"}
|
||||
"600" {:value "#dd6b20" :type "color"}
|
||||
"700" {:value "#c05621" :type "color"}
|
||||
"800" {:value "#9c4221" :type "color"}
|
||||
"900" {:value "#7b341e" :type "color"}}
|
||||
:yellow
|
||||
{"100" {:value "#fffff0" :type "color"}
|
||||
"200" {:value "#fefcbf" :type "color"}
|
||||
"300" {:value "#faf089" :type "color"}
|
||||
"400" {:value "#f6e05e" :type "color"}
|
||||
"500" {:value "#ecc94b" :type "color"}
|
||||
"600" {:value "#d69e2e" :type "color"}
|
||||
"700" {:value "#b7791f" :type "color"}
|
||||
"800" {:value "#975a16" :type "color"}
|
||||
"900" {:value "#744210" :type "color"}}
|
||||
:green
|
||||
{"100" {:value "#f0fff4" :type "color"}
|
||||
"200" {:value "#c6f6d5" :type "color"}
|
||||
"300" {:value "#9ae6b4" :type "color"}
|
||||
"400" {:value "#68d391" :type "color"}
|
||||
"500" {:value "#48bb78" :type "color"}
|
||||
"600" {:value "#38a169" :type "color"}
|
||||
"700" {:value "#2f855a" :type "color"}
|
||||
"800" {:value "#276749" :type "color"}
|
||||
"900" {:value "#22543d" :type "color"}}
|
||||
:teal
|
||||
{"100" {:value "#e6fffa" :type "color"}
|
||||
"200" {:value "#b2f5ea" :type "color"}
|
||||
"300" {:value "#81e6d9" :type "color"}
|
||||
"400" {:value "#4fd1c5" :type "color"}
|
||||
"500" {:value "#38b2ac" :type "color"}
|
||||
"600" {:value "#319795" :type "color"}
|
||||
"700" {:value "#2c7a7b" :type "color"}
|
||||
"800" {:value "#285e61" :type "color"}
|
||||
"900" {:value "#234e52" :type "color"}}
|
||||
:blue
|
||||
{"100" {:value "#ebf8ff" :type "color"}
|
||||
"200" {:value "#bee3f8" :type "color"}
|
||||
"300" {:value "#90cdf4" :type "color"}
|
||||
"400" {:value "#63b3ed" :type "color"}
|
||||
"500" {:value "#4299e1" :type "color"}
|
||||
"600" {:value "#3182ce" :type "color"}
|
||||
"700" {:value "#2b6cb0" :type "color"}
|
||||
"800" {:value "#2c5282" :type "color"}
|
||||
"900" {:value "#2a4365" :type "color"}}
|
||||
:indigo
|
||||
{"100" {:value "#ebf4ff" :type "color"}
|
||||
"200" {:value "#c3dafe" :type "color"}
|
||||
"300" {:value "#a3bffa" :type "color"}
|
||||
"400" {:value "#7f9cf5" :type "color"}
|
||||
"500" {:value "#667eea" :type "color"}
|
||||
"600" {:value "#5a67d8" :type "color"}
|
||||
"700" {:value "#4c51bf" :type "color"}
|
||||
"800" {:value "#434190" :type "color"}
|
||||
"900" {:value "#3c366b" :type "color"}}
|
||||
:purple
|
||||
{"100" {:value "#faf5ff" :type "color"}
|
||||
"200" {:value "#e9d8fd" :type "color"}
|
||||
"300" {:value "#d6bcfa" :type "color"}
|
||||
"400" {:value "#b794f4" :type "color"}
|
||||
"500" {:value "#9f7aea" :type "color"}
|
||||
"600" {:value "#805ad5" :type "color"}
|
||||
"700" {:value "#6b46c1" :type "color"}
|
||||
"800" {:value "#553c9a" :type "color"}
|
||||
"900" {:value "#44337a" :type "color"}}
|
||||
:pink
|
||||
{"100" {:value "#fff5f7" :type "color"}
|
||||
"200" {:value "#fed7e2" :type "color"}
|
||||
"300" {:value "#fbb6ce" :type "color"}
|
||||
"400" {:value "#f687b3" :type "color"}
|
||||
"500" {:value "#ed64a6" :type "color"}
|
||||
"600" {:value "#d53f8c" :type "color"}
|
||||
"700" {:value "#b83280" :type "color"}
|
||||
"800" {:value "#97266d" :type "color"}
|
||||
"900" {:value "#702459" :type "color"}}}
|
||||
:opacity
|
||||
{:low {:value "10%" :type "opacity"}
|
||||
:md {:value "50%" :type "opacity"}
|
||||
:high {:value "90%" :type "opacity"}}
|
||||
:fontFamilies
|
||||
{:heading {:value "Inter" :type "fontFamilies"}
|
||||
:body {:value "Roboto" :type "fontFamilies"}}
|
||||
:lineHeights
|
||||
{:heading {:value "110%" :type "lineHeights"}
|
||||
:body {:value "140%" :type "lineHeights"}}
|
||||
:letterSpacing
|
||||
{:default {:value "0" :type "letterSpacing"}
|
||||
:increased {:value "150%" :type "letterSpacing"}
|
||||
:decreased {:value "-5%" :type "letterSpacing"}}
|
||||
:paragraphSpacing
|
||||
{:h1 {:value "32" :type "paragraphSpacing"}
|
||||
:h2 {:value "26" :type "paragraphSpacing"}}
|
||||
:fontWeights
|
||||
{:headingRegular {:value "Regular" :type "fontWeights"}
|
||||
:headingBold {:value "Bold" :type "fontWeights"}
|
||||
:bodyRegular {:value "Regular" :type "fontWeights"}
|
||||
:bodyBold {:value "Bold" :type "fontWeights"}}
|
||||
:fontSizes
|
||||
{:h1 {:value "{fontSizes.h2} * 1.25" :type "fontSizes"}
|
||||
:h2 {:value "{fontSizes.h3} * 1.25" :type "fontSizes"}
|
||||
:h3 {:value "{fontSizes.h4} * 1.25" :type "fontSizes"}
|
||||
:h4 {:value "{fontSizes.h5} * 1.25" :type "fontSizes"}
|
||||
:h5 {:value "{fontSizes.h6} * 1.25" :type "fontSizes"}
|
||||
:h6 {:value "{fontSizes.body} * 1" :type "fontSizes"}
|
||||
:body {:value "16" :type "fontSizes"}
|
||||
:sm {:value "{fontSizes.body} * 0.85" :type "fontSizes"}
|
||||
:xs {:value "{fontSizes.body} * 0.65" :type "fontSizes"}}}})
|
||||
|
||||
(defn export-tokens-file [tokens-json]
|
||||
(let [file-name "tokens.json"
|
||||
file-content (json/encode-tokens tokens-json)
|
||||
blob (wapi/create-blob (clj->js file-content) "application/json")]
|
||||
(dom/trigger-download file-name blob)))
|
||||
|
||||
(defn exports []
|
||||
#js {:createFile create-file-export})
|
||||
#js {:createFile create-file-export
|
||||
:exportTokens export-tokens-file})
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.libs.file-builder :as fb]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.tokens :as dt]
|
||||
[app.main.refs :as refs]
|
||||
|
|
@ -25,6 +26,32 @@
|
|||
(def lens:token-type-open-status
|
||||
(l/derived (l/in [:workspace-tokens :open-status]) st/state))
|
||||
|
||||
(def ^:private download-icon
|
||||
(i/icon-xref :download (stl/css :download-icon)))
|
||||
|
||||
(defn transform-tokens [tokens]
|
||||
(let [grouped-tokens (group-by (comp keyword :type second) tokens)
|
||||
map-token (fn [[_ token]]
|
||||
[(keyword (:name token))
|
||||
{:value (:value token)
|
||||
:type (:type token)}])]
|
||||
(js/console.log grouped-tokens)
|
||||
(js/console.log map-token)
|
||||
{:core (into (sorted-map)
|
||||
(map (fn [[type tokens]]
|
||||
[type
|
||||
(into (sorted-map)
|
||||
(map map-token tokens))])
|
||||
grouped-tokens))}))
|
||||
|
||||
(defn download-tokens-as-json []
|
||||
(let [all-tokens (deref refs/workspace-tokens)
|
||||
transformed-tokens-json (transform-tokens all-tokens)]
|
||||
(js/console.log transformed-tokens-json)
|
||||
(fb/export-tokens-file transformed-tokens-json)))
|
||||
|
||||
|
||||
|
||||
(mf/defc token-pill
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [on-click token highlighted? on-context-menu]}]
|
||||
|
|
@ -163,4 +190,10 @@
|
|||
::mf/wrap-props false}
|
||||
[_props]
|
||||
[:div {:class (stl/css :sidebar-tab-wrapper)}
|
||||
[:& tokens-explorer]])
|
||||
[:& tokens-explorer]
|
||||
[:button {:class (stl/css :download-json-button)
|
||||
:on-click download-tokens-as-json} "Download Tokens as JSON"
|
||||
[:span.separator]
|
||||
download-icon]
|
||||
])
|
||||
|
||||
|
|
@ -49,3 +49,41 @@
|
|||
// Align better with the label
|
||||
translate: 0px -1px;
|
||||
}
|
||||
|
||||
.download-json-button {
|
||||
position: absolute;
|
||||
bottom: $s-12;
|
||||
right: $s-12;
|
||||
padding: $s-8 $s-16;
|
||||
font-size: $fs-12;
|
||||
background-color: var(--button-primary-background-color-rest);
|
||||
color: var(--button-primary-foreground-color-rest);
|
||||
border: none;
|
||||
border-radius: $br-4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-primary-background-color-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--button-primary-background-color-active);
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
width:20px;
|
||||
height:20px;
|
||||
margin-left: $s-8;
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: 16px;
|
||||
width: 1px;
|
||||
background-color: var(--button-primary-foreground-color-rest);
|
||||
margin-left: $s-8;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,3 +17,9 @@
|
|||
(-> data
|
||||
(clj->js)
|
||||
(js/JSON.stringify)))
|
||||
|
||||
(defn encode-tokens
|
||||
[data]
|
||||
(-> data
|
||||
(clj->js)
|
||||
(js/JSON.stringify nil 2)))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue