UNPKG

style-dictionary

Version:

Style once, use everywhere. A build system for creating cross-platform styles.

github.com/amzn/style-dictionary

amzn/style-dictionary

3 lines (2 loc) • 5.32 kB
1
2
3
declare const _default: "<%\n //\n // Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.\n //\n // Licensed under the Apache License, Version 2.0 (the \"License\").\n // You may not use this file except in compliance with the License.\n // A copy of the License is located at\n //\n // http://www.apache.org/licenses/LICENSE-2.0\n //\n // or in the \"license\" file accompanying this file. This file is distributed\n // on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either\n // express or implied. See the License for the specific language governing\n // permissions and limitations under the License.\n\n const colorRegex = /^(#(?:[\\da-f]{3}){1,2}|rgb\\((?:\\d{1,3},\\s*){2}\\d{1,3}\\)|rgba\\((?:\\d{1,3},\\s*){3}\\d*\\.?\\d+\\)|hsl\\(\\d{1,3}(?:,\\s*\\d{1,3}%){2}\\)|hsla\\(\\d{1,3}(?:,\\s*\\d{1,3}%){2},\\s*\\d*\\.?\\d+\\)|IndianRed|LightCoral|Salmon|DarkSalmon|LightSalmon|Crimson|Red|FireBrick|DarkRed|Pink|LightPink|HotPink|DeepPink|MediumVioletRed|PaleVioletRed|LightSalmon|Coral|Tomato|OrangeRed|DarkOrange|Orange|Gold|Yellow|LightYellow|LemonChiffon|LightGoldenrodYellow|PapayaWhip|Moccasin|PeachPuff|PaleGoldenrod|Khaki|DarkKhaki|Lavender|Thistle|Plum|Violet|Orchid|Fuchsia|Magenta|MediumOrchid|MediumPurple|RebeccaPurple|BlueViolet|DarkViolet|DarkOrchid|DarkMagenta|Purple|Indigo|SlateBlue|DarkSlateBlue|MediumSlateBlue|GreenYellow|Chartreuse|LawnGreen|Lime|LimeGreen|PaleGreen|LightGreen|MediumSpringGreen|SpringGreen|MediumSeaGreen|SeaGreen|ForestGreen|Green|DarkGreen|YellowGreen|OliveDrab|Olive|DarkOliveGreen|MediumAquamarine|DarkSeaGreen|LightSeaGreen|DarkCyan|Teal|Aqua|Cyan|LightCyan|PaleTurquoise|Aquamarine|Turquoise|MediumTurquoise|DarkTurquoise|CadetBlue|SteelBlue|LightSteelBlue|PowderBlue|LightBlue|SkyBlue|LightSkyBlue|DeepSkyBlue|DodgerBlue|CornflowerBlue|MediumSlateBlue|RoyalBlue|Blue|MediumBlue|DarkBlue|Navy|MidnightBlue|Cornsilk|BlanchedAlmond|Bisque|NavajoWhite|Wheat|BurlyWood|Tan|RosyBrown|SandyBrown|Goldenrod|DarkGoldenrod|Peru|Chocolate|SaddleBrown|Sienna|Brown|Maroon|White|Snow|HoneyDew|MintCream|Azure|AliceBlue|GhostWhite|WhiteSmoke|SeaShell|Beige|OldLace|FloralWhite|Ivory|AntiqueWhite|Linen|LavenderBlush|MistyRose|Gainsboro|LightGray|Silver|DarkGray|Gray|DimGray|LightSlateGray|SlateGray|DarkSlateGray|Black)$/i;\n\n const checkForStyle = function(token) {\n let toStyle = \"\";\n const value = options.usesDtcg ? token.$value : token.value;\n if(value.match(colorRegex)) {\n if(token.path.indexOf('font')>-1) {\n toStyle += \"color:\" + value + \";\";\n }\n else {\n toStyle += \"background-color:\" + value + \";\";\n }\n if (token.attributes.font === 'inverse') {\n toStyle += \"color:var(--color-font-inverse-base);\";\n }\n }\n return toStyle;\n };\n\n const checkPropGetInverse = function (token) {\n if(token.path.indexOf('inverse')>-1) {\n return 'inverse';\n }\n };\n%>\n<html>\n<head>\n <link rel=\"stylesheet\" href=\"css/normalize.css\">\n <link rel=\"stylesheet\" href=\"css/fonts.css\">\n <link rel=\"stylesheet\" href=\"css/variables.css\">\n <link rel=\"stylesheet\" href=\"css/main.css\">\n</head>\n<body>\n <div class=\"nav-bar\">\n <div class=\"title\">Style Guide</div>\n <div class=\"nav-search\">\n <span>Search for</span>\n <input class=\"search-box\" type=\"text\" />\n <span>in </span>\n <label lass=\"search-modifier\" for=\"use_path\"><input class=\"search-modifier use_path\" name=\"use_path\" type=\"checkbox\" checked />name</label>\n <label lass=\"search-modifier\" for=\"use_value\"><input class=\"search-modifier use_value\" name=\"use_value\" type=\"checkbox\" checked />value</label>\n <label lass=\"search-modifier\" for=\"use_attributes\"><input class=\"search-modifier use_attributes\" name=\"use_attributes\" type=\"checkbox\" checked />attributes</label>\n </div>\n </div>\n\n <div class=\"style-guide\">\n <% _.each(allTokens, function(token) { %>\n <div class=\"style-guide-token <%= checkPropGetInverse(token) %>\" data-path=\"<%= token.path.join(\"-\") %>\" style=\"<%= checkForStyle(token) %>\">\n <div class=\"style-guide-token-path\"><%= token.path.join(\".\") %></div>\n <div class=\"style-guide-token-name\"><%= token.name %></div>\n <% if(token.attributes && JSON.stringify(token.attributes)!==\"{}\") { %>\n <div class=\"style-guide-token-attributes-control\"></div>\n <% } %>\n <div class=\"style-guide-token-value\"><%= options.usesDtcg ? token.$value : token.value %><% if(token.type === 'content' && token.attributes.type === 'icon') { %><i class=\"icon-font\"><%= options.usesDtcg ? token.$value : token.value %></i><% } %></div>\n <% if(token.attributes && JSON.stringify(token.attributes)!==\"{}\") { %>\n <div class=\"style-guide-token-attributes\"><%= JSON.stringify(token.attributes) %></div>\n <% } %>\n </div>\n <% }); %>\n </div>\n\n <script src=\"http://code.jquery.com/jquery-3.1.1.min.js\"\n integrity=\"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=\" crossorigin=\"anonymous\"></script>\n <script src=\"js/style-dictionary-properties.js\"></script>\n <script src=\"js/main.js\"></script>\n</body>"; export default _default;