@lumx/core 3.0.7 → 3.1.0

package/style-dictionary/properties/components/text-field.json

@@ -0,0 +1,167 @@
+{
+    "text-field": {
+        "input": {
+            "min-height": "{size.m}",
+            "padding": {
+                "horizontal": "{spacing.unit.medium}"
+            },
+            "border-radius": "{border-radius}"
+        },
+        "state-default": {
+            "input": {
+                "border": {
+                    "top": {
+                        "width": { "value": "1px" }
+                    },
+                    "right": {
+                        "width": { "value": "1px" }
+                    },
+                    "bottom": {
+                        "width": { "value": "1px" }
+                    },
+                    "left": {
+                        "width": { "value": "1px" }
+                    }
+                }
+            },
+            "theme-light": {
+                "header": {
+                    "label": {
+                        "color": "{color.dark.N}"
+                    }
+                },
+                "input": {
+                    "background-color": "{color.dark.L6}",
+                    "border-color": "{color.dark.L4}",
+                    "content": {
+                        "color": "{color.dark.N}"
+                    },
+                    "placeholder": {
+                        "color": "{color.dark.L2}"
+                    }
+                }
+            },
+            "theme-dark": {
+                "header": {
+                    "label": {
+                        "color": "{color.light.N}"
+                    }
+                },
+                "input": {
+                    "background-color": "{color.light.L6}",
+                    "border-color": "{color.light.L4}",
+                    "content": {
+                        "color": "{color.light.N}"
+                    },
+                    "placeholder": {
+                        "color": "{color.light.L2}"
+                    }
+                }
+            }
+        },
+        "state-hover": {
+            "input": {
+                "border": {
+                    "top": {
+                        "width": { "value": "1px" }
+                    },
+                    "right": {
+                        "width": { "value": "1px" }
+                    },
+                    "bottom": {
+                        "width": { "value": "1px" }
+                    },
+                    "left": {
+                        "width": { "value": "1px" }
+                    }
+                }
+            },
+            "theme-light": {
+                "header": {
+                    "label": {
+                        "color": "{color.dark.N}"
+                    }
+                },
+                "input": {
+                    "background-color": "{color.dark.L5}",
+                    "border-color": "{color.dark.L4}",
+                    "content": {
+                        "color": "{color.dark.N}"
+                    },
+                    "placeholder": {
+                        "color": "{color.dark.L2}"
+                    }
+                }
+            },
+            "theme-dark": {
+                "header": {
+                    "label": {
+                        "color": "{color.light.N}"
+                    }
+                },
+                "input": {
+                    "background-color": "{color.light.L5}",
+                    "border-color": "{color.light.L4}",
+                    "content": {
+                        "color": "{color.light.N}"
+                    },
+                    "placeholder": {
+                        "color": "{color.light.L2}"
+                    }
+                }
+            }
+        },
+        "state-focus": {
+            "input": {
+                "border": {
+                    "top": {
+                        "width": { "value": "2px" }
+                    },
+                    "right": {
+                        "width": { "value": "2px" }
+                    },
+                    "bottom": {
+                        "width": { "value": "2px" }
+                    },
+                    "left": {
+                        "width": { "value": "2px" }
+                    }
+                }
+            },
+            "theme-light": {
+                "header": {
+                    "label": {
+                        "color": "{color.dark.N}"
+                    }
+                },
+                "input": {
+                    "background-color": "{color.light.N}",
+                    "border-color": "{color.primary.N}",
+                    "content": {
+                        "color": "{color.dark.N}"
+                    },
+                    "placeholder": {
+                        "color": "{color.dark.L2}"
+                    }
+                }
+            },
+            "theme-dark": {
+                "header": {
+                    "label": {
+                        "color": "{color.light.N}"
+                    }
+                },
+                "input": {
+                    "background-color": { "value": "transparent" },
+                    "border-color": "{color.light.N}",
+                    "content": {
+                        "color": "{color.light.N}"
+                    },
+                    "placeholder": {
+                        "color": "{color.light.L2}"
+                    }
+                }
+            }
+        }
+    }
+}

package/style-dictionary/properties/core/border-radius.json

@@ -0,0 +1,3 @@
+{
+    "border-radius": { "value": "4px" }
+}

package/style-dictionary/properties/core/color.json

@@ -0,0 +1,421 @@
+{
+    "color": {
+        "dark": {
+            "N": {
+                "value": "#000000",
+                "opacity": "0.87",
+                "version": "0.22",
+                "comment": "Neutral dark color",
+                "preferCSSVariable": true
+            },
+            "L1": {
+                "value": "{color.dark.N.value}",
+                "opacity": "0.7",
+                "version": "0.22",
+                "comment": "Base dark color with 70% opacity",
+                "preferCSSVariable": true
+            },
+            "L2": {
+                "value": "{color.dark.N.value}",
+                "opacity": "0.54",
+                "version": "0.22",
+                "comment": "Base dark color with 54% opacity",
+                "preferCSSVariable": true
+            },
+            "L3": {
+                "value": "{color.dark.N.value}",
+                "opacity": "0.38",
+                "version": "0.22",
+                "comment": "Base dark color with 38% opacity",
+                "preferCSSVariable": true
+            },
+            "L4": {
+                "value": "{color.dark.N.value}",
+                "opacity": "0.2",
+                "version": "0.22",
+                "comment": "Base dark color with 20% opacity",
+                "preferCSSVariable": true
+            },
+            "L5": {
+                "value": "{color.dark.N.value}",
+                "opacity": "0.12",
+                "version": "0.22",
+                "comment": "Base dark color with 12% opacity",
+                "preferCSSVariable": true
+            },
+            "L6": {
+                "value": "{color.dark.N.value}",
+                "opacity": "0.05",
+                "version": "0.22",
+                "comment": "Base dark color with 5% opacity",
+                "preferCSSVariable": true
+            }
+        },
+        "light": {
+            "N": {
+                "value": "#fff",
+                "version": "0.22",
+                "comment": "Neutral light color",
+                "preferCSSVariable": true
+            },
+            "L1": {
+                "value": "{color.light.N.value}",
+                "opacity": "0.9",
+                "version": "0.22",
+                "comment": "Base light color with 90% opacity",
+                "preferCSSVariable": true
+            },
+            "L2": {
+                "value": "{color.light.N.value}",
+                "opacity": "0.8",
+                "version": "0.22",
+                "comment": "Base light color with 80% opacity",
+                "preferCSSVariable": true
+            },
+            "L3": {
+                "value": "{color.light.N.value}",
+                "opacity": "0.6",
+                "version": "0.22",
+                "comment": "Base light color with 60% opacity",
+                "preferCSSVariable": true
+            },
+            "L4": {
+                "value": "{color.light.N.value}",
+                "opacity": "0.4",
+                "version": "0.22",
+                "comment": "Base light color with 40% opacity",
+                "preferCSSVariable": true
+            },
+            "L5": {
+                "value": "{color.light.N.value}",
+                "opacity": "0.2",
+                "version": "0.22",
+                "comment": "Base light color with 20% opacity",
+                "preferCSSVariable": true
+            },
+            "L6": {
+                "value": "{color.light.N.value}",
+                "opacity": "0.1",
+                "version": "0.22",
+                "comment": "Base light color with 10% opacity",
+                "preferCSSVariable": true
+            }
+        },
+        "blue": {
+            "D2": {
+                "value": "#1546c1",
+                "version": "0.22",
+                "comment": "Darkest blue color",
+                "preferCSSVariable": true
+            },
+            "D1": {
+                "value": "#184ed8",
+                "version": "0.22",
+                "comment": "Dark blue color",
+                "preferCSSVariable": true
+            },
+            "N": {
+                "value": "#245be7",
+                "version": "0.22",
+                "comment": "Neutral blue color",
+                "preferCSSVariable": true
+            },
+            "L1": {
+                "value": "{color.blue.N.value}",
+                "opacity": "0.8",
+                "version": "0.22",
+                "comment": "Base blue color with 80% opacity",
+                "preferCSSVariable": true
+            },
+            "L2": {
+                "value": "{color.blue.N.value}",
+                "opacity": "0.6",
+                "version": "0.22",
+                "comment": "Base blue color with 60% opacity",
+                "preferCSSVariable": true
+            },
+            "L3": {
+                "value": "{color.blue.N.value}",
+                "opacity": "0.4",
+                "version": "0.22",
+                "comment": "Base blue color with 40% opacity",
+                "preferCSSVariable": true
+            },
+            "L4": {
+                "value": "{color.blue.N.value}",
+                "opacity": "0.2",
+                "version": "0.22",
+                "comment": "Base blue color with 20% opacity",
+                "preferCSSVariable": true
+            },
+            "L5": {
+                "value": "{color.blue.N.value}",
+                "opacity": "0.1",
+                "version": "0.22",
+                "comment": "Base blue color with 10% opacity",
+                "preferCSSVariable": true
+            },
+            "L6": {
+                "value": "{color.blue.N.value}",
+                "opacity": "0.05",
+                "version": "0.22",
+                "comment": "Base blue color with 5% opacity",
+                "preferCSSVariable": true
+            }
+        },
+        "green": {
+            "D2": {
+                "value": "#1a6e59",
+                "version": "0.22",
+                "comment": "Darkest green color",
+                "preferCSSVariable": true
+            },
+            "D1": {
+                "value": "#177a61",
+                "version": "0.22",
+                "comment": "Dark green color",
+                "preferCSSVariable": true
+            },
+            "N": {
+                "value": "#138669",
+                "version": "0.22",
+                "comment": "Neutral green color",
+                "preferCSSVariable": true
+            },
+            "L1": {
+                "value": "{color.green.N.value}",
+                "opacity": "0.8",
+                "version": "0.22",
+                "comment": "Base green color with 80% opacity",
+                "preferCSSVariable": true
+            },
+            "L2": {
+                "value": "{color.green.N.value}",
+                "opacity": "0.6",
+                "version": "0.22",
+                "comment": "Base green color with 60% opacity",
+                "preferCSSVariable": true
+            },
+            "L3": {
+                "value": "{color.green.N.value}",
+                "opacity": "0.4",
+                "version": "0.22",
+                "comment": "Base green color with 40% opacity",
+                "preferCSSVariable": true
+            },
+            "L4": {
+                "value": "{color.green.N.value}",
+                "opacity": "0.2",
+                "version": "0.22",
+                "comment": "Base green color with 20% opacity",
+                "preferCSSVariable": true
+            },
+            "L5": {
+                "value": "{color.green.N.value}",
+                "opacity": "0.1",
+                "version": "0.22",
+                "comment": "Base green color with 10% opacity",
+                "preferCSSVariable": true
+            },
+            "L6": {
+                "value": "{color.green.N.value}",
+                "opacity": "0.05",
+                "version": "0.22",
+                "comment": "Base green color with 5% opacity",
+                "preferCSSVariable": true
+            }
+        },
+        "yellow": {
+            "D2": {
+                "value": "#ffa125",
+                "version": "0.22",
+                "comment": "Darkest yellow color",
+                "preferCSSVariable": true
+            },
+            "D1": {
+                "value": "#ffb325",
+                "version": "0.22",
+                "comment": "Dark yellow color",
+                "preferCSSVariable": true
+            },
+            "N": {
+                "value": "#ffc425",
+                "version": "0.22",
+                "comment": "Neutral yellow color",
+                "preferCSSVariable": true
+            },
+            "L1": {
+                "value": "{color.yellow.N.value}",
+                "opacity": "0.9",
+                "version": "0.22",
+                "comment": "Base yellow color with 80% opacity",
+                "preferCSSVariable": true
+            },
+            "L2": {
+                "value": "{color.yellow.N.value}",
+                "opacity": "0.8",
+                "version": "0.22",
+                "comment": "Base yellow color with 70% opacity",
+                "preferCSSVariable": true
+            },
+            "L3": {
+                "value": "{color.yellow.N.value}",
+                "opacity": "0.6",
+                "version": "0.22",
+                "comment": "Base yellow color with 60% opacity",
+                "preferCSSVariable": true
+            },
+            "L4": {
+                "value": "{color.yellow.N.value}",
+                "opacity": "0.48",
+                "version": "0.22",
+                "comment": "Base yellow color with 40% opacity",
+                "preferCSSVariable": true
+            },
+            "L5": {
+                "value": "{color.yellow.N.value}",
+                "opacity": "0.24",
+                "version": "0.22",
+                "comment": "Base yellow color with 20% opacity",
+                "preferCSSVariable": true
+            },
+            "L6": {
+                "value": "{color.yellow.N.value}",
+                "opacity": "0.12",
+                "version": "0.22",
+                "comment": "Base yellow color with 10% opacity",
+                "preferCSSVariable": true
+            }
+        },
+        "red": {
+            "D2": {
+                "value": "#be1E46",
+                "version": "0.22",
+                "comment": "Darkest red color",
+                "preferCSSVariable": true
+            },
+            "D1": {
+                "value": "#d42148",
+                "version": "0.22",
+                "comment": "Dark red color",
+                "preferCSSVariable": true
+            },
+            "N": {
+                "value": "#df3050",
+                "version": "0.22",
+                "comment": "Neutral red color",
+                "preferCSSVariable": true
+            },
+            "L1": {
+                "value": "{color.red.N.value}",
+                "opacity": "0.8",
+                "version": "0.22",
+                "comment": "Base red color with 80% opacity",
+                "preferCSSVariable": true
+            },
+            "L2": {
+                "value": "{color.red.N.value}",
+                "opacity": "0.6",
+                "version": "0.22",
+                "comment": "Base red color with 60% opacity",
+                "preferCSSVariable": true
+            },
+            "L3": {
+                "value": "{color.red.N.value}",
+                "opacity": "0.4",
+                "version": "0.22",
+                "comment": "Base red color with 40% opacity",
+                "preferCSSVariable": true
+            },
+            "L4": {
+                "value": "{color.red.N.value}",
+                "opacity": "0.2",
+                "version": "0.22",
+                "comment": "Base red color with 20% opacity",
+                "preferCSSVariable": true
+            },
+            "L5": {
+                "value": "{color.red.N.value}",
+                "opacity": "0.1",
+                "version": "0.22",
+                "comment": "Base red color with 10% opacity",
+                "preferCSSVariable": true
+            },
+            "L6": {
+                "value": "{color.red.N.value}",
+                "opacity": "0.05",
+                "version": "0.22",
+                "comment": "Base red color with 5% opacity",
+                "preferCSSVariable": true
+            }
+        },
+        "grey": {
+            "N": {
+                "value": "#757575",
+                "version": "0.22",
+                "comment": "Neutral grey color",
+                "preferCSSVariable": true
+            },
+            "L1": {
+                "value": "{color.grey.N.value}",
+                "opacity": "0.8",
+                "version": "0.22",
+                "comment": "Base grey color with 80% opacity",
+                "preferCSSVariable": true
+            },
+            "L2": {
+                "value": "{color.grey.N.value}",
+                "opacity": "0.6",
+                "version": "0.22",
+                "comment": "Base grey color with 60% opacity",
+                "preferCSSVariable": true
+            },
+            "L3": {
+                "value": "{color.grey.N.value}",
+                "opacity": "0.4",
+                "version": "0.22",
+                "comment": "Base grey color with 40% opacity",
+                "preferCSSVariable": true
+            },
+            "L4": {
+                "value": "{color.grey.N.value}",
+                "opacity": "0.2",
+                "version": "0.22",
+                "comment": "Base grey color with 20% opacity",
+                "preferCSSVariable": true
+            },
+            "L5": {
+                "value": "{color.grey.N.value}",
+                "opacity": "0.1",
+                "version": "0.22",
+                "comment": "Base grey color with 10% opacity",
+                "preferCSSVariable": true
+            },
+            "L6": {
+                "value": "{color.grey.N.value}",
+                "opacity": "0.05",
+                "version": "0.22",
+                "comment": "Base grey color with 5% opacity",
+                "preferCSSVariable": true
+            }
+        },
+        "primary": {
+            "$extend": "{color.blue}",
+            "preferCSSVariable": true,
+            "$config.scss": {
+                "aliasEquivalentCSSVariable": true
+            }
+        },
+        "secondary": {
+            "$extend": "{color.green}",
+            "preferCSSVariable": true,
+            "$config.scss": {
+                "aliasEquivalentCSSVariable": true
+            }
+        },
+        "accent": "{color.secondary}",
+        "black": "{color.dark}",
+        "white": "{color.light}",
+        "orange": "{color.yellow}"
+    }
+}

package/style-dictionary/properties/core/size.json

@@ -0,0 +1,11 @@
+{
+    "size": {
+        "xxs": { "value": "14px" },
+        "xs": { "value": "20px" },
+        "s": { "value": "24px" },
+        "m": { "value": "36px" },
+        "l": { "value": "64px" },
+        "xl": { "value": "128px" },
+        "xxl": { "value": "256px" }
+    }
+}

package/style-dictionary/properties/core/spacing.json

@@ -0,0 +1,11 @@
+{
+    "spacing": {
+        "unit": {
+            "tiny": { "value": "4px" },
+            "regular": { "value": "8px" },
+            "medium": { "value": "12px" },
+            "big": { "value": "16px" },
+            "huge": { "value": "24px" }
+        }
+    }
+}