diff --git a/Cargo.toml b/Cargo.toml index 7dc0f06..6d4a2fc 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "design_token_parser" -version = "3.0.0" +version = "3.1.0" edition = "2021" repository = "https://github.com/vrrashkov/TokenParser" readme = "README.md" diff --git a/README.md b/README.md index 4d343c7..fbd250f 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,8 @@ Token Parser is a universal tool for generating runnable code for any language f 2. [Figma Studio Tokens](https://github.com/tokens-studio/figma-plugin) +3. [lukasoppermann/design-tokens]([GitHub - lukasoppermann/design-tokens: 🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.](https://github.com/lukasoppermann/design-tokens)) + > You can use tokens from multiple sources as long as they are with the correct json structure! ## Setup @@ -61,51 +63,79 @@ global: # Look at the figma/variables and figma/generated_styles for better understanding how it works figma_source_paths: - combine: + file_name: "button-lg" files: - - "assets/figma/variables/color-light.json" - - "assets/figma/variables/color-dark.json" + - "assets/figma/variables/button-lg.json" + - "assets/figma/variables/core-.json" - combine: + file_name: "button-md" files: - - "assets/figma/variables/button-md.json" - - "assets/figma/variables/core.json" + - "assets/figma/variables/button-md.json" + - "assets/figma/variables/core-.json" - combine: + file_name: "button-sm" files: - - "assets/figma/variables/button-big.json" - - "assets/figma/variables/core.json" - # file_name: If set this will be the name of the merged file - # if not, than the first file name will be used - figma_output_paths: + - "assets/figma/variables/button-sm.json" + - "assets/figma/variables/core-.json" - combine: file_name: "color-light" files: + - "assets/figma/variables/color-accent-primary.json" + - "assets/figma/variables/color-accent-secondary.json" + - "assets/figma/variables/color-status-success.json" + - "assets/figma/variables/color-status-danger.json" - "assets/figma/variables/color-light.json" + - "assets/figma/variables/palette-.json" - combine: file_name: "color-dark" files: + - "assets/figma/variables/color-accent-primary.json" + - "assets/figma/variables/color-accent-secondary.json" + - "assets/figma/variables/color-status-success.json" + - "assets/figma/variables/color-status-danger.json" - "assets/figma/variables/color-dark.json" + - "assets/figma/variables/palette-.json" + # file_name: If set this will be the name of the merged file + # if not, than the first file name will be used + figma_output_paths: - combine: - file_name: "button-md" - files: - - "assets/figma/variables/button-md.json" - - combine: - file_name: "button-big" + file_name: "button-lg" files: - - "assets/figma/variables/button-big.json" - # Generated files - # You can combine multiple files also - output_paths: + - path: "assets/figma/variables/button-lg.json" - combine: + file_name: "button-md" files: - - "color-light" + - path: "assets/figma/variables/button-md.json" - combine: + file_name: "button-sm" files: - - "color-dark" + - path: "assets/figma/variables/button-sm.json" - combine: + file_name: "color-light" files: - - "button-md" + - path: "assets/figma/variables/color-accent-primary.json" + # if mode is set this will wrap the whole json object with a parent of the mode's value + # this helps if you have similar trees in multiple files + mode: "primary" + - path: "assets/figma/variables/color-accent-secondary.json" + mode: "secondary" + - path: "assets/figma/variables/color-status-success.json" + mode: "success" + - path: "assets/figma/variables/color-status-danger.json" + mode: "danger" + - path: "assets/figma/variables/color-light.json" - combine: + file_name: "color-dark" files: - - "button-big" + - path: "assets/figma/variables/color-accent-primary.json" + mode: "primary" + - path: "assets/figma/variables/color-accent-secondary.json" + mode: "secondary" + - path: "assets/figma/variables/color-status-success.json" + mode: "success" + - path: "assets/figma/variables/color-status-danger.json" + mode: "danger" + - path: "assets/figma/variables/color-dark.json" #Output path style_output_path: "assets/generated_styles/" ``` @@ -223,6 +253,10 @@ Both type of jsons are valid and represent the same structure becase of the forw value: "public static let {{variable_name | camel}} = CGFloat({{value | as_text_or_number}}) {{description | optional: '// desc = %value'}}" ``` +```swift +public static let xl = CGFloat(56) +``` + --- ```json @@ -243,6 +277,10 @@ Both type of jsons are valid and represent the same structure becase of the forw value: "public static let {{variable_name | camel}} = TextStyle(name: \"{{fontFamily}}\", size: {{fontSize}}, weight: TextStyle.Weight({{fontWeight | as_text_or_number}}), lineHeight: {{lineHeight}})" ``` +```swift +public static let bold = TextStyle(name: "Noir Pro", size: 16, weight: TextStyle.Weight("Bold"), lineHeight: 23) +``` + --- ```json @@ -272,12 +310,125 @@ Both type of jsons are valid and represent the same structure becase of the forw ```yaml - type: boxShadow value: - - "{{variable_name}} {{color-0 | color: 'hex'}} blur: {{blur-0}} x: {{x-0}}" - - "{{variable_name}} {{color-0 | color: 'hex'}} {{color-1 | color: 'hex'}} blur: {{blur-0}} x: {{x-0}} blur: {{blur-1}} x: {{x-1}}" + - "public static let {{variable_name | camel}} = Shadow(x: CGFloat({{x-0}}), y: CGFloat({{y-0}}), color: Color(hex: \"{{color-0 | color: 'hex'}}\"), radius: CGFloat({{blur-0}}))" + - "public static let {{variable_name | camel}} = [Shadow(x: CGFloat({{x-0}}), y: CGFloat({{y-0}}), color: Color(hex: \"{{color-0 | color: 'hex'}}\"), radius: CGFloat({{blur-0}})), Shadow(x: CGFloat({{x-1}}), y: CGFloat({{y-1}}), color: Color(hex: \"{{color-1 | color: 'hex'}}\"), radius: CGFloat({{blur-1}}))]" + +``` + +```swift +public static let shadowTabBar = [Shadow(x: CGFloat(0), y: CGFloat(0), color: Color(hex: "#00000019"), radius: CGFloat(20)), Shadow(x: CGFloat(0), y: CGFloat(4), color: Color(hex: "#00000019"), radius: CGFloat(8))] ``` --- +```json +"dissolve": { + "description": null, + "type": "custom-transition", + "value": { + "duration": 0.45, + "easingFunction": { + "x1": 0.6968395709991455, + "x2": 0.06683959811925888, + "y1": 0.05232666060328483, + "y2": 0.9323266744613647 + }, + "transitionType": "dissolve" + } +} +``` + +```yaml +# Object +# {{easingFunction | empty}} use empty filter to initialize variable if you need it in the scope of the template without printing it +- type: "custom-transition" + value: "public static let {{variable_name | camel}} = CustomTransition(duration: {{duration}}, + {{easingFunction | empty}} + x1: CGFloat({{easingFunction.x1}}), + x2: CGFloat({{easingFunction.x2}}), + y1: CGFloat({{easingFunction.y1}}), + y2: CGFloat({{easingFunction.y2}})) + " +``` + +--- + +```json +"gradient": { + "single with multiple color stops": { + "description": "Four color stops from yellow to red", + "type": "custom-gradient", + "value": { + "gradientType": "radial", + "rotation": 180, + "stops": [ + { + "color": "#ffb800ff", + "position": 0 + }, + { + "color": "#ff8a00ff", + "position": 0.34 + }, + { + "color": "#ff2e00ff", + "position": 0.65 + }, + { + "color": "#ff0000ff", + "position": 1 + } + ] + } + } +} +``` + +```yaml +# Array +# {{stops | empty}} use empty filter to initialize variable if you need it in the scope of the template without printing it +- type: "custom-gradient" + value: "public static let {{variable_name | camel}} = CustomGradient(gradientType: {{gradientType}}, rotation: {{rotation}}, + {{stops | empty}} + + color1: Style1( + {% for stop in stops %} + + {{stop.color | color: 'Color(red: rgb_r_v1, green: rgb_g_v1, blue: rgb_b_v1, opacity: rgb_a_v1)'}} + {% if forloop.last == false -%}, {% endif %} + {% endfor -%} + ), + + color2: Style2( + {% assign colors = stops | map: 'color' %} + {% for item in colors %} + + {{item | color: 'Color(red: rgb_r_v2, green: rgb_g_v2, blue: rgb_b_v2, opacity: rgb_a_v2)'}} + {% if forloop.last == false -%}, {% endif %} + {% endfor %} + ) + " +``` + +```swift +public static let defaultGradientSingleWithMultipleColorStops = CustomGradient(gradientType: radial, rotation: 180, +color1: Style1( +Color(red: 1.000, green: 0.722, blue: 0.000, opacity: 1.000) , +Color(red: 1.000, green: 0.541, blue: 0.000, opacity: 1.000) , +Color(red: 1.000, green: 0.180, blue: 0.000, opacity: 1.000) , +Color(red: 1.000, green: 0.000, blue: 0.000, opacity: 1.000) ), +color2: Style2( +Color(red: 255, green: 184, blue: 0, opacity: 184) , +Color(red: 255, green: 138, blue: 0, opacity: 138) , +Color(red: 255, green: 46, blue: 0, opacity: 46) , +Color(red: 255, green: 0, blue: 0, opacity: 0) ) +} +``` + +--- + +> Use `{{easingFunction | empty}}` empty filter to initialize a variable without displaying it. This filter is unique to this library and necessary for a lot of the blocks that the liquid templating provides. + ##### Keywords You can use the keywords in the following way: **`{{variable_name | kebab }}`** name of the keyword and next to it you can add a filter, or multiple filters by separating them with **`|`** like this **`{{variable_name | kebab | no_space }}`**. @@ -309,6 +460,14 @@ Arrays have a bit different take on how you shuld template them. For example in - "{{variable_name}} {{color-0 | color: 'hex'}} {{color-1 | color: 'hex'}} blur: {{blur-0}} x: {{x-0}} blur: {{blur-1}} x: {{x-1}}" ``` +##### Liquid filters + +Check the available filters/blocks and etc.. for the liquid templating from here: + +- [Liquid for Designers · Shopify/liquid Wiki · GitHub](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers) + +- https://jg-rp.github.io/liquid/language/filters + ##### More For any ideas or issues please don't hasitate to ask/report. diff --git a/assets/design_tokens_config.yaml b/assets/design_tokens_config.yaml index eed7191..51947d6 100644 --- a/assets/design_tokens_config.yaml +++ b/assets/design_tokens_config.yaml @@ -1,3 +1,4 @@ +# cargo run --release -- --generate --config "assets/design_tokens_config.yaml" global: # Figma source paths # These are the pure files from Figma, they can contain aliases @@ -8,56 +9,84 @@ global: # Look at the figma/variables and figma/generated_styles for better understanding how it works figma_source_paths: - combine: + file_name: "button-lg" files: - - "assets/figma/variables/color-light.json" - - "assets/figma/variables/color-dark.json" + - "assets/figma/variables/button-lg.json" + - "assets/figma/variables/core-.json" - combine: + file_name: "button-md" files: - - "assets/figma/variables/button-md.json" - - "assets/figma/variables/core.json" + - "assets/figma/variables/button-md.json" + - "assets/figma/variables/core-.json" - combine: + file_name: "button-sm" files: - - "assets/figma/variables/button-big.json" - - "assets/figma/variables/core.json" - # file_name: If set this will be the name of the merged file - # if not, than the first file name will be used - figma_output_paths: + - "assets/figma/variables/button-sm.json" + - "assets/figma/variables/core-.json" - combine: file_name: "color-light" files: + - "assets/figma/variables/color-accent-primary.json" + - "assets/figma/variables/color-accent-secondary.json" + - "assets/figma/variables/color-status-success.json" + - "assets/figma/variables/color-status-danger.json" - "assets/figma/variables/color-light.json" + - "assets/figma/variables/palette-.json" - combine: file_name: "color-dark" files: + - "assets/figma/variables/color-accent-primary.json" + - "assets/figma/variables/color-accent-secondary.json" + - "assets/figma/variables/color-status-success.json" + - "assets/figma/variables/color-status-danger.json" - "assets/figma/variables/color-dark.json" + - "assets/figma/variables/palette-.json" + # file_name: If set this will be the name of the merged file + # if not, than the first file name will be used + figma_output_paths: - combine: - file_name: "button-md" - files: - - "assets/figma/variables/button-md.json" - - combine: - file_name: "button-big" + file_name: "button-lg" files: - - "assets/figma/variables/button-big.json" - # Generated files - # You can combine multiple files also - output_paths: + - path: "assets/figma/variables/button-lg.json" - combine: + file_name: "button-md" files: - - "color-light" + - path: "assets/figma/variables/button-md.json" - combine: + file_name: "button-sm" files: - - "color-dark" + - path: "assets/figma/variables/button-sm.json" - combine: + file_name: "color-light" files: - - "button-md" + - path: "assets/figma/variables/color-accent-primary.json" + # if mode is set this will wrap the whole json object with a parent of the mode's value + # this helps if you have similar trees in multiple files + mode: "primary" + - path: "assets/figma/variables/color-accent-secondary.json" + mode: "secondary" + - path: "assets/figma/variables/color-status-success.json" + mode: "success" + - path: "assets/figma/variables/color-status-danger.json" + mode: "danger" + - path: "assets/figma/variables/color-light.json" - combine: + file_name: "color-dark" files: - - "button-big" + - path: "assets/figma/variables/color-accent-primary.json" + mode: "primary" + - path: "assets/figma/variables/color-accent-secondary.json" + mode: "secondary" + - path: "assets/figma/variables/color-status-success.json" + mode: "success" + - path: "assets/figma/variables/color-status-danger.json" + mode: "danger" + - path: "assets/figma/variables/color-dark.json" #Output path style_output_path: "assets/generated_styles/" templates: - settings_general: - generate_file_path: "generated_templates" + generate_file_path: "assets/generated_templates" file_name: format: "DS{{style}}" extension: "swift" @@ -80,11 +109,39 @@ templates: value: "public static let {{variable_name | camel}} = CGFloat({{value | as_text_or_number}}) {{description | optional: '// desc = %value'}}" - type: boolean value: "public static let {{variable_name | camel}} = {{value}} {{description | optional: '// desc = %value'}}" - - type: composition - value: "{% if verticalPadding != '' %} test1: {{verticalPadding | optional: 'vertical-padding-test-first: %value'}} {% endif %}" - - type: composition - value: "{% if verticalPadding != '' %} test2: {{verticalPadding | optional: 'vartical-padding-test-second: %value'}} {% endif %}" - - type: boxShadow - value: - - "{{variable_name}} {{color-0 | color: 'hex'}} blur: {{blur-0}} x: {{x-0}}" - - "{{variable_name}} {{color-0 | color: 'hex'}} {{color-1 | color: 'hex'}} blur: {{blur-0}} x: {{x-0}} blur: {{blur-1}} x: {{x-1}}" \ No newline at end of file + # More complex templates + # Object + # {{easingFunction | empty}} use empty filter to initialize variable if you need it in the scope of the template without printing it + - type: "custom-transition" + value: "public static let {{variable_name | camel}} = CustomTransition(duration: {{duration}}, + {{easingFunction | empty}} + x1: CGFloat({{easingFunction.x1}}), + x2: CGFloat({{easingFunction.x2}}), + y1: CGFloat({{easingFunction.y1}}), + y2: CGFloat({{easingFunction.y2}})) + " + # Array + # {{stops | empty}} use empty filter to initialize variable if you need it in the scope of the template without printing it + - type: "custom-gradient" + value: "public static let {{variable_name | camel}} = CustomGradient(gradientType: {{gradientType}}, rotation: {{rotation}}, + {{stops | empty}} + + color1: Style1( + {% for stop in stops %} + + {{stop.color | color: 'Color(red: rgb_r_v1, green: rgb_g_v1, blue: rgb_b_v1, opacity: rgb_a_v1)'}} + {% if forloop.last == false -%}, {% endif %} + {% endfor -%} + ), + + color2: Style2( + {% assign colors = stops | map: 'color' %} + {% for item in colors %} + + {{item | color: 'Color(red: rgb_r_v2, green: rgb_g_v2, blue: rgb_b_v2, opacity: rgb_a_v2)'}} + {% if forloop.last == false -%}, {% endif %} + {% endfor %} + ) + " + + \ No newline at end of file diff --git a/assets/figma/variables/button-big.json b/assets/figma/variables/button-big.json deleted file mode 100644 index d6c04c5..0000000 --- a/assets/figma/variables/button-big.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "button": { - "primary": { - "width": { - "type": "float", - "value": "100", - "description": "test description 1" - }, - "height": { - "type": "float", - "value": "{size.xl}", - "description": "" - } - } - } -} \ No newline at end of file diff --git a/assets/figma/variables/button-lg.json b/assets/figma/variables/button-lg.json new file mode 100644 index 0000000..b949d15 --- /dev/null +++ b/assets/figma/variables/button-lg.json @@ -0,0 +1,51 @@ +{ + "default": { + "height": { + "type": "float", + "value": "20", + "description": "test desc" + }, + "dissolve": { + "description": null, + "type": "custom-transition", + "value": { + "transitionType": "dissolve", + "duration": 0.45, + "easingFunction": { + "x1": 0.6968395709991455, + "x2": 0.06683959811925888, + "y1": 0.052326660603284836, + "y2": 0.9323266744613647 + } + } + }, + "gradient": { + "single with multiple color stops": { + "description": "Four color stops from yellow to red", + "type": "custom-gradient", + "value": { + "gradientType": "radial", + "rotation": 180, + "stops": [ + { + "position": 0, + "color": "#ffb800ff" + }, + { + "position": 0.34, + "color": "#ff8a00ff" + }, + { + "position": 0.65, + "color": "#ff2e00ff" + }, + { + "position": 1, + "color": "#ff0000ff" + } + ] + } + } + } + } +} \ No newline at end of file diff --git a/assets/figma/variables/button-md.json b/assets/figma/variables/button-md.json index 8126b43..e0a9090 100644 --- a/assets/figma/variables/button-md.json +++ b/assets/figma/variables/button-md.json @@ -1,16 +1,9 @@ { - "button": { - "primary": { - "width": { - "type": "float", - "value": "100", - "description": "" - }, - "height": { - "type": "float", - "value": "{size.md}", - "description": "" - } + "default": { + "height": { + "type": "float", + "value": "{size.u48}", + "description": "" } } } \ No newline at end of file diff --git a/assets/figma/variables/button-sm.json b/assets/figma/variables/button-sm.json new file mode 100644 index 0000000..2b68c78 --- /dev/null +++ b/assets/figma/variables/button-sm.json @@ -0,0 +1,9 @@ +{ + "default": { + "height": { + "type": "float", + "value": "{size.u40}", + "description": "" + } + } +} \ No newline at end of file diff --git a/assets/figma/variables/color-accent-primary.json b/assets/figma/variables/color-accent-primary.json new file mode 100644 index 0000000..3c0e5a8 --- /dev/null +++ b/assets/figma/variables/color-accent-primary.json @@ -0,0 +1,38 @@ +{ + "accent": { + "hover": { + "bg": { + "type": "color", + "value": "{primary.hover.bg}", + "description": "" + }, + "text": { + "type": "color", + "value": "{primary.hover.text}", + "description": "" + } + }, + "disabled": { + "text": { + "type": "color", + "value": "{primary.disabled.text}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{primary.disabled.bg}", + "description": "" + } + }, + "text": { + "type": "color", + "value": "{primary.text}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{primary.bg}", + "description": "" + } + } +} \ No newline at end of file diff --git a/assets/figma/variables/color-accent-secondary.json b/assets/figma/variables/color-accent-secondary.json new file mode 100644 index 0000000..1a022ad --- /dev/null +++ b/assets/figma/variables/color-accent-secondary.json @@ -0,0 +1,38 @@ +{ + "accent": { + "hover": { + "bg": { + "type": "color", + "value": "{secondary.hover.bg}", + "description": "" + }, + "text": { + "type": "color", + "value": "{secondary.hover.text}", + "description": "" + } + }, + "disabled": { + "text": { + "type": "color", + "value": "{secondary.disabled.text}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{secondary.disabled.bg}", + "description": "" + } + }, + "text": { + "type": "color", + "value": "{secondary.text}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{secondary.bg}", + "description": "" + } + } +} \ No newline at end of file diff --git a/assets/figma/variables/color-dark.json b/assets/figma/variables/color-dark.json index 55d9414..f005af8 100644 --- a/assets/figma/variables/color-dark.json +++ b/assets/figma/variables/color-dark.json @@ -1,16 +1,153 @@ { - "n": { - "fr": { - "c5": { + "success": { + "hover": { + "bg": { "type": "color", - "value": "#d6d9db", + "value": "{dark.success.success}", + "description": "" + }, + "text": { + "type": "color", + "value": "{dark.success.fr.l60}", + "description": "" + } + }, + "disabled": { + "bg": { + "type": "color", + "value": "{dark.success.fr.l45}", + "description": "" + }, + "text": { + "type": "color", + "value": "{dark.success.bg}", + "description": "" + } + }, + "text": { + "type": "color", + "value": "{dark.success.fr.l60}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{dark.success.bg}", + "description": "" + } + }, + "danger": { + "hover": { + "bg": { + "type": "color", + "value": "{dark.danger.hover}", + "description": "" + }, + "text": { + "type": "color", + "value": "{dark.danger.fr.l60}", + "description": "" + } + }, + "disabled": { + "bg": { + "type": "color", + "value": "{dark.danger.fr.l30}", + "description": "" + }, + "text": { + "type": "color", + "value": "{dark.danger.bg}", "description": "" } }, + "text": { + "type": "color", + "value": "{dark.danger.fr.l60}", + "description": "" + }, "bg": { "type": "color", - "value": "#1a1a1a", - "description": "test description 2" + "value": "{dark.danger.bg}", + "description": "" + } + }, + "secondary": { + "hover": { + "bg": { + "type": "color", + "value": "{dark.accent2.hover}", + "description": "" + }, + "text": { + "type": "color", + "value": "{dark.accent2.fr.l75}", + "description": "" + } + }, + "disabled": { + "bg": { + "type": "color", + "value": "{dark.accent2.fr.l60}", + "description": "" + }, + "text": { + "type": "color", + "value": "{dark.accent2.bg}", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "{dark.accent2.bg}", + "description": "" + }, + "text": { + "type": "color", + "value": "{dark.accent2.fr.l75}", + "description": "" + } + }, + "primary": { + "hover": { + "bg": { + "type": "color", + "value": "{dark.accent1.hover}", + "description": "" + }, + "text": { + "type": "color", + "value": "{dark.accent1.fr.l60}", + "description": "" + } + }, + "disabled": { + "text": { + "type": "color", + "value": "{dark.accent1.bg}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{dark.accent1.fr.l60}", + "description": "" + } + }, + "text": { + "type": "color", + "value": "{dark.accent1.fr.l60}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{dark.accent1.bg}", + "description": "" + } + }, + "box": { + "neutral1": { + "type": "color", + "value": "{dark.n1.bg}", + "description": "" } } } \ No newline at end of file diff --git a/assets/figma/variables/color-light.json b/assets/figma/variables/color-light.json index 4d1d86c..dac821d 100644 --- a/assets/figma/variables/color-light.json +++ b/assets/figma/variables/color-light.json @@ -1,15 +1,152 @@ { - "n": { - "fr": { - "c5": { + "success": { + "hover": { + "bg": { "type": "color", - "value": "#262222", + "value": "{light.success.hover}", + "description": "" + }, + "text": { + "type": "color", + "value": "{light.success.fr.l65}", + "description": "" + } + }, + "disabled": { + "bg": { + "type": "color", + "value": "{light.success.fr.l45}", + "description": "" + }, + "text": { + "type": "color", + "value": "{light.success.bg}", + "description": "" + } + }, + "text": { + "type": "color", + "value": "{light.success.fr.l65}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{light.success.bg}", + "description": "" + } + }, + "danger": { + "hover": { + "bg": { + "type": "color", + "value": "{light.danger.hover}", + "description": "" + }, + "text": { + "type": "color", + "value": "{light.danger.fr.l75}", + "description": "" + } + }, + "disabled": { + "bg": { + "type": "color", + "value": "{light.danger.fr.l30}", + "description": "" + }, + "text": { + "type": "color", + "value": "{light.danger.bg}", "description": "" } }, + "text": { + "type": "color", + "value": "{light.danger.fr.l75}", + "description": "" + }, "bg": { "type": "color", - "value": "#fafafa", + "value": "{light.danger.bg}", + "description": "" + } + }, + "secondary": { + "hover": { + "bg": { + "type": "color", + "value": "{light.accent2.hover}", + "description": "" + }, + "text": { + "type": "color", + "value": "{light.accent2.fr.l90}", + "description": "" + } + }, + "disabled": { + "bg": { + "type": "color", + "value": "{light.accent2.fr.l60}", + "description": "" + }, + "text": { + "type": "color", + "value": "{light.accent2.bg}", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "{light.accent2.bg}", + "description": "" + }, + "text": { + "type": "color", + "value": "{light.accent2.fr.l90}", + "description": "" + } + }, + "primary": { + "hover": { + "bg": { + "type": "color", + "value": "{light.accent1.hover}", + "description": "" + }, + "text": { + "type": "color", + "value": "{light.accent1.fr.l75}", + "description": "" + } + }, + "disabled": { + "text": { + "type": "color", + "value": "{light.accent1.bg}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{light.accent1.fr.l60}", + "description": "" + } + }, + "text": { + "type": "color", + "value": "{light.accent1.fr.l75}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{light.accent1.bg}", + "description": "" + } + }, + "box": { + "neutral1": { + "type": "color", + "value": "{light.n1.bg}", "description": "" } } diff --git a/assets/figma/variables/color-status-danger.json b/assets/figma/variables/color-status-danger.json new file mode 100644 index 0000000..5c455e6 --- /dev/null +++ b/assets/figma/variables/color-status-danger.json @@ -0,0 +1,38 @@ +{ + "status": { + "hover": { + "bg": { + "type": "color", + "value": "{danger.hover.bg}", + "description": "" + }, + "text": { + "type": "color", + "value": "{danger.hover.text}", + "description": "" + } + }, + "disabled": { + "text": { + "type": "color", + "value": "{danger.disabled.text}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{danger.disabled.bg}", + "description": "" + } + }, + "text": { + "type": "color", + "value": "{danger.text}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{danger.bg}", + "description": "" + } + } +} \ No newline at end of file diff --git a/assets/figma/variables/color-status-success.json b/assets/figma/variables/color-status-success.json new file mode 100644 index 0000000..46b63ff --- /dev/null +++ b/assets/figma/variables/color-status-success.json @@ -0,0 +1,38 @@ +{ + "status": { + "hover": { + "bg": { + "type": "color", + "value": "{success.hover.bg}", + "description": "" + }, + "text": { + "type": "color", + "value": "{success.hover.text}", + "description": "" + } + }, + "disabled": { + "text": { + "type": "color", + "value": "{success.disabled.text}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{success.disabled.bg}", + "description": "" + } + }, + "text": { + "type": "color", + "value": "{success.text}", + "description": "" + }, + "bg": { + "type": "color", + "value": "{success.bg}", + "description": "" + } + } +} \ No newline at end of file diff --git a/assets/figma/variables/core-.json b/assets/figma/variables/core-.json new file mode 100644 index 0000000..25a473a --- /dev/null +++ b/assets/figma/variables/core-.json @@ -0,0 +1,233 @@ +{ + "border": { + "radius": { + "default": { + "type": "float", + "value": "{size.default}", + "description": "" + } + } + }, + "size": { + "u752": { + "type": "float", + "value": "752", + "description": "" + }, + "u448": { + "type": "float", + "value": "448", + "description": "" + }, + "u416": { + "type": "float", + "value": "416", + "description": "" + }, + "u384": { + "type": "float", + "value": "384", + "description": "" + }, + "u352": { + "type": "float", + "value": "352", + "description": "" + }, + "u320": { + "type": "float", + "value": "320", + "description": "" + }, + "u288": { + "type": "float", + "value": "288", + "description": "" + }, + "u256": { + "type": "float", + "value": "256", + "description": "" + }, + "u224": { + "type": "float", + "value": "224", + "description": "" + }, + "u480": { + "type": "float", + "value": "480", + "description": "" + }, + "u192": { + "type": "float", + "value": "192", + "description": "" + }, + "u608": { + "type": "float", + "value": "608", + "description": "" + }, + "u176": { + "type": "float", + "value": "176", + "description": "" + }, + "u160": { + "type": "float", + "value": "160", + "description": "" + }, + "u512": { + "type": "float", + "value": "512", + "description": "" + }, + "u144": { + "type": "float", + "value": "144", + "description": "" + }, + "u128": { + "type": "float", + "value": "128", + "description": "" + }, + "u112": { + "type": "float", + "value": "112", + "description": "" + }, + "d033": { + "type": "float", + "value": "0.33000001311302185", + "description": "" + }, + "d1": { + "type": "float", + "value": "1", + "description": "" + }, + "d2": { + "type": "float", + "value": "2", + "description": "" + }, + "d4": { + "type": "float", + "value": "4", + "description": "" + }, + "d6": { + "type": "float", + "value": "6", + "description": "" + }, + "u96": { + "type": "float", + "value": "96", + "description": "" + }, + "u560": { + "type": "float", + "value": "560", + "description": "" + }, + "u64": { + "type": "float", + "value": "64", + "description": "" + }, + "u704": { + "type": "float", + "value": "704", + "description": "" + }, + "u56": { + "type": "float", + "value": "56", + "description": "" + }, + "u48": { + "type": "float", + "value": "48", + "description": "" + }, + "u44": { + "type": "float", + "value": "44", + "description": "" + }, + "u40": { + "type": "float", + "value": "40", + "description": "" + }, + "u36": { + "type": "float", + "value": "36", + "description": "" + }, + "u28": { + "type": "float", + "value": "28", + "description": "" + }, + "u24": { + "type": "float", + "value": "24", + "description": "" + }, + "u12": { + "type": "float", + "value": "12", + "description": "" + }, + "u32": { + "type": "float", + "value": "32", + "description": "" + }, + "u16": { + "type": "float", + "value": "16", + "description": "" + }, + "u20": { + "type": "float", + "value": "20", + "description": "" + }, + "default": { + "type": "float", + "value": "8", + "description": "" + }, + "u656": { + "type": "float", + "value": "656", + "description": "" + }, + "u80": { + "type": "float", + "value": "80", + "description": "" + }, + "u14": { + "type": "float", + "value": "14", + "description": "" + }, + "u10": { + "type": "float", + "value": "10", + "description": "" + }, + "u72": { + "type": "float", + "value": "72", + "description": "" + } + } +} \ No newline at end of file diff --git a/assets/figma/variables/core.json b/assets/figma/variables/core.json deleted file mode 100644 index bb28026..0000000 --- a/assets/figma/variables/core.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "size": { - "lg": { - "type": "float", - "value": "24", - "description": "" - }, - "md": { - "type": "float", - "value": "8", - "description": "" - }, - "xl": { - "type": "float", - "value": "32", - "description": "" - }, - "zero": { - "type": "float", - "value": "0", - "description": "" - } - } -} \ No newline at end of file diff --git a/assets/figma/variables/palette-.json b/assets/figma/variables/palette-.json new file mode 100644 index 0000000..cbbe882 --- /dev/null +++ b/assets/figma/variables/palette-.json @@ -0,0 +1,927 @@ +{ + "dark": { + "accent1": { + "hover": { + "type": "color", + "value": "#5985ed", + "description": "" + }, + "bg": { + "type": "color", + "value": "#3e71ea", + "description": "" + }, + "fr": { + "l45": { + "type": "color", + "value": "#cad1e2", + "description": "" + }, + "l75": { + "type": "color", + "value": "#ffffff", + "description": "" + }, + "l15": { + "type": "color", + "value": "#8199d5", + "description": "" + }, + "l30": { + "type": "color", + "value": "#a9b7da", + "description": "" + }, + "l60": { + "type": "color", + "value": "#e8e9ee", + "description": "" + } + } + }, + "success": { + "success": { + "type": "color", + "value": "#2de67b", + "description": "" + }, + "fr": { + "l45": { + "type": "color", + "value": "#0b5b2c", + "description": "" + }, + "l60": { + "type": "color", + "value": "#0f2418", + "description": "" + }, + "l30": { + "type": "color", + "value": "#0f803e", + "description": "" + }, + "l15": { + "type": "color", + "value": "#13a450", + "description": "" + }, + "l65": { + "type": "color", + "value": "#000000", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#18cd64", + "description": "" + } + }, + "danger": { + "hover": { + "type": "color", + "value": "#ed5959", + "description": "" + }, + "bg": { + "type": "color", + "value": "#ea3e3e", + "description": "" + }, + "fr": { + "l60": { + "type": "color", + "value": "#fdeded", + "description": "" + }, + "l15": { + "type": "color", + "value": "#f17e7e", + "description": "" + }, + "l45": { + "type": "color", + "value": "#d6d6d6", + "description": "" + }, + "l70": { + "type": "color", + "value": "#ffffff", + "description": "" + }, + "l30": { + "type": "color", + "value": "#f6acac", + "description": "" + } + } + }, + "low": { + "hover": { + "type": "color", + "value": "#f9d94e", + "description": "" + }, + "fr": { + "l30": { + "type": "color", + "value": "#b29206", + "description": "" + }, + "l45": { + "type": "color", + "value": "#8a7105", + "description": "" + }, + "l15": { + "type": "color", + "value": "#d4ae07", + "description": "" + }, + "l60": { + "type": "color", + "value": "#605420", + "description": "" + }, + "l75": { + "type": "color", + "value": "#302c1d", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#f7cf1d", + "description": "" + } + }, + "n1": { + "fr": { + "success": { + "l75": { + "type": "color", + "value": "#2fea7d", + "description": "" + }, + "l45": { + "type": "color", + "value": "#25ad5e", + "description": "" + }, + "l30": { + "type": "color", + "value": "#0e8b42", + "description": "" + } + }, + "danger": { + "l75": { + "type": "color", + "value": "#f8c3c4", + "description": "" + }, + "l45": { + "type": "color", + "value": "#f76969", + "description": "" + }, + "l30": { + "type": "color", + "value": "#e90c0d", + "description": "" + } + }, + "acc1": { + "l75": { + "type": "color", + "value": "#b1d3f6", + "description": "" + }, + "l45": { + "type": "color", + "value": "#55a0ec", + "description": "" + }, + "l30": { + "type": "color", + "value": "#197adc", + "description": "" + } + }, + "l90": { + "type": "color", + "value": "#e9ebec", + "description": "" + }, + "l75": { + "type": "color", + "value": "#cccfd1", + "description": "" + }, + "l60": { + "type": "color", + "value": "#b1b5b9", + "description": "" + }, + "l45": { + "type": "color", + "value": "#97999b", + "description": "L45" + }, + "l30": { + "type": "color", + "value": "#787a7d", + "description": "L30" + }, + "l15": { + "type": "color", + "value": "#545759", + "description": "L15" + } + }, + "bg": { + "type": "color", + "value": "#1a1a1a", + "description": "" + } + }, + "n2": { + "fr": { + "l15": { + "type": "color", + "value": "#525456", + "description": "" + }, + "l30": { + "type": "color", + "value": "#75787a", + "description": "" + }, + "l60": { + "type": "color", + "value": "#afb3b6", + "description": "" + }, + "l75": { + "type": "color", + "value": "#cdcfd0", + "description": "" + }, + "l90": { + "type": "color", + "value": "#eaebeb", + "description": "" + }, + "l45": { + "type": "color", + "value": "#95999d", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#121212", + "description": "" + } + }, + "n3": { + "fr": { + "l15": { + "type": "color", + "value": "#5a5c5e", + "description": "" + }, + "l45": { + "type": "color", + "value": "#9c9c9c", + "description": "" + }, + "l60": { + "type": "color", + "value": "#b5b8ba", + "description": "" + }, + "l75": { + "type": "color", + "value": "#cfd1d3", + "description": "" + }, + "l30": { + "type": "color", + "value": "#7a7d7f", + "description": "" + }, + "l90": { + "type": "color", + "value": "#eaebeb", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#262626", + "description": "" + } + }, + "accent2": { + "fr": { + "l30": { + "type": "color", + "value": "#bebfc1", + "description": "" + }, + "l75": { + "type": "color", + "value": "#646668", + "description": "" + }, + "l15": { + "type": "color", + "value": "#dbdbdc", + "description": "" + }, + "l45": { + "type": "color", + "value": "#a4a6a8", + "description": "" + }, + "l90": { + "type": "color", + "value": "#414244", + "description": "" + }, + "l60": { + "type": "color", + "value": "#85878a", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#fafafa", + "description": "" + }, + "hover": { + "type": "color", + "value": "#e0e0e0", + "description": "" + } + }, + "n4": { + "fr": { + "l80": { + "type": "color", + "value": "#dddedf", + "description": "" + }, + "l15": { + "type": "color", + "value": "#616365", + "description": "" + }, + "l45": { + "type": "color", + "value": "#9fa1a3", + "description": "" + }, + "l60": { + "type": "color", + "value": "#bbbdbe", + "description": "" + }, + "l75": { + "type": "color", + "value": "#d5d6d7", + "description": "" + }, + "l30": { + "type": "color", + "value": "#828587", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#333333", + "description": "" + } + }, + "warning": { + "bg": { + "type": "color", + "value": "#f38b16", + "description": "" + }, + "fr": { + "l15": { + "type": "color", + "value": "#f09a75", + "description": "" + }, + "l30": { + "type": "color", + "value": "#f5bca3", + "description": "" + }, + "l45": { + "type": "color", + "value": "#faddd1", + "description": "" + }, + "l60": { + "type": "color", + "value": "#ffffff", + "description": "" + } + }, + "hover": { + "type": "color", + "value": "#eb7847", + "description": "" + } + } + }, + "brand": { + "hover": { + "type": "color", + "value": "#ff4342", + "description": "" + }, + "fr": { + "l60": { + "type": "color", + "value": "#ffffff", + "description": "" + }, + "l30": { + "type": "color", + "value": "#ffbdbd", + "description": "" + }, + "l15": { + "type": "color", + "value": "#ff9999", + "description": "" + }, + "l45": { + "type": "color", + "value": "#ffe0e0", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#ff5b5a", + "description": "" + } + }, + "light": { + "low": { + "hover": { + "type": "color", + "value": "#dfa601", + "description": "" + }, + "fr": { + "l75": { + "type": "color", + "value": "#000000", + "description": "" + }, + "l60": { + "type": "color", + "value": "#5b460b", + "description": "" + }, + "l45": { + "type": "color", + "value": "#846610", + "description": "" + }, + "l30": { + "type": "color", + "value": "#ad8614", + "description": "" + }, + "l15": { + "type": "color", + "value": "#d59f01", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#fec113", + "description": "" + } + }, + "warning": { + "hover": { + "type": "color", + "value": "#cb710b", + "description": "" + }, + "fr": { + "l45": { + "type": "color", + "value": "#fef3e7", + "description": "" + }, + "l15": { + "type": "color", + "value": "#f7b76e", + "description": "" + }, + "l30": { + "type": "color", + "value": "#fad6ad", + "description": "" + }, + "l50": { + "type": "color", + "value": "#ffffff", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#f38b16", + "description": "" + } + }, + "danger": { + "hover": { + "type": "color", + "value": "#aa2222", + "description": "" + }, + "fr": { + "l75": { + "type": "color", + "value": "#ffffff", + "description": "" + }, + "l60": { + "type": "color", + "value": "#f4e1e1", + "description": "" + }, + "l45": { + "type": "color", + "value": "#edbfbf", + "description": "" + }, + "l30": { + "type": "color", + "value": "#e59f9f", + "description": "" + }, + "l15": { + "type": "color", + "value": "#e37373", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#d52a2a", + "description": "" + } + }, + "success": { + "hover": { + "type": "color", + "value": "#1f7a45", + "description": "" + }, + "fr": { + "l65": { + "type": "color", + "value": "#ffffff", + "description": "" + }, + "l60": { + "type": "color", + "value": "#f3fcf3", + "description": "" + }, + "l45": { + "type": "color", + "value": "#baeecf", + "description": "" + }, + "l30": { + "type": "color", + "value": "#9fd6b6", + "description": "" + }, + "l15": { + "type": "color", + "value": "#69bf8d", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#29a35c", + "description": "" + } + }, + "accent2": { + "hover": { + "type": "color", + "value": "#1a1a1a", + "description": "" + }, + "fr": { + "l60": { + "type": "color", + "value": "#b8b8b8", + "description": "" + }, + "l15": { + "type": "color", + "value": "#595959", + "description": "" + }, + "l90": { + "type": "color", + "value": "#ebebeb", + "description": "" + }, + "l75": { + "type": "color", + "value": "#d1d1d1", + "description": "" + }, + "l45": { + "type": "color", + "value": "#9c9c9c", + "description": "" + }, + "l30": { + "type": "color", + "value": "#7d7d7d", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#262626", + "description": "" + } + }, + "accent1": { + "hover": { + "type": "color", + "value": "#1f49ad", + "description": "" + }, + "fr": { + "l45": { + "type": "color", + "value": "#bec3cf", + "description": "" + }, + "l15": { + "type": "color", + "value": "#6387de", + "description": "" + }, + "l80": { + "type": "color", + "value": "#ffffff", + "description": "" + }, + "l75": { + "type": "color", + "value": "#f1f2f3", + "description": "" + }, + "l60": { + "type": "color", + "value": "#d8dadf", + "description": "" + }, + "l30": { + "type": "color", + "value": "#94a6d1", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#265bd9", + "description": "" + } + }, + "n3": { + "bg": { + "type": "color", + "value": "#ebebeb", + "description": "" + }, + "fr": { + "l75": { + "type": "color", + "value": "#4f5054", + "description": "" + }, + "l90": { + "type": "color", + "value": "#252627", + "description": "" + }, + "l60": { + "type": "color", + "value": "#75777a", + "description": "" + }, + "l45": { + "type": "color", + "value": "#949494", + "description": "" + }, + "l30": { + "type": "color", + "value": "#b0b0b0", + "description": "" + }, + "l15": { + "type": "color", + "value": "#cccccc", + "description": "" + } + } + }, + "n2": { + "fr": { + "l90": { + "type": "color", + "value": "#3d3f42", + "description": "" + }, + "l75": { + "type": "color", + "value": "#5f6267", + "description": "" + }, + "l60": { + "type": "color", + "value": "#8b8d92", + "description": "" + }, + "l45": { + "type": "color", + "value": "#ada9a9", + "description": "" + }, + "l30": { + "type": "color", + "value": "#c5c6c9", + "description": "" + }, + "l15": { + "type": "color", + "value": "#dfe0e1", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#ffffff", + "description": "" + } + }, + "n1": { + "bg": { + "type": "color", + "value": "#fafafa", + "description": "" + }, + "fr": { + "l30": { + "type": "color", + "value": "#bfbfbf", + "description": "L30" + }, + "l15": { + "type": "color", + "value": "#dbdbdb", + "description": "L15" + }, + "success": { + "l75": { + "type": "color", + "value": "#1c7341", + "description": "" + }, + "l30": { + "type": "color", + "value": "#9fcbb2", + "description": "" + }, + "l45": { + "type": "color", + "value": "#2cb969", + "description": "" + } + }, + "danger": { + "l75": { + "type": "color", + "value": "#bb2525", + "description": "" + }, + "l45": { + "type": "color", + "value": "#e88c8c", + "description": "" + }, + "l30": { + "type": "color", + "value": "#f0b2b2", + "description": "" + } + }, + "l45": { + "type": "color", + "value": "#a3a3a3", + "description": "L45" + }, + "acc1": { + "l75": { + "type": "color", + "value": "#265bd9", + "description": "" + }, + "l45": { + "type": "color", + "value": "#799ae7", + "description": "" + }, + "l30": { + "type": "color", + "value": "#adc1f0", + "description": "" + } + }, + "l75": { + "type": "color", + "value": "#5c5c5c", + "description": "" + }, + "l60": { + "type": "color", + "value": "#7d7e82", + "description": "" + }, + "l90": { + "type": "color", + "value": "#3e3c3c", + "description": "" + } + } + }, + "n4": { + "fr": { + "l60": { + "type": "color", + "value": "#5b5e62", + "description": "" + }, + "l30": { + "type": "color", + "value": "#9c9da0", + "description": "" + }, + "l75": { + "type": "color", + "value": "#36383a", + "description": "" + }, + "l80": { + "type": "color", + "value": "#222325", + "description": "" + }, + "l15": { + "type": "color", + "value": "#b9babc", + "description": "" + }, + "l45": { + "type": "color", + "value": "#7d7f82", + "description": "" + } + }, + "bg": { + "type": "color", + "value": "#d9d9d9", + "description": "" + } + } + } +} \ No newline at end of file diff --git a/assets/generated_styles/button-lg.json b/assets/generated_styles/button-lg.json new file mode 100644 index 0000000..c396f4c --- /dev/null +++ b/assets/generated_styles/button-lg.json @@ -0,0 +1,51 @@ +{ + "default": { + "dissolve": { + "description": null, + "type": "custom-transition", + "value": { + "duration": 0.45, + "easingFunction": { + "x1": 0.6968395709991455, + "x2": 0.06683959811925888, + "y1": 0.05232666060328483, + "y2": 0.9323266744613647 + }, + "transitionType": "dissolve" + } + }, + "gradient": { + "single with multiple color stops": { + "description": "Four color stops from yellow to red", + "type": "custom-gradient", + "value": { + "gradientType": "radial", + "rotation": 180, + "stops": [ + { + "color": "#ffb800ff", + "position": 0 + }, + { + "color": "#ff8a00ff", + "position": 0.34 + }, + { + "color": "#ff2e00ff", + "position": 0.65 + }, + { + "color": "#ff0000ff", + "position": 1 + } + ] + } + } + }, + "height": { + "description": "test desc", + "type": "float", + "value": "20" + } + } +} \ No newline at end of file diff --git a/assets/generated_styles/button-md.json b/assets/generated_styles/button-md.json index e340d4d..dd70d98 100644 --- a/assets/generated_styles/button-md.json +++ b/assets/generated_styles/button-md.json @@ -1,16 +1,9 @@ { - "button": { - "primary": { - "height": { - "description": "", - "type": "float", - "value": "8" - }, - "width": { - "description": "", - "type": "float", - "value": "100" - } + "default": { + "height": { + "description": "", + "type": "float", + "value": "48" } } } \ No newline at end of file diff --git a/assets/generated_styles/button-sm.json b/assets/generated_styles/button-sm.json new file mode 100644 index 0000000..6d74490 --- /dev/null +++ b/assets/generated_styles/button-sm.json @@ -0,0 +1,9 @@ +{ + "default": { + "height": { + "description": "", + "type": "float", + "value": "40" + } + } +} \ No newline at end of file diff --git a/assets/generated_styles/color-dark.json b/assets/generated_styles/color-dark.json index 460f91b..4f9d9ac 100644 --- a/assets/generated_styles/color-dark.json +++ b/assets/generated_styles/color-dark.json @@ -1,16 +1,297 @@ { - "n": { - "bg": { - "description": "test description 2", + "box": { + "neutral1": { + "description": "", "type": "color", "value": "#1a1a1a" + } + }, + "danger": { + "bg": { + "description": "", + "type": "color", + "value": "#ea3e3e" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#f6acac" + }, + "text": { + "description": "", + "type": "color", + "value": "#ea3e3e" + } }, - "fr": { - "c5": { + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#ed5959" + }, + "text": { "description": "", "type": "color", - "value": "#d6d9db" + "value": "#fdeded" } + }, + "status": { + "bg": { + "description": "", + "type": "color", + "value": "#ea3e3e" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#f6acac" + }, + "text": { + "description": "", + "type": "color", + "value": "#ea3e3e" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#ed5959" + }, + "text": { + "description": "", + "type": "color", + "value": "#fdeded" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#fdeded" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#fdeded" + } + }, + "primary": { + "accent": { + "bg": { + "description": "", + "type": "color", + "value": "#fafafa" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#85878a" + }, + "text": { + "description": "", + "type": "color", + "value": "#fafafa" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#e0e0e0" + }, + "text": { + "description": "", + "type": "color", + "value": "#646668" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#646668" + } + }, + "bg": { + "description": "", + "type": "color", + "value": "#3e71ea" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#e8e9ee" + }, + "text": { + "description": "", + "type": "color", + "value": "#3e71ea" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#5985ed" + }, + "text": { + "description": "", + "type": "color", + "value": "#e8e9ee" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#e8e9ee" + } + }, + "secondary": { + "accent": { + "bg": { + "description": "", + "type": "color", + "value": "#fafafa" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#85878a" + }, + "text": { + "description": "", + "type": "color", + "value": "#fafafa" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#e0e0e0" + }, + "text": { + "description": "", + "type": "color", + "value": "#646668" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#646668" + } + }, + "bg": { + "description": "", + "type": "color", + "value": "#fafafa" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#85878a" + }, + "text": { + "description": "", + "type": "color", + "value": "#fafafa" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#e0e0e0" + }, + "text": { + "description": "", + "type": "color", + "value": "#646668" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#646668" + } + }, + "success": { + "bg": { + "description": "", + "type": "color", + "value": "#18cd64" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#0b5b2c" + }, + "text": { + "description": "", + "type": "color", + "value": "#18cd64" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#2de67b" + }, + "text": { + "description": "", + "type": "color", + "value": "#0f2418" + } + }, + "status": { + "bg": { + "description": "", + "type": "color", + "value": "#ea3e3e" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#f6acac" + }, + "text": { + "description": "", + "type": "color", + "value": "#ea3e3e" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#ed5959" + }, + "text": { + "description": "", + "type": "color", + "value": "#fdeded" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#fdeded" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#0f2418" } } } \ No newline at end of file diff --git a/assets/generated_styles/color-light.json b/assets/generated_styles/color-light.json index ed72caa..108033d 100644 --- a/assets/generated_styles/color-light.json +++ b/assets/generated_styles/color-light.json @@ -1,16 +1,297 @@ { - "n": { - "bg": { + "box": { + "neutral1": { "description": "", "type": "color", "value": "#fafafa" + } + }, + "danger": { + "bg": { + "description": "", + "type": "color", + "value": "#d52a2a" }, - "fr": { - "c5": { + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#e59f9f" + }, + "text": { + "description": "", + "type": "color", + "value": "#d52a2a" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#aa2222" + }, + "text": { "description": "", "type": "color", - "value": "#262222" + "value": "#ffffff" } + }, + "status": { + "bg": { + "description": "", + "type": "color", + "value": "#d52a2a" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#e59f9f" + }, + "text": { + "description": "", + "type": "color", + "value": "#d52a2a" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#aa2222" + }, + "text": { + "description": "", + "type": "color", + "value": "#ffffff" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#ffffff" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#ffffff" + } + }, + "primary": { + "accent": { + "bg": { + "description": "", + "type": "color", + "value": "#262626" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#b8b8b8" + }, + "text": { + "description": "", + "type": "color", + "value": "#262626" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#1a1a1a" + }, + "text": { + "description": "", + "type": "color", + "value": "#ebebeb" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#ebebeb" + } + }, + "bg": { + "description": "", + "type": "color", + "value": "#265bd9" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#d8dadf" + }, + "text": { + "description": "", + "type": "color", + "value": "#265bd9" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#1f49ad" + }, + "text": { + "description": "", + "type": "color", + "value": "#f1f2f3" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#f1f2f3" + } + }, + "secondary": { + "accent": { + "bg": { + "description": "", + "type": "color", + "value": "#262626" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#b8b8b8" + }, + "text": { + "description": "", + "type": "color", + "value": "#262626" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#1a1a1a" + }, + "text": { + "description": "", + "type": "color", + "value": "#ebebeb" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#ebebeb" + } + }, + "bg": { + "description": "", + "type": "color", + "value": "#262626" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#b8b8b8" + }, + "text": { + "description": "", + "type": "color", + "value": "#262626" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#1a1a1a" + }, + "text": { + "description": "", + "type": "color", + "value": "#ebebeb" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#ebebeb" + } + }, + "success": { + "bg": { + "description": "", + "type": "color", + "value": "#29a35c" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#baeecf" + }, + "text": { + "description": "", + "type": "color", + "value": "#29a35c" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#1f7a45" + }, + "text": { + "description": "", + "type": "color", + "value": "#ffffff" + } + }, + "status": { + "bg": { + "description": "", + "type": "color", + "value": "#d52a2a" + }, + "disabled": { + "bg": { + "description": "", + "type": "color", + "value": "#e59f9f" + }, + "text": { + "description": "", + "type": "color", + "value": "#d52a2a" + } + }, + "hover": { + "bg": { + "description": "", + "type": "color", + "value": "#aa2222" + }, + "text": { + "description": "", + "type": "color", + "value": "#ffffff" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#ffffff" + } + }, + "text": { + "description": "", + "type": "color", + "value": "#ffffff" } } } \ No newline at end of file diff --git a/assets/generated_templates/DSButtonLg.swift b/assets/generated_templates/DSButtonLg.swift new file mode 100644 index 0000000..8a8ba9e --- /dev/null +++ b/assets/generated_templates/DSButtonLg.swift @@ -0,0 +1,16 @@ +import SwiftUI +public class DSCoreButtonLg { +public static let defaultHeight = CGFloat(20) // desc = test desc +public static let defaultDissolve = CustomTransition(duration: 0.45, x1: CGFloat(0.6968395709991455), x2: CGFloat(0.06683959811925888), y1: CGFloat(0.05232666060328483), y2: CGFloat(0.9323266744613647)) +public static let defaultGradientSingleWithMultipleColorStops = CustomGradient(gradientType: radial, rotation: 180, +color1: Style1( +Color(red: 1.000, green: 0.722, blue: 0.000, opacity: 1.000) , +Color(red: 1.000, green: 0.541, blue: 0.000, opacity: 1.000) , +Color(red: 1.000, green: 0.180, blue: 0.000, opacity: 1.000) , +Color(red: 1.000, green: 0.000, blue: 0.000, opacity: 1.000) ), +color2: Style2( +Color(red: 255, green: 184, blue: 0, opacity: 184) , +Color(red: 255, green: 138, blue: 0, opacity: 138) , +Color(red: 255, green: 46, blue: 0, opacity: 46) , +Color(red: 255, green: 0, blue: 0, opacity: 0) ) +} diff --git a/assets/generated_templates/DSButtonMd.swift b/assets/generated_templates/DSButtonMd.swift new file mode 100644 index 0000000..f0f55ef --- /dev/null +++ b/assets/generated_templates/DSButtonMd.swift @@ -0,0 +1,4 @@ +import SwiftUI +public class DSCoreButtonMd { +public static let defaultHeight = CGFloat(48) +} diff --git a/assets/generated_templates/DSButtonSm.swift b/assets/generated_templates/DSButtonSm.swift new file mode 100644 index 0000000..85b703b --- /dev/null +++ b/assets/generated_templates/DSButtonSm.swift @@ -0,0 +1,4 @@ +import SwiftUI +public class DSCoreButtonSm { +public static let defaultHeight = CGFloat(40) +} diff --git a/assets/generated_templates/DSColorDark.swift b/assets/generated_templates/DSColorDark.swift new file mode 100644 index 0000000..0eef2e4 --- /dev/null +++ b/assets/generated_templates/DSColorDark.swift @@ -0,0 +1,52 @@ +import SwiftUI +public class DSCoreColorDark { +public static let boxNeutral1 = Color(red: 0.102, green: 0.102, blue: 0.102, opacity: 1.000) +public static let dangerBg = Color(red: 0.918, green: 0.243, blue: 0.243, opacity: 1.000) +public static let dangerDisabledBg = Color(red: 0.965, green: 0.675, blue: 0.675, opacity: 1.000) +public static let dangerDisabledText = Color(red: 0.918, green: 0.243, blue: 0.243, opacity: 1.000) +public static let dangerHoverBg = Color(red: 0.929, green: 0.349, blue: 0.349, opacity: 1.000) +public static let dangerHoverText = Color(red: 0.992, green: 0.929, blue: 0.929, opacity: 1.000) +public static let dangerStatusBg = Color(red: 0.918, green: 0.243, blue: 0.243, opacity: 1.000) +public static let dangerStatusDisabledBg = Color(red: 0.965, green: 0.675, blue: 0.675, opacity: 1.000) +public static let dangerStatusDisabledText = Color(red: 0.918, green: 0.243, blue: 0.243, opacity: 1.000) +public static let dangerStatusHoverBg = Color(red: 0.929, green: 0.349, blue: 0.349, opacity: 1.000) +public static let dangerStatusHoverText = Color(red: 0.992, green: 0.929, blue: 0.929, opacity: 1.000) +public static let dangerStatusText = Color(red: 0.992, green: 0.929, blue: 0.929, opacity: 1.000) +public static let dangerText = Color(red: 0.992, green: 0.929, blue: 0.929, opacity: 1.000) +public static let primaryAccentBg = Color(red: 0.980, green: 0.980, blue: 0.980, opacity: 1.000) +public static let primaryAccentDisabledBg = Color(red: 0.522, green: 0.529, blue: 0.541, opacity: 1.000) +public static let primaryAccentDisabledText = Color(red: 0.980, green: 0.980, blue: 0.980, opacity: 1.000) +public static let primaryAccentHoverBg = Color(red: 0.878, green: 0.878, blue: 0.878, opacity: 1.000) +public static let primaryAccentHoverText = Color(red: 0.392, green: 0.400, blue: 0.408, opacity: 1.000) +public static let primaryAccentText = Color(red: 0.392, green: 0.400, blue: 0.408, opacity: 1.000) +public static let primaryBg = Color(red: 0.243, green: 0.443, blue: 0.918, opacity: 1.000) +public static let primaryDisabledBg = Color(red: 0.910, green: 0.914, blue: 0.933, opacity: 1.000) +public static let primaryDisabledText = Color(red: 0.243, green: 0.443, blue: 0.918, opacity: 1.000) +public static let primaryHoverBg = Color(red: 0.349, green: 0.522, blue: 0.929, opacity: 1.000) +public static let primaryHoverText = Color(red: 0.910, green: 0.914, blue: 0.933, opacity: 1.000) +public static let primaryText = Color(red: 0.910, green: 0.914, blue: 0.933, opacity: 1.000) +public static let secondaryAccentBg = Color(red: 0.980, green: 0.980, blue: 0.980, opacity: 1.000) +public static let secondaryAccentDisabledBg = Color(red: 0.522, green: 0.529, blue: 0.541, opacity: 1.000) +public static let secondaryAccentDisabledText = Color(red: 0.980, green: 0.980, blue: 0.980, opacity: 1.000) +public static let secondaryAccentHoverBg = Color(red: 0.878, green: 0.878, blue: 0.878, opacity: 1.000) +public static let secondaryAccentHoverText = Color(red: 0.392, green: 0.400, blue: 0.408, opacity: 1.000) +public static let secondaryAccentText = Color(red: 0.392, green: 0.400, blue: 0.408, opacity: 1.000) +public static let secondaryBg = Color(red: 0.980, green: 0.980, blue: 0.980, opacity: 1.000) +public static let secondaryDisabledBg = Color(red: 0.522, green: 0.529, blue: 0.541, opacity: 1.000) +public static let secondaryDisabledText = Color(red: 0.980, green: 0.980, blue: 0.980, opacity: 1.000) +public static let secondaryHoverBg = Color(red: 0.878, green: 0.878, blue: 0.878, opacity: 1.000) +public static let secondaryHoverText = Color(red: 0.392, green: 0.400, blue: 0.408, opacity: 1.000) +public static let secondaryText = Color(red: 0.392, green: 0.400, blue: 0.408, opacity: 1.000) +public static let successBg = Color(red: 0.094, green: 0.804, blue: 0.392, opacity: 1.000) +public static let successDisabledBg = Color(red: 0.043, green: 0.357, blue: 0.173, opacity: 1.000) +public static let successDisabledText = Color(red: 0.094, green: 0.804, blue: 0.392, opacity: 1.000) +public static let successHoverBg = Color(red: 0.176, green: 0.902, blue: 0.482, opacity: 1.000) +public static let successHoverText = Color(red: 0.059, green: 0.141, blue: 0.094, opacity: 1.000) +public static let successStatusBg = Color(red: 0.918, green: 0.243, blue: 0.243, opacity: 1.000) +public static let successStatusDisabledBg = Color(red: 0.965, green: 0.675, blue: 0.675, opacity: 1.000) +public static let successStatusDisabledText = Color(red: 0.918, green: 0.243, blue: 0.243, opacity: 1.000) +public static let successStatusHoverBg = Color(red: 0.929, green: 0.349, blue: 0.349, opacity: 1.000) +public static let successStatusHoverText = Color(red: 0.992, green: 0.929, blue: 0.929, opacity: 1.000) +public static let successStatusText = Color(red: 0.992, green: 0.929, blue: 0.929, opacity: 1.000) +public static let successText = Color(red: 0.059, green: 0.141, blue: 0.094, opacity: 1.000) +} diff --git a/assets/generated_templates/DSColorLight.swift b/assets/generated_templates/DSColorLight.swift new file mode 100644 index 0000000..80073b3 --- /dev/null +++ b/assets/generated_templates/DSColorLight.swift @@ -0,0 +1,52 @@ +import SwiftUI +public class DSCoreColorLight { +public static let boxNeutral1 = Color(red: 0.980, green: 0.980, blue: 0.980, opacity: 1.000) +public static let dangerBg = Color(red: 0.835, green: 0.165, blue: 0.165, opacity: 1.000) +public static let dangerDisabledBg = Color(red: 0.898, green: 0.624, blue: 0.624, opacity: 1.000) +public static let dangerDisabledText = Color(red: 0.835, green: 0.165, blue: 0.165, opacity: 1.000) +public static let dangerHoverBg = Color(red: 0.667, green: 0.133, blue: 0.133, opacity: 1.000) +public static let dangerHoverText = Color(red: 1.000, green: 1.000, blue: 1.000, opacity: 1.000) +public static let dangerStatusBg = Color(red: 0.835, green: 0.165, blue: 0.165, opacity: 1.000) +public static let dangerStatusDisabledBg = Color(red: 0.898, green: 0.624, blue: 0.624, opacity: 1.000) +public static let dangerStatusDisabledText = Color(red: 0.835, green: 0.165, blue: 0.165, opacity: 1.000) +public static let dangerStatusHoverBg = Color(red: 0.667, green: 0.133, blue: 0.133, opacity: 1.000) +public static let dangerStatusHoverText = Color(red: 1.000, green: 1.000, blue: 1.000, opacity: 1.000) +public static let dangerStatusText = Color(red: 1.000, green: 1.000, blue: 1.000, opacity: 1.000) +public static let dangerText = Color(red: 1.000, green: 1.000, blue: 1.000, opacity: 1.000) +public static let primaryAccentBg = Color(red: 0.149, green: 0.149, blue: 0.149, opacity: 1.000) +public static let primaryAccentDisabledBg = Color(red: 0.722, green: 0.722, blue: 0.722, opacity: 1.000) +public static let primaryAccentDisabledText = Color(red: 0.149, green: 0.149, blue: 0.149, opacity: 1.000) +public static let primaryAccentHoverBg = Color(red: 0.102, green: 0.102, blue: 0.102, opacity: 1.000) +public static let primaryAccentHoverText = Color(red: 0.922, green: 0.922, blue: 0.922, opacity: 1.000) +public static let primaryAccentText = Color(red: 0.922, green: 0.922, blue: 0.922, opacity: 1.000) +public static let primaryBg = Color(red: 0.149, green: 0.357, blue: 0.851, opacity: 1.000) +public static let primaryDisabledBg = Color(red: 0.847, green: 0.855, blue: 0.875, opacity: 1.000) +public static let primaryDisabledText = Color(red: 0.149, green: 0.357, blue: 0.851, opacity: 1.000) +public static let primaryHoverBg = Color(red: 0.122, green: 0.286, blue: 0.678, opacity: 1.000) +public static let primaryHoverText = Color(red: 0.945, green: 0.949, blue: 0.953, opacity: 1.000) +public static let primaryText = Color(red: 0.945, green: 0.949, blue: 0.953, opacity: 1.000) +public static let secondaryAccentBg = Color(red: 0.149, green: 0.149, blue: 0.149, opacity: 1.000) +public static let secondaryAccentDisabledBg = Color(red: 0.722, green: 0.722, blue: 0.722, opacity: 1.000) +public static let secondaryAccentDisabledText = Color(red: 0.149, green: 0.149, blue: 0.149, opacity: 1.000) +public static let secondaryAccentHoverBg = Color(red: 0.102, green: 0.102, blue: 0.102, opacity: 1.000) +public static let secondaryAccentHoverText = Color(red: 0.922, green: 0.922, blue: 0.922, opacity: 1.000) +public static let secondaryAccentText = Color(red: 0.922, green: 0.922, blue: 0.922, opacity: 1.000) +public static let secondaryBg = Color(red: 0.149, green: 0.149, blue: 0.149, opacity: 1.000) +public static let secondaryDisabledBg = Color(red: 0.722, green: 0.722, blue: 0.722, opacity: 1.000) +public static let secondaryDisabledText = Color(red: 0.149, green: 0.149, blue: 0.149, opacity: 1.000) +public static let secondaryHoverBg = Color(red: 0.102, green: 0.102, blue: 0.102, opacity: 1.000) +public static let secondaryHoverText = Color(red: 0.922, green: 0.922, blue: 0.922, opacity: 1.000) +public static let secondaryText = Color(red: 0.922, green: 0.922, blue: 0.922, opacity: 1.000) +public static let successBg = Color(red: 0.161, green: 0.639, blue: 0.361, opacity: 1.000) +public static let successDisabledBg = Color(red: 0.729, green: 0.933, blue: 0.812, opacity: 1.000) +public static let successDisabledText = Color(red: 0.161, green: 0.639, blue: 0.361, opacity: 1.000) +public static let successHoverBg = Color(red: 0.122, green: 0.478, blue: 0.271, opacity: 1.000) +public static let successHoverText = Color(red: 1.000, green: 1.000, blue: 1.000, opacity: 1.000) +public static let successStatusBg = Color(red: 0.835, green: 0.165, blue: 0.165, opacity: 1.000) +public static let successStatusDisabledBg = Color(red: 0.898, green: 0.624, blue: 0.624, opacity: 1.000) +public static let successStatusDisabledText = Color(red: 0.835, green: 0.165, blue: 0.165, opacity: 1.000) +public static let successStatusHoverBg = Color(red: 0.667, green: 0.133, blue: 0.133, opacity: 1.000) +public static let successStatusHoverText = Color(red: 1.000, green: 1.000, blue: 1.000, opacity: 1.000) +public static let successStatusText = Color(red: 1.000, green: 1.000, blue: 1.000, opacity: 1.000) +public static let successText = Color(red: 1.000, green: 1.000, blue: 1.000, opacity: 1.000) +} diff --git a/src/deserializer.rs b/src/deserializer.rs index b4decb7..788d57d 100644 --- a/src/deserializer.rs +++ b/src/deserializer.rs @@ -53,8 +53,6 @@ pub struct ConfigTokensGlobal { pub figma_source_paths: Option>, #[serde(alias = "figma_output_paths")] pub figma_output_paths: Vec, - #[serde(alias = "output_paths")] - pub output_paths: Vec, #[serde(alias = "style_output_path")] pub style_output_path: String } diff --git a/src/filters/empty.rs b/src/filters/empty.rs new file mode 100644 index 0000000..1e35971 --- /dev/null +++ b/src/filters/empty.rs @@ -0,0 +1,22 @@ +use liquid_core::Result; +use liquid_core::Runtime; +use liquid_core::{Display_filter, Filter, FilterReflection, ParseFilter}; +use liquid_core::{Value, ValueView}; + +#[derive(Clone, ParseFilter, FilterReflection)] +#[filter( + name = "empty", + description = "Return empty only intiialize", + parsed(EmptyFilter) +)] +pub struct Empty; + +#[derive(Debug, Default, Display_filter)] +#[name = "initialize"] +struct EmptyFilter; + +impl Filter for EmptyFilter { + fn evaluate(&self, input: &dyn ValueView, _runtime: &dyn Runtime) -> Result { + return Ok(Value::Nil); + } +} diff --git a/src/general.rs b/src/general.rs index 4505c40..d5fb596 100644 --- a/src/general.rs +++ b/src/general.rs @@ -21,7 +21,7 @@ pub fn get_config(config_file: &str) -> deserializer::TokensConfig { let data_strip_comments = StripComments::new(data.as_bytes()); let token_config: deserializer::TokensConfig = serde_yaml::from_reader(data_strip_comments).expect("Unable to read the json"); - //println!("deserialized token_config = {:?}", token_config); + println!("deserialized token_config = {:?}", token_config); token_config } @@ -30,27 +30,27 @@ pub fn generate_tokens(tokens_config: &deserializer::TokensConfig) -> Vec Vec Vec { - - let mut updated_token_data_list: Vec = Vec::new(); - - for template_config in &tokens_config.templates { - let mut token_data_combined: template::TokenData = Default::default(); - - for token_data in token_data_list { - if let Some(combine_with) = &template_config.combine{ - if combine_with.contains(&token_data.name) { - // we use the first one as the name - // it's also not bad idea to combine all - // or add this as another setting - token_data_combined.name = combine_with[0].to_string(); - token_data_combined.token_value.extend(token_data.token_value.to_owned()); - } else { - updated_token_data_list.push(token_data.to_owned()); - } - } else { - updated_token_data_list.push(token_data.to_owned()); - } - } - - if !token_data_combined.token_value.is_empty() { - updated_token_data_list.push(token_data_combined); - } - } - updated_token_data_list -} - pub fn get_json(path: &str) -> serde_json::Value { println!("path: {}", path); let data = fs::read_to_string(path).expect("Unable to read file"); @@ -185,7 +154,7 @@ pub fn filter_sub_properties(key: String, val: &serde_json::Value, token_data_li if !pureValues { p.push(key.to_owned()); } - let token_value_type = token_type.unwrap_or("").to_string().to_case(Case::Camel); + let token_value_type = token_type.unwrap_or("").to_string(); let value_object = ival; let token_value = template::TokenValue { @@ -206,14 +175,15 @@ pub fn filter_sub_properties(key: String, val: &serde_json::Value, token_data_li }; let mut token_exist = token_data_list.iter_mut().find(|f| f.t_type == token_value.token_type.text); + if let Some(token_e) = token_exist { token_e.token_value.push(token_value); } else { - token.t_type = token_value.token_type.text.to_case(Case::Camel);//deserializer::ConfigTemplateType::from_str(&token_value.token_type.text.to_case(Case::Camel)); + token.t_type = token_value.token_type.text.to_owned();//deserializer::ConfigTemplateType::from_str(&token_value.token_type.text.to_case(Case::Camel)); token.token_value.push(token_value); - + token_data_list.push(token.to_owned()); - } + } } else { diff --git a/src/main.rs b/src/main.rs index b251bf3..a80c55a 100644 --- a/src/main.rs +++ b/src/main.rs @@ -20,6 +20,7 @@ mod filters { pub mod color; pub mod case; pub mod optional; + pub mod empty; } //////////// /// @@ -30,7 +31,7 @@ fn main() { // Covert to usable code let matches: clap::ArgMatches = Command::new("Design Tokens") - .version("3.0.0") + .version("3.1.0") .author("Vladislav R. ") .about("Parses figma design tokens to usable code") .arg(Arg::new("config").short('c').long("config").action(ArgAction::Set).required(true)) diff --git a/src/setup.rs b/src/setup.rs index df34410..3ec7178 100644 --- a/src/setup.rs +++ b/src/setup.rs @@ -54,6 +54,7 @@ fn template_content_custom( template_update_list_values(file_data_list, &mut current_template, template_type.to_owned(), value); }, deserializer::CustomConfigTempalteTypeValue::Values(values) => { + template_list_replaced_values(file_data_list, &mut current_template, template_type.to_owned(),values); }, } @@ -112,6 +113,7 @@ fn template_replaced_values(index: usize, template: &String, pure_values: &Vec, globals: &mut liquid::Object) -> Option { let token_value = data; let mut template: Option = Some(pure_template.to_string()); - // dbg!(token_value); - // dbg!(fields); + for field_data in fields { let field_name = field_data.key_full.as_str(); let field_name_without_index = field_data.key_without_index.as_str(); @@ -154,22 +155,25 @@ pub fn template_set_values(index: usize, data: &template::TokenValue, pure_templ } else { match &token_value.value { deserializer::TokenDataType::Value(value) => { - let mut pure_value = value.get(field_name_without_index); + if pure_value.is_none() { if let Some(val) = value.get("value") { match val { serde_json::Value::Array(values) => { pure_value = val.get(field_index)?.get(field_name_without_index); }, - serde_json::Value::Object(obj_val) => { + serde_json::Value::Object(obj_val) => { pure_value = obj_val.get(field_name_without_index); + } _ => { - + } }; } + } else { + } template::set_optional_global(globals, field_name, pure_value.cloned(), ""); diff --git a/src/template.rs b/src/template.rs index e41a442..1b74bfa 100644 --- a/src/template.rs +++ b/src/template.rs @@ -1,5 +1,6 @@ use easy_color::{ColorError, IntoRGBA}; use easy_color::{Hex, IntoHex}; +use liquid_core::ValueView; use serde::de::value::MapAccessDeserializer; use std::cell::RefCell; use std::rc::Rc; @@ -96,8 +97,16 @@ pub fn set_optional_global(globals: &mut liquid_core::Object, key: &str, value: value_transformed = liquid::model::Value::scalar(pure_value); } }, + serde_json::Value::Array(pure_value) => { + let obj = liquid_core::to_value(&pure_value).unwrap(); + value_transformed = obj.to_owned(); + }, + serde_json::Value::Object(pure_value) => { + let obj = liquid_core::to_value(&pure_value).unwrap(); + value_transformed = obj.to_owned(); + }, _ => { - globals.insert(key.to_owned().into(), liquid::model::Value::scalar(default.to_string())); + value_transformed = liquid::model::Value::scalar(default.to_string()); } } globals.insert(key.to_owned().into(), value_transformed);