├── .npmrc
├── .gitignore
├── .babelrc
├── .prettierrc
├── .eslintignore
├── .flowconfig
├── src
    ├── convertHexToRgba.js.flow
    ├── theo
    │   ├── setup.js
    │   ├── generate-theo-parser.js
    │   └── kiwi-html.js
    ├── convertHexToRgba.js
    ├── foundation.js.flow
    ├── foundation.js
    ├── __tests__
    │   └── index.test.js
    ├── index.js.flow
    └── index.d.ts
├── .dependabot
    └── config.yml
├── .editorconfig
├── .babel-es
├── .eslintTS.js
├── tsconfig.json
├── .circleci
    └── config.yml
├── scripts
    ├── generateXMLDesignTokens.js
    └── __tests__
    │   └── generateXMLDesignTokens.js
├── .eslintrc
├── package.json
├── .github
    └── foundation.md
├── README.md
└── output
    ├── theo-spec.sass
    ├── theo-spec.common.js
    ├── theo-spec.less
    ├── theo-spec.scss
    ├── theo-spec.styl
    └── theo-spec.json


/.npmrc:
--------------------------------------------------------------------------------
1 | scope=@kiwicom
2 | access=public


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | .idea
3 | es
4 | lib
5 | .vscode
6 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env", "@babel/flow"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "printWidth": 100,
3 |   "trailingComma": "all"
4 | }
5 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | flow-typed
3 | output
4 | pages
5 | es
6 | src/theo
7 | lib
8 | 


--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
 1 | [ignore]
 2 | 
 3 | [include]
 4 | 
 5 | [libs]
 6 | 
 7 | [lints]
 8 | 
 9 | [options]
10 | 
11 | [strict]
12 | 


--------------------------------------------------------------------------------
/src/convertHexToRgba.js.flow:
--------------------------------------------------------------------------------
1 | // @flow
2 | export type ConvertHexToRgba = (color: string, opacity: number) => string;
3 | 
4 | declare export default ConvertHexToRgba;
5 | 


--------------------------------------------------------------------------------
/.dependabot/config.yml:
--------------------------------------------------------------------------------
1 | version: 1
2 | update_configs:
3 |   - package_manager: 'javascript'
4 |     directory: '/'
5 |     update_schedule: 'live'
6 |     version_requirement_updates: 'increase_versions'
7 |     commit_message:
8 |       prefix: 'chore'
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/.babel-es:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["@babel/flow"],
 3 |   "plugins": [
 4 |     [
 5 |       "replace-import-path",
 6 |       {
 7 |         "src": "ramda/src/mergeDeepRight",
 8 |         "dest": "ramda/es/mergeDeepRight"
 9 |       }
10 |     ]
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/.eslintTS.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   parser: "@typescript-eslint/parser",
 3 |   extends: [
 4 |     "plugin:@typescript-eslint/recommended",
 5 |     "prettier/@typescript-eslint",
 6 |     "plugin:prettier/recommended",
 7 |   ],
 8 |   parserOptions: {
 9 |     ecmaVersion: 2018,
10 |     sourceType: "module",
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/src/theo/setup.js:
--------------------------------------------------------------------------------
 1 | const html = require("./kiwi-html");
 2 | 
 3 | module.exports = theo => {
 4 |   theo.registerValueTransform(
 5 |     "addpx",
 6 |     prop => prop.get("type") === "size",
 7 |     prop => `${prop.get("value")}px`,
 8 |   );
 9 |   theo.registerTransform("web", ["addpx"]);
10 |   theo.registerFormat("kiwi.html", html);
11 | };
12 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["esnext", "dom"],
 4 |     "strict": true,
 5 |     "noImplicitAny": false,
 6 |     "moduleResolution": "node",
 7 |     "jsx": "preserve",
 8 |     "baseUrl": "./"
 9 |   },
10 |   "include": [
11 |     "src/**/*"
12 |   ],
13 |   "exclude": [
14 |     "node_modules",
15 |     "lib",
16 |     "umd",
17 |     "es"
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/src/convertHexToRgba.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import type { ConvertHexToRgba } from "./convertHexToRgba";
 3 | 
 4 | const convertHexToRgba: ConvertHexToRgba = (color, opacity) => {
 5 |   const removeHash = color.replace("#", "");
 6 |   const hex = removeHash.length === 3 ? removeHash + removeHash : removeHash;
 7 |   const red = parseInt(hex.substring(0, 2), 16);
 8 |   const green = parseInt(hex.substring(2, 4), 16);
 9 |   const blue = parseInt(hex.substring(4, 6), 16);
10 |   return `rgba(${red}, ${green}, ${blue}, ${opacity / 100})`;
11 | };
12 | 
13 | export default convertHexToRgba;
14 | 


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   test:
 4 |     docker:
 5 |       - image: circleci/node:10
 6 |     steps:
 7 |       - checkout
 8 |       - restore_cache:
 9 |           keys:
10 |             - v1-dependencies-{{ checksum "yarn.lock" }}
11 |             - v1-dependencies-
12 |       - run: yarn
13 |       - save_cache:
14 |           key: v1-dependencies-{{ checksum "yarn.lock" }}
15 |           paths:
16 |             - node_modules
17 |       - run:
18 |           name: Install dependencies
19 |           command: yarn
20 |       - run:
21 |           name: Run all tests
22 |           command: yarn test-ci
23 |       - run:
24 |           name: Run build (sanity check)
25 |           command: yarn build
26 | 
27 | workflows:
28 |   version: 2
29 |   test_branch:
30 |     jobs:
31 |       - test
32 | 


--------------------------------------------------------------------------------
/scripts/generateXMLDesignTokens.js:
--------------------------------------------------------------------------------
 1 | // @noflow
 2 | /* eslint-disable import/no-extraneous-dependencies */
 3 | import xml from "xml";
 4 | import fsx from "fs-extra";
 5 | 
 6 | import { defaultTokens } from "../src";
 7 | 
 8 | /**
 9 |  * Expose design tokens in XML format to be consumed by Exponea.
10 |  */
11 | 
12 | const generateXMLDesignTokens = () => {
13 |   const content = xml(
14 |     {
15 |       designTokens: Object.entries(defaultTokens).map(([name, value]) => ({
16 |         token: [{ name }, { value }],
17 |       })),
18 |     },
19 |     {
20 |       indent: "  ",
21 |     },
22 |   );
23 | 
24 |   fsx.mkdirpSync("lib");
25 |   fsx.writeFileSync("lib/index.xml", content);
26 | };
27 | 
28 | if (process.env.NODE_RUN) {
29 |   generateXMLDesignTokens();
30 | }
31 | 
32 | export default generateXMLDesignTokens;
33 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "jest": true
 4 |   },
 5 |   "extends": [
 6 |     "airbnb-base",
 7 |     "plugin:flowtype/recommended",
 8 |     "prettier",
 9 |     "prettier/flowtype"
10 |   ],
11 |   "plugins": [
12 |     "import",
13 |     "flowtype",
14 |     "prettier",
15 |     "jest"
16 |   ],
17 |   "rules": {
18 |     "prettier/prettier": "error",
19 |     "import/order": [
20 |       "error",
21 |       {
22 |         "groups": [["builtin", "external"], ["parent", "sibling"], "index"],
23 |         "newlines-between": "always"
24 |       }
25 |     ],
26 |     "import/newline-after-import": "error",
27 |     "import/no-mutable-exports": "error",
28 |     "import/no-absolute-path": "error",
29 |     "flowtype/require-valid-file-annotation": ["error", "always"],
30 |     "import/no-self-import": "off"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/scripts/__tests__/generateXMLDesignTokens.js:
--------------------------------------------------------------------------------
 1 | // @noflow
 2 | /* eslint-disable global-require */
 3 | import fs from "fs";
 4 | 
 5 | import generateXMLDesignTokens from "../generateXMLDesignTokens";
 6 | 
 7 | jest.mock("../../src", () => ({
 8 |   defaultTokens: {
 9 |     black: "#000",
10 |     white: "#fff",
11 |     red: "#f00",
12 |   },
13 | }));
14 | 
15 | jest.mock("fs", () => require("memfs").fs);
16 | 
17 | describe(generateXMLDesignTokens.name, () => {
18 |   it("writes tokens into an XML file", () => {
19 |     generateXMLDesignTokens();
20 |     const content = fs.readFileSync("lib/index.xml");
21 |     expect(content.toString()).toMatchInlineSnapshot(`
22 |       "<designTokens>
23 |         <token>
24 |           <name>black</name>
25 |           <value>#000</value>
26 |         </token>
27 |         <token>
28 |           <name>white</name>
29 |           <value>#fff</value>
30 |         </token>
31 |         <token>
32 |           <name>red</name>
33 |           <value>#f00</value>
34 |         </token>
35 |       </designTokens>"
36 |     `);
37 |   });
38 | });
39 | 


--------------------------------------------------------------------------------
/src/foundation.js.flow:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | 
  3 | export type ProductColor = {|
  4 |   light: string,
  5 |   lightHover: string,
  6 |   lightActive: string,
  7 |   normal: string,
  8 |   normalHover: string,
  9 |   normalActive: string,
 10 |   dark: string,
 11 |   darkHover: string,
 12 |   darkActive: string,
 13 |   darker: string,
 14 | |};
 15 | 
 16 | export type StatusColor = {|
 17 |   light: string,
 18 |   lightHover: string,
 19 |   lightActive: string,
 20 |   normal: string,
 21 |   normalHover: string,
 22 |   normalActive: string,
 23 |   dark: string,
 24 |   darkHover: string,
 25 |   darkActive: string,
 26 |   darker: string,
 27 | |};
 28 | 
 29 | export type WhiteColor = {|
 30 |   normal: string,
 31 |   normalHover: string,
 32 |   normalActive: string,
 33 | |};
 34 | 
 35 | export type CloudColor = {|
 36 |   light: string,
 37 |   lightHover: string,
 38 |   lightActive: string,
 39 |   normal: string,
 40 |   normalHover: string,
 41 |   normalActive: string,
 42 |   dark: string,
 43 | |};
 44 | 
 45 | export type InkColor = {|
 46 |   lighter: string,
 47 |   lighterHover: string,
 48 |   lighterActive: string,
 49 |   light: string,
 50 |   lightHover: string,
 51 |   lightActive: string,
 52 |   normal: string,
 53 |   normalHover: string,
 54 |   normalActive: string,
 55 | |};
 56 | 
 57 | export type SocialColor = {|
 58 |   facebook: string,
 59 |   facebookHover: string,
 60 |   facebookActive: string,
 61 | |};
 62 | 
 63 | export type Palette = {|
 64 |   product: ProductColor,
 65 |   white: WhiteColor,
 66 |   cloud: CloudColor,
 67 |   ink: InkColor,
 68 |   orange: StatusColor,
 69 |   red: StatusColor,
 70 |   green: StatusColor,
 71 |   blue: StatusColor,
 72 |   social: SocialColor,
 73 | |};
 74 | 
 75 | export type Base = {|
 76 |   fontFamily: string,
 77 |   fontSizeSm: string,
 78 |   fontSizeMd: string,
 79 |   fontSizeLg: string,
 80 |   borderRadius: string,
 81 |   sizeSm: string,
 82 |   sizeMd: string,
 83 |   sizeLg: string,
 84 |   sizeXl: string,
 85 |   size2xl: string,
 86 |   opacitySmall: string,
 87 |   opacityMedium: string,
 88 |   opacityLarge: string,
 89 |   fontWeightNormal: string,
 90 |   fontWeightMedium: string,
 91 |   fontWeightBold: string,
 92 |   space2xs: string,
 93 |   spaceXs: string,
 94 |   spaceSm: string,
 95 |   spaceMd: string,
 96 |   spaceLg: string,
 97 |   spaceXl: string,
 98 |   space2xl: string,
 99 |   space3xl: string,
100 |   durationFast: string,
101 |   durationNormal: string,
102 |   durationSlow: string,
103 |   transitionDefault: string,
104 |   lineHeight: string,
105 | |};
106 | 
107 | export type Foundation = {|
108 |   palette: Palette,
109 |   base: Base,
110 | |};
111 | 
112 | declare export default Foundation;
113 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@kiwicom/orbit-design-tokens",
 3 |   "version": "0.11.0",
 4 |   "description": "Design tokens for Kiwi.com.",
 5 |   "main": "lib/index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/kiwicom/orbit-design-tokens.git"
 9 |   },
10 |   "files": [
11 |     "lib/*",
12 |     "package.json",
13 |     "README.md",
14 |     "output/*",
15 |     "pages/*"
16 |   ],
17 |   "scripts": {
18 |     "generate-json": "node ./src/theo/generate-theo-parser",
19 |     "flow:check": "flow check",
20 |     "ts:check": "eslint . -c .eslintTS.js --ext .d.ts --report-unused-disable-directives",
21 |     "release": "npm publish",
22 |     "build-html": "theo --setup ./src/theo/setup.js ./src/theo/theo-spec.json --format kiwi.html --dest ./pages",
23 |     "build-web": "theo ./src/theo/theo-spec.json --transform web --format json,scss,sass,less,styl,cssmodules.css,common.js --dest ./output",
24 |     "build-ios": "theo ./src/theo/theo-spec.json --transform ios --format ios.json --dest ./output",
25 |     "build-android": "theo ./src/theo/theo-spec.json --transform android --format android.xml --dest ./output",
26 |     "build:lib": "babel --out-dir lib --ignore **/*.test.js,src/theo/* src && yarn copy:lib",
27 |     "build:es": "babel --config-file ./.babel-es --no-babelrc --out-dir es --ignore **/*.test.js,src/theo/* src && yarn copy:es",
28 |     "build:xml": "NODE_RUN=true babel-node ./scripts/generateXMLDesignTokens.js",
29 |     "build": "yarn run build:lib && yarn run generate-json && yarn run build-html && yarn run build-web && yarn run build-ios && yarn run build-android && yarn build:xml",
30 |     "copy:lib": "copyfiles -u 1 'src/**/*.js.flow' lib && copyfiles -u 1 'src/**/*.d.ts' lib",
31 |     "copy:es": "copyfiles -u 1 'src/**/*.js.flow' es && copyfiles -u 1 'src/**/*.d.ts' es ",
32 |     "test": "jest",
33 |     "eslint": "eslint .",
34 |     "test-ci": "yarn flow:check && yarn eslint && yarn test --ci",
35 |     "prepublishOnly": "yarn build"
36 |   },
37 |   "author": "kiwi.com",
38 |   "license": "MIT",
39 |   "keywords": [
40 |     "orbit",
41 |     "ui",
42 |     "design"
43 |   ],
44 |   "devDependencies": {
45 |     "@babel/cli": "^7.8.4",
46 |     "@babel/core": "^7.9.0",
47 |     "@babel/node": "^7.10.5",
48 |     "@babel/parser": "^7.9.4",
49 |     "@babel/preset-env": "^7.9.5",
50 |     "@babel/preset-flow": "^7.9.0",
51 |     "@typescript-eslint/eslint-plugin": "^2.23.0",
52 |     "@typescript-eslint/parser": "^2.23.0",
53 |     "babel-eslint": "^10.1.0",
54 |     "babel-plugin-replace-import-path": "^0.5.0",
55 |     "babylon": "^6.18.0",
56 |     "copyfiles": "^2.2.0",
57 |     "eslint": "^5.15.1",
58 |     "eslint-config-airbnb": "^17.1.1",
59 |     "eslint-config-airbnb-base": "^14.1.0",
60 |     "eslint-config-prettier": "^6.10.1",
61 |     "eslint-plugin-flowtype": "^4.7.0",
62 |     "eslint-plugin-import": "^2.20.2",
63 |     "eslint-plugin-jest": "^23.8.2",
64 |     "eslint-plugin-jsx-a11y": "^6.2.3",
65 |     "eslint-plugin-prettier": "^3.1.2",
66 |     "flow-bin": "^0.122.0",
67 |     "fs-extra": "^9.0.1",
68 |     "jest": "^25.3.0",
69 |     "lodash": "^4.17.14",
70 |     "memfs": "^3.2.0",
71 |     "prettier": "^1.18.2",
72 |     "theo": "^8.1.2",
73 |     "typescript": "^3.8.3",
74 |     "xml": "^1.0.1"
75 |   },
76 |   "dependencies": {
77 |     "ramda": "^0.27.0"
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/foundation.js:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | 
  3 | const palette = {
  4 |   product: {
  5 |     light: "#ECF8F7",
  6 |     lightHover: "#D6F0EE",
  7 |     lightActive: "#C0E8E4",
  8 |     normal: "#00A991",
  9 |     normalHover: "#009882",
 10 |     normalActive: "#008F7B",
 11 |     dark: "#007F6D",
 12 |     darkHover: "#007060",
 13 |     darkActive: "#006657",
 14 |     darker: "#005C4E",
 15 |   },
 16 |   white: {
 17 |     normal: "#FFFFFF",
 18 |     normalHover: "#F1F4F7",
 19 |     normalActive: "#E7ECF1",
 20 |   },
 21 |   cloud: {
 22 |     light: "#F5F7F9",
 23 |     lightHover: "#E5EAEF",
 24 |     lightActive: "#D6DEE6",
 25 |     normal: "#EFF2F5",
 26 |     normalHover: "#DCE3E9",
 27 |     normalActive: "#CAD4DE",
 28 |     dark: "#E8EDF1",
 29 |   },
 30 |   ink: {
 31 |     lighter: "#BAC7D5",
 32 |     lighterHover: "#A6B6C8",
 33 |     lighterActive: "#94A8BE",
 34 |     light: "#5F738C",
 35 |     lightHover: "#52647A",
 36 |     lightActive: "#465567",
 37 |     normal: "#252A31",
 38 |     normalHover: "#181B20",
 39 |     normalActive: "#0B0C0F",
 40 |   },
 41 |   orange: {
 42 |     light: "#FDF0E3",
 43 |     lightHover: "#FAE2C7",
 44 |     lightActive: "#F8D3AB",
 45 |     normal: "#E98305",
 46 |     normalHover: "#DC7C05",
 47 |     normalActive: "#CD7304",
 48 |     dark: "#A25100",
 49 |     darkHover: "#8F4700",
 50 |     darkActive: "#753A00",
 51 |     darker: "#803F00",
 52 |   },
 53 |   red: {
 54 |     light: "#FAEAEA",
 55 |     lightHover: "#F4D2D2",
 56 |     lightActive: "#EEB9B9",
 57 |     normal: "#D21C1C",
 58 |     normalHover: "#B91919",
 59 |     normalActive: "#9D1515",
 60 |     dark: "#970C0C",
 61 |     darkHover: "#890B0B",
 62 |     darkActive: "#6D0909",
 63 |     darker: "#760909",
 64 |   },
 65 |   green: {
 66 |     light: "#EBF4EC",
 67 |     lightHover: "#D7EAD9",
 68 |     lightActive: "#C3DFC7",
 69 |     normal: "#28A138",
 70 |     normalHover: "#238B31",
 71 |     normalActive: "#1D7228",
 72 |     dark: "#2B7336",
 73 |     darkHover: "#25642F",
 74 |     darkActive: "#1F5126",
 75 |     darker: "#235C2B",
 76 |   },
 77 |   blue: {
 78 |     light: "#E8F4FD",
 79 |     lightHover: "#D0E9FB",
 80 |     lightActive: "#B4DBF8",
 81 |     normal: "#0172CB",
 82 |     normalHover: "#0161AC",
 83 |     normalActive: "#01508E",
 84 |     dark: "#005AA3",
 85 |     darkHover: "#004F8F",
 86 |     darkActive: "#003E70",
 87 |     darker: "#004680",
 88 |   },
 89 |   social: {
 90 |     facebook: "#3B5998",
 91 |     facebookHover: "#385490",
 92 |     facebookActive: "#354F88",
 93 |   },
 94 | };
 95 | 
 96 | const base = {
 97 |   fontFamily:
 98 |     "'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
 99 |   fontSizeSm: "12px",
100 |   fontSizeMd: "14px",
101 |   fontSizeLg: "16px",
102 |   borderRadius: "3px",
103 |   sizeSm: "16px",
104 |   sizeMd: "24px",
105 |   sizeLg: "32px",
106 |   sizeXl: "44px",
107 |   size2xl: "52px",
108 |   opacitySmall: "0.3",
109 |   opacityMedium: "0.5",
110 |   opacityLarge: "0.8",
111 |   fontWeightNormal: "400",
112 |   fontWeightMedium: "500",
113 |   fontWeightBold: "700",
114 |   space2xs: "4px",
115 |   spaceXs: "8px",
116 |   spaceSm: "12px",
117 |   spaceMd: "16px",
118 |   spaceLg: "24px",
119 |   spaceXl: "32px",
120 |   space2xl: "40px",
121 |   space3xl: "52px",
122 |   durationFast: "0.15s",
123 |   durationNormal: "0.3s",
124 |   durationSlow: "0.4s",
125 |   transitionDefault: "ease-in-out",
126 |   lineHeight: "1.4",
127 | };
128 | 
129 | const foundation = { palette, base };
130 | 
131 | export default foundation;
132 | 


--------------------------------------------------------------------------------
/src/theo/generate-theo-parser.js:
--------------------------------------------------------------------------------
 1 | const parser = require("@babel/parser");
 2 | const fs = require("fs");
 3 | const path = require("path");
 4 | 
 5 | const { defaultTokens } = require("../../lib/index");
 6 | 
 7 | const code = fs.readFileSync(path.resolve(__dirname, "../../lib/index.js"), "utf8");
 8 | 
 9 | const ast = parser.parse(code, {
10 |   sourceType: "module", // allow export
11 |   allowImportExportEverywhere: true,
12 |   plugins: ["flow"],
13 | });
14 | 
15 | const findDeclaration = x => x.id.name === "getTokens";
16 | const findGetTokens = x => x.type === "VariableDeclaration" && x.declarations.find(findDeclaration);
17 | 
18 | const ar = ast.program.body.find(findGetTokens);
19 | const tokenProps = ar.declarations[0].init.body.body[1].argument.properties
20 | 
21 | const camelCaseToText = text => {
22 |   let result = text.replace(/([A-Z])/g, " $1");
23 |   result = result.charAt(0).toUpperCase() + result.slice(1); // capitalize the first letter
24 |   return result;
25 | };
26 | 
27 | const getType = (value, hint) => {
28 |   if (typeof value !== "string") return typeof value;
29 |   if (value.startsWith("#") || value.startsWith("rgb")) return "color";
30 |   if (value.includes("px")) return "size";
31 |   if (value[value.length - 1] === "%") return "size";
32 |   return "string";
33 | };
34 | 
35 | const getCategory = (category, key) => {
36 |   // Workarounds
37 |   if (category === "color") return "text-color";
38 |   if (category === "zIndex") return "spacing";
39 |   if (category === "size") return "sizing";
40 |   return category.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`);
41 | };
42 | 
43 | const getProps = (tokenProps, category) =>
44 |   tokenProps.reduce((p, c) => Object.assign(p, getInfo(c, category)), {});
45 | 
46 | let category = "";
47 | let categoryDescription = "";
48 | let comment;
49 | 
50 | const categoryCommentFn = c => c.startsWith("category:");
51 | const categoryDescriptionFn = c => c.startsWith("description:");
52 | const itemCommentFn = c => !categoryCommentFn(c) && !categoryDescriptionFn(c);
53 | 
54 | const getInfo = (tokenProp, xcategory) => {
55 |   const key = tokenProp.key.name;
56 |   const value = xcategory ? defaultTokens[xcategory][key] : defaultTokens[key];
57 |   if (value == null) {
58 |     console.error("Wrong value for", key);
59 |     throw new Error(`Wrong value for ${key}`);
60 |   }
61 |   const type = typeof value;
62 |   if (type === "object") return getProps(tokenProp.value.properties, key);
63 |   comment = undefined;
64 |   const hasComment = tokenProp.leadingComments && tokenProp.leadingComments.length;
65 |   if (hasComment) {
66 |     const comments = tokenProp.leadingComments.map(x => x.value.trimLeft());
67 |     const categoryComment = comments.find(categoryCommentFn);
68 |     if (categoryComment) category = categoryComment.substr(9);
69 |     const categoryDescriptionComm = comments.find(categoryDescriptionFn);
70 |     if (categoryDescriptionComm) categoryDescription = categoryDescriptionComm.substr(12);
71 |     const itemComment = comments.filter(itemCommentFn);
72 |     if (itemComment.length) {
73 |       comment = itemComment
74 |         .map(c => (c.startsWith("*") ? c.substr(1) : c))
75 |         .join(" ")
76 |         .trim();
77 |     }
78 |   }
79 |   return {
80 |     [key]: {
81 |       value,
82 |       type: getType(value),
83 |       category,
84 |       comment,
85 |       meta: {
86 |         categoryDescription,
87 |       },
88 |     },
89 |   };
90 | };
91 | 
92 | const props = getProps(tokenProps);
93 | fs.writeFileSync(path.resolve(__dirname, "./theo-spec.json"), JSON.stringify({ props }, null, 2));
94 | 


--------------------------------------------------------------------------------
/.github/foundation.md:
--------------------------------------------------------------------------------
  1 | # Foundation
  2 | 
  3 | Foundation object offers us very easy and quick way how to define design tokens and also how to simply create needed themes.
  4 | 
  5 | > You can overwrite some or all properties in this object with `getTokens` function.
  6 | 
  7 | ## Default foundation object
  8 | 
  9 | ```jsx
 10 | const foundation = {
 11 |   palette: {
 12 |     product: {
 13 |       light: "#ECF8F7",
 14 |       lightHover: "#D6F0EE",
 15 |       lightActive: "#C0E8E4",
 16 |       normal: "#00A991",
 17 |       normalHover: "#009882",
 18 |       normalActive: "#008F7B",
 19 |       dark: "#007F6D",
 20 |       darkHover: "#007060",
 21 |       darkActive: "#006657",
 22 |       darker: "#005C4E",
 23 |     },
 24 |     white: {
 25 |       normal: "#FFFFFF",
 26 |       normalHover: "#F1F4F7",
 27 |       normalActive: "#E7ECF1",
 28 |     },
 29 |     cloud: {
 30 |       light: "#F5F7F9",
 31 |       lightHover: "#E5EAEF",
 32 |       lightActive: "#D6DEE6",
 33 |       normal: "#EFF2F5",
 34 |       normalHover: "#DCE3E9",
 35 |       normalActive: "#CAD4DE",
 36 |       dark: "#E8EDF1",
 37 |     },
 38 |     ink: {
 39 |       lighter: "#BAC7D5",
 40 |       lighterHover: "#A6B6C8",
 41 |       lighterActive: "#94A8BE",
 42 |       light: "#5F738C",
 43 |       lightHover: "#52647A",
 44 |       lightActive: "#465567",
 45 |       normal: "#252A31",
 46 |       normalHover: "#181B20",
 47 |       normalActive: "#0B0C0F",
 48 |     },
 49 |     orange: {
 50 |       light: "#FDF0E3",
 51 |       lightHover: "#FAE2C7",
 52 |       lightActive: "#F8D3AB",
 53 |       normal: "#F9971E",
 54 |       normalHover: "#F38906",
 55 |       normalActive: "#D67906",
 56 |       dark: "#AB3307",
 57 |       darkHover: "#972C07",
 58 |       darkActive: "#7A2405",
 59 |       darker: "#842706",
 60 |     },
 61 |     red: {
 62 |       light: "#FAEAEA",
 63 |       lightHover: "#F4D2D2",
 64 |       lightActive: "#EEB9B9",
 65 |       normal: "#D21C1C",
 66 |       normalHover: "#B91919",
 67 |       normalActive: "#9D1515",
 68 |       dark: "#970C0C",
 69 |       darkHover: "#890B0B",
 70 |       darkActive: "#6D0909",
 71 |       darker: "#760909",
 72 |     },
 73 |     green: {
 74 |       light: "#EBF4EC",
 75 |       lightHover: "#D7EAD9",
 76 |       lightActive: "#C3DFC7",
 77 |       normal: "#28A138",
 78 |       normalHover: "#238B31",
 79 |       normalActive: "#1D7228",
 80 |       dark: "#2D7738",
 81 |       darkHover: "#276831",
 82 |       darkActive: "#1F5126",
 83 |       darker: "#235C2B",
 84 |     },
 85 |     blue: {
 86 |       light: "#E5F7FF",
 87 |       lightHover: "#C7EEFF",
 88 |       lightActive: "#A8E5FF",
 89 |       normal: "#0172CB",
 90 |       normalHover: "#0161AC",
 91 |       normalActive: "#01508E",
 92 |       dark: "#005AA3",
 93 |       darkHover: "#004F8F",
 94 |       darkActive: "#003E70",
 95 |       darker: "#004680",
 96 |     },
 97 |     social: {
 98 |       facebook: "#1778F2",
 99 |       facebookHover: "#0C69DE",
100 |       facebookActive: "#0B5CC1",
101 |     },
102 |   },
103 |   base: {
104 |     fontFamily:
105 |       '"Roboto", -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif',
106 |     fontSizeSm: "12px",
107 |     fontSizeMd: "14px",
108 |     fontSizeLg: "16px",
109 |     borderRadius: "3px",
110 |     sizeSm: "16px",
111 |     sizeMd: "24px",
112 |     sizeLg: "32px",
113 |     sizeXl: "44px",
114 |     size2xl: "52px",
115 |     opacitySmall: "0.3",
116 |     opacityMedium: "0.5",
117 |     opacityLarge: "0.8",
118 |     fontWeightNormal: "400",
119 |     fontWeightMedium: "500",
120 |     fontWeightBold: "700",
121 |     space2xs: "4px",
122 |     spaceXs: "8px",
123 |     spaceSm: "12px",
124 |     spaceMd: "16px",
125 |     spaceLg: "24px",
126 |     spaceXl: "32px",
127 |     space2xl: "40px",
128 |     space3xl: "52px",
129 |     durationFast: "0.15s",
130 |     durationNormal: "0.3s",
131 |     durationSlow: "0.4s",
132 |     transitionDefault: "ease-in-out",
133 |     lineHeight: "1.4",
134 |   },
135 | };
136 | ```
137 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Warning: this repository has been moved
  2 | 
  3 | It now lives in the [kiwicom/orbit](https://github.com/kiwicom/orbit) monorepo.
  4 | 
  5 | ---
  6 | 
  7 | # orbit-design-tokens
  8 | Design tokens are atomic pieces that store visual design attributes. They help us make our UI more consistent and consistent and support custom themes. We use them instead of static values like HEX codes for color or sizing units.
  9 | 
 10 | ## Installation
 11 | The first thing you will need to do is install the package into your project. 
 12 | 
 13 | Run [npm](https://www.npmjs.com/) to add the package to your project:
 14 | 
 15 | `npm install --save @kiwicom/orbit-design-tokens`
 16 | 
 17 | or do so with [Yarn](https://yarnpkg.com/):
 18 | 
 19 | `yarn add @kiwicom/orbit-design-tokens`
 20 | 
 21 | ## How to use
 22 | Now that you have installed the latest version of the package, you will need to add an import directly into the file where you want to use the design tokens.
 23 | 
 24 | For simple usage of defaultTokens just add this line of code to the top of the file:
 25 | 
 26 | ```jsx
 27 | import { defaultTokens } from "@kiwicom/orbit-design-tokens"
 28 | ```
 29 |  
 30 | Now you can use tokens by typing `defaultTokens` and just continue with the dot-notation by typing the appropriate token name you want to use f.e. `defaultTokens.colorTextPrimary`. More advanced text editors should suggest which tokens are available to you in the token object, so you can find tokens quicker than by typing the entire token name.
 31 | 
 32 | ### Generating your theme
 33 | 
 34 | **orbit-design-tokens** offers a possibility to generate different themes based on the inputted foundations.
 35 | 
 36 | First, simply import `getTokens` function to your project.
 37 | 
 38 | ```jsx
 39 | import { getTokens } from "@kiwicom/orbit-design-tokens"
 40 | ```
 41 | 
 42 | Now define your foundations that will be used to generated design tokens.
 43 | 
 44 | ```jsx
 45 | const foundation = {
 46 |   palette: {
 47 |     product: {
 48 |       light: "#ff9999",
 49 |       lightHover: "#ff7f7f",
 50 |       lightActive: "#ff6666",
 51 |       normal: "#ff0000",
 52 |       normalHover: "#e50000",
 53 |       normalActive: "#cc0000",
 54 |       dark: "#990000",
 55 |       darkHover: "#720000",
 56 |       darkActive: "#630000",
 57 |       darker: "#530000"
 58 |     },
 59 |   },
 60 |   base: {
 61 |     fontFamily: "sans-serif",
 62 |     fontSizeSm: "14px",
 63 |     fontSizeMd: "16px",
 64 |     fontSizeLg: "18px",
 65 |     borderRadius: "6px",
 66 |   },
 67 | };
 68 | 
 69 | // generate your custom theme
 70 | const theme = getTokens(foundation);
 71 | ```
 72 | > If you are unsure what foundation you can define, check this [docs](https://github.com/kiwicom/orbit-design-tokens/blob/master/.github/foundation.md).
 73 | 
 74 | For usage with NEST, which contains a plain object with palette colors, you can use `fromPlainObject` function.
 75 | 
 76 | ```jsx
 77 | import { fromPlainObject } from "@kiwicom/orbit-design-tokens"
 78 | 
 79 | // example input from NEST
 80 | const palette = {
 81 |   productLight: "#ff9999",
 82 |   productLightHover: "#ff7f7f",
 83 |   productLightActive: "#ff6666",
 84 |   productNormal: "#ff0000",
 85 |   productNormalHover: "#e50000",
 86 |   productNormalActive: "#cc0000",
 87 |   productDark: "#990000",
 88 |   productDarkHover: "#890000",
 89 |   productDarkActive: "#7a0000",
 90 |   productDarker: "#5b0000",
 91 | };
 92 | 
 93 | const theme = fromPlainObject(theme);
 94 | ```
 95 | 
 96 | > With the usage of `fromPlainObject` function, you can change only the product colors, not anything more.
 97 | 
 98 | ## Full list of design tokens
 99 | If you are unsure which tokens are in this package included, see (https://orbit.kiwi/design-tokens/).
100 | 
101 | ## Formats
102 | The main structure of the package is written in `JavaScript` for better usage in `JavaScript` projects. We are also able to generate a `JSON` file which will allow us to transform this type of file into different ones. It should be possible to transform `JSON` into `SASS`, `LESS`, `Stylus`, `XML` or others.
103 | 
104 | ## Naming conventions
105 | Every design token in the package has a name suggested according to the **Orbit naming conventions**.
106 | 
107 | These conventions should be systematic, and work according to template: `property_usage-type--state`.
108 | 
109 | ## Contributing
110 | 
111 | We are opened to bug reports and new token requests but, please use the correct template.
112 | 


--------------------------------------------------------------------------------
/src/__tests__/index.test.js:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | import { defaultTokens, getTokens, fromPlainObject } from "../index";
  3 | import foundation from "../foundation";
  4 | import convertHexToRgba from "../convertHexToRgba";
  5 | 
  6 | describe("defaultTokens", () => {
  7 |   it("should match snapshot", () => {
  8 |     expect(defaultTokens).toMatchSnapshot();
  9 |   });
 10 | });
 11 | 
 12 | describe("getTokens should accept some palette and base foundation", () => {
 13 |   const brand = {
 14 |     palette: {
 15 |       product: {
 16 |         lightHover: "#222",
 17 |         lightActive: "#333",
 18 |         normal: "#444",
 19 |         normalHover: "#555",
 20 |         normalActive: "#666",
 21 |         dark: "#777",
 22 |         darkHover: "#888",
 23 |         darkActive: "#999",
 24 |       },
 25 |     },
 26 |     base: {
 27 |       fontSizeSm: "16px",
 28 |     },
 29 |   };
 30 |   const theme = getTokens(brand);
 31 |   it("should match snapshot", () => {
 32 |     expect(theme).toMatchSnapshot();
 33 |   });
 34 |   it("tokens should have those colors", () => {
 35 |     expect(theme.backgroundButtonPrimary).toBe(brand.palette.product.normal);
 36 |     expect(theme.colorTextLinkPrimary).toBe(brand.palette.product.dark);
 37 |     expect(theme.colorTextButtonPrimaryBordered).toBe(brand.palette.product.normal);
 38 |     expect(theme.colorTextButtonPrimaryBorderedHover).toBe(brand.palette.product.normalHover);
 39 |     expect(theme.colorTextButtonPrimaryBorderedActive).toBe(brand.palette.product.normalActive);
 40 |     expect(theme.paletteProductDarkHover).toBe(brand.palette.product.darkHover);
 41 |     expect(theme.paletteProductDarkActive).toBe(brand.palette.product.darkActive);
 42 |   });
 43 |   it("should deep merge", () => {
 44 |     expect(theme.paletteProductLight).toBe(foundation.palette.product.light);
 45 |     expect(theme.fontSizeTextNormal).toBe(foundation.base.fontSizeMd);
 46 |   });
 47 | });
 48 | 
 49 | describe("getTokens should accept some base", () => {
 50 |   const brand = {
 51 |     base: {
 52 |       sizeSm: "1px",
 53 |       sizeMd: "2px",
 54 |       sizeLg: "3px",
 55 |       sizeXl: "4px",
 56 |       size2xl: "5px",
 57 |     },
 58 |   };
 59 |   const theme = getTokens(brand);
 60 |   it("should match snapshot", () => {
 61 |     expect(theme).toMatchSnapshot();
 62 |   });
 63 |   it("tokens should have those colors", () => {
 64 |     expect(theme.widthIconSmall).toBe(brand.base.sizeSm);
 65 |     expect(theme.heightIconSmall).toBe(brand.base.sizeSm);
 66 |     expect(theme.widthIconMedium).toBe(brand.base.sizeMd);
 67 |     expect(theme.heightIconMedium).toBe(brand.base.sizeMd);
 68 |     expect(theme.widthIconLarge).toBe(brand.base.sizeLg);
 69 |     expect(theme.heightIconLarge).toBe(brand.base.sizeLg);
 70 |     expect(theme.heightInputNormal).toBe(brand.base.sizeXl);
 71 |     expect(theme.heightInputLarge).toBe(brand.base.size2xl);
 72 |     expect(theme.heightInputSmall).toBe(brand.base.sizeLg);
 73 |     expect(theme.heightButtonNormal).toBe(brand.base.sizeXl);
 74 |     expect(theme.heightButtonLarge).toBe(brand.base.size2xl);
 75 |     expect(theme.heightButtonSmall).toBe(brand.base.sizeLg);
 76 |   });
 77 | });
 78 | 
 79 | describe("fromPlainObject should create full theme", () => {
 80 |   const palette = {
 81 |     productLight: "#ff9999",
 82 |     productLightHover: "#ff7f7f",
 83 |     productLightActive: "#ff6666",
 84 |     productNormal: "#ff0000",
 85 |     productNormalHover: "#e50000",
 86 |     productNormalActive: "#cc0000",
 87 |     productDark: "#990000",
 88 |   };
 89 |   const theme = fromPlainObject(palette);
 90 |   it("should match snapshot", () => {
 91 |     expect(theme).toMatchSnapshot();
 92 |   });
 93 |   it("tokens should have those colors", () => {
 94 |     expect(theme.backgroundButtonPrimary).toBe(palette.productNormal);
 95 |     expect(theme.colorTextLinkPrimary).toBe(palette.productDark);
 96 |     expect(theme.colorTextButtonPrimaryBordered).toBe(palette.productNormal);
 97 |     expect(theme.colorTextButtonPrimaryBorderedHover).toBe(palette.productNormalHover);
 98 |     expect(theme.colorTextButtonPrimaryBorderedActive).toBe(palette.productNormalActive);
 99 |   });
100 |   it("tokens should have default darkHover and darkActive", () => {
101 |     expect(theme.paletteProductDarkHover).toBe(foundation.palette.product.darkHover);
102 |     expect(theme.paletteProductDarkActive).toBe(foundation.palette.product.darkActive);
103 |     expect(theme.paletteProductDarker).toBe(foundation.palette.product.darker);
104 |   });
105 | });
106 | 
107 | describe("fromPlainObject with full object should create full theme", () => {
108 |   const palette = {
109 |     productLight: "#ff9999",
110 |     productLightHover: "#ff7f7f",
111 |     productLightActive: "#ff6666",
112 |     productNormal: "#ff0000",
113 |     productNormalHover: "#e50000",
114 |     productNormalActive: "#cc0000",
115 |     productDark: "#990000",
116 |     productDarkHover: "#820000",
117 |     productDarkActive: "#720000",
118 |     productDarker: "#620000",
119 |   };
120 |   const theme = fromPlainObject(palette);
121 |   it("tokens should have exact darkHover and darkActive", () => {
122 |     expect(theme.paletteProductDarkHover).toBe(palette.productDarkHover);
123 |     expect(theme.paletteProductDarkActive).toBe(palette.productDarkActive);
124 |     expect(theme.paletteProductDarker).toBe(palette.productDarker);
125 |   });
126 | });
127 | 
128 | describe("convertHexToRgba", () => {
129 |   const colors = {
130 |     lighter: "#bac7d5",
131 |     lighterHover: "#a6b6c8",
132 |     lighterActive: "#94a8be",
133 |     light: "#7f91a8",
134 |     whiteShort: "#fff",
135 |     whiteLong: "#ffffff",
136 |   };
137 |   const finalColors = {
138 |     lighter: "rgba(186, 199, 213, 0.6)",
139 |     lighterHover: "rgba(166, 182, 200, 0.23)",
140 |     lighterActive: "rgba(148, 168, 190, 1)",
141 |     light: "rgba(127, 145, 168, 0)",
142 |     whiteShort: "rgba(255, 255, 255, 0.1)",
143 |     whiteLong: "rgba(255, 255, 255, 1)",
144 |   };
145 |   it("should converts to right RGBA colors", () => {
146 |     expect(convertHexToRgba(colors.lighter, 60)).toBe(finalColors.lighter);
147 |     expect(convertHexToRgba(colors.lighterHover, 23)).toBe(finalColors.lighterHover);
148 |     expect(convertHexToRgba(colors.lighterActive, 100)).toBe(finalColors.lighterActive);
149 |     expect(convertHexToRgba(colors.light, 0)).toBe(finalColors.light);
150 |     expect(convertHexToRgba(colors.whiteShort, 10)).toBe(finalColors.whiteShort);
151 |     expect(convertHexToRgba(colors.whiteLong, 100)).toBe(finalColors.whiteLong);
152 |   });
153 | });
154 | 


--------------------------------------------------------------------------------
/src/theo/kiwi-html.js:
--------------------------------------------------------------------------------
  1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
  2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
  3 | 
  4 | const groupBy = require("lodash/groupBy");
  5 | const camelCase = require("lodash/camelCase");
  6 | const upperfirst = require("lodash/upperFirst");
  7 | 
  8 | class Styleguide {
  9 |   constructor({ props, options }) {
 10 |     this.options = Object.assign(
 11 |       {
 12 |         transformPropName: camelCase,
 13 |       },
 14 |       options,
 15 |     );
 16 |     this.categories = groupBy(props, "category");
 17 |   }
 18 | 
 19 |   renderRowHeader(id, heading) {
 20 |     return `
 21 |       <thead>
 22 |         <tr id=${id}>
 23 |           <th scope="col">${heading}</th>
 24 |           <th scope="col">Value</th>
 25 |           <th scope="col">Examples</th>
 26 |           <th scope="col">Usage</th>
 27 |         </tr>
 28 |       </thead>
 29 |     `;
 30 |   }
 31 | 
 32 |   renderRow(prop, example) {
 33 |     const name = prop.name; // this.options.transformPropName(prop.name);
 34 |     return `
 35 |       <tr>
 36 |         <th scope="row">
 37 |           <code>${name}</code>
 38 |         </th>
 39 |         <td>
 40 |           <code>${prop.value}</code>
 41 |         </td>
 42 |         ${example}
 43 |         <td>${prop.comment ? prop.comment : ""}</td>
 44 |       </tr>
 45 |     `;
 46 |   }
 47 | 
 48 |   renderSpacing(props) {
 49 |     return props.map(prop => {
 50 |       const example = `
 51 |         <td>
 52 |           <div class="metric-box" style="width: ${prop.value}; height: ${prop.value};"></div>
 53 |         </td>
 54 |       `;
 55 |       return this.renderRow(prop, example);
 56 |     });
 57 |   }
 58 | 
 59 |   renderSizing(props) {
 60 |     return props.map(prop => {
 61 |       const name = prop.name;
 62 |       let style = `width: ${prop.value}; height: ${prop.value};`;
 63 |       if (name.startsWith("widthButtonMinimal")) style = `width: ${prop.value}; min-height: 16px;`;
 64 |       const example = `
 65 |         <td>
 66 |           <div class="metric-box" style="${style}"></div>
 67 |         </td>
 68 |       `;
 69 |       return this.renderRow(prop, example);
 70 |     });
 71 |   }
 72 | 
 73 |   renderFont(props) {
 74 |     return props.map(prop => {
 75 |       const example = `
 76 |         <td>
 77 |           <div style="font-family: ${prop.value};">
 78 |             The quick brown fox jumps over the lazy dog.
 79 |           </div>
 80 |         </td>
 81 |       `;
 82 |       return this.renderRow(prop, example);
 83 |     });
 84 |   }
 85 | 
 86 |   renderFontStyle(props) {
 87 |     return props.map(prop => {
 88 |       const example = `
 89 |         <td>
 90 |           <div style="font-style: ${prop.value};">
 91 |             The quick brown fox jumps over the lazy dog.
 92 |           </div>
 93 |         </td>
 94 |       `;
 95 |       return this.renderRow(prop, example);
 96 |     });
 97 |   }
 98 | 
 99 |   renderFontWeight(props) {
100 |     return props.map(prop => {
101 |       const example = `
102 |         <td>
103 |           <div style="font-weight: ${prop.value};">
104 |             The quick brown fox jumps over the lazy dog.
105 |           </div>
106 |         </td>
107 |       `;
108 |       return this.renderRow(prop, example);
109 |     });
110 |   }
111 | 
112 |   renderFontSize(props) {
113 |     return props.map(prop => {
114 |       const example = `
115 |         <td>
116 |           <div style="font-size: ${prop.value};">
117 |             The quick brown fox jumps over the lazy dog.
118 |           </div>
119 |         </td>
120 |       `;
121 |       return this.renderRow(prop, example);
122 |     });
123 |   }
124 | 
125 |   renderLineHeight(props) {
126 |     return props.map(prop => {
127 |       const vHeight = !isNaN(prop.value) ? `${prop.value}em` : prop.value;
128 |       const example = `
129 |         <td>
130 |           <div class="line-height-example" style="line-height: ${
131 |             prop.value
132 |           }; background-size: 100% ${vHeight};">
133 |             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
134 |             elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
135 |             id feugiat at, venenatis quis erat.
136 |           </div>
137 |         </td>
138 |       `;
139 |       return this.renderRow(prop, example);
140 |     });
141 |   }
142 | 
143 |   renderFontFamily(props) {
144 |     return props.map(prop => {
145 |       const example = `
146 |         <td>
147 |           <div style='font-family: ${prop.value};'>
148 |             The quick brown fox jumps over the lazy dog.
149 |           </div>
150 |         </td>
151 |       `;
152 |       return this.renderRow(prop, example);
153 |     });
154 |   }
155 | 
156 |   renderBorderStyle(props) {
157 |     return props.map(prop => {
158 |       const example = `<td style="border: ${prop.value};"></td>`;
159 |       return this.renderRow(prop, example);
160 |     });
161 |   }
162 | 
163 |   renderBorderColor(props) {
164 |     return props.map(prop => {
165 |       const example = `<td style="border: 2px solid ${prop.value};"></td>`;
166 |       return this.renderRow(prop, example);
167 |     });
168 |   }
169 | 
170 |   renderHrColor(props) {
171 |     return props.map(prop => {
172 |       const example = `
173 |         <td>
174 |           <hr style="border-top-color: ${prop.value};" />
175 |         </td>
176 |       `;
177 |       return this.renderRow(prop, example);
178 |     });
179 |   }
180 | 
181 |   renderRadius(props) {
182 |     return props.map(prop => {
183 |       const name = this.options.transformPropName(prop.name);
184 |       const example = `
185 |         <td>
186 |           <div class="radius-box ${name}" style="border-radius: ${prop.value};"></div>
187 |         </td>
188 |       `;
189 |       return this.renderRow(prop, example);
190 |     });
191 |   }
192 | 
193 |   renderBorderRadius(props) {
194 |     return props.map(prop => {
195 |       const example = `
196 |         <td>
197 |           <div class="radius-box" style="border-radius: ${prop.value};"></div>
198 |         </td>
199 |       `;
200 |       return this.renderRow(prop, example);
201 |     });
202 |   }
203 | 
204 |   renderBackgroundColor(props) {
205 |     return props.map(prop => {
206 |       const example = `<td style="background-color: ${
207 |         prop.value
208 |       }; border: 1px solid #f6f6f6;"></td>`;
209 |       return this.renderRow(prop, example);
210 |     });
211 |   }
212 | 
213 |   renderGradient(props) {
214 |     return props.map(prop => {
215 |       const example = `<td style="background: ${prop.value};"></td>`;
216 |       return this.renderRow(prop, example);
217 |     });
218 |   }
219 | 
220 |   renderBackgroundGradient(props) {
221 |     return props.map(prop => {
222 |       const example = `<td style="background-image: ${prop.value};"></td>`;
223 |       return this.renderRow(prop, example);
224 |     });
225 |   }
226 | 
227 |   renderDropShadow(props) {
228 |     return props.map(prop => {
229 |       const example = `<td style="box-shadow: ${prop.value};"></td>`;
230 |       return this.renderRow(prop, example);
231 |     });
232 |   }
233 | 
234 |   renderBoxShadow(props) {
235 |     return props.map(prop => {
236 |       const example = `<td style="box-shadow: ${prop.value};"></td>`;
237 |       return this.renderRow(prop, example);
238 |     });
239 |   }
240 | 
241 |   renderTextColor(props) {
242 |     return props.map(prop => {
243 |       const example = `
244 |         <td style="background-color: #f6f6f6; color: ${prop.value};">
245 |           The quick brown fox jumps over the lazy dog.
246 |         </td>
247 |       `;
248 |       return this.renderRow(prop, example);
249 |     });
250 |   }
251 | 
252 |   renderTextShadow(props) {
253 |     return props.map(prop => {
254 |       const example = `
255 |         <td style="text-shadow: ${prop.value};">
256 |           The quick brown fox jumps over the lazy dog.
257 |         </td>
258 |       `;
259 |       return this.renderRow(prop, example);
260 |     });
261 |   }
262 | 
263 |   renderTime(props) {
264 |     return props.map(prop => {
265 |       const example = `<td></td>`;
266 |       return this.renderRow(prop, example);
267 |     });
268 |   }
269 | 
270 |   renderMediaQuery(props) {
271 |     return props.map(prop => {
272 |       const example = `<td></td>`;
273 |       return this.renderRow(prop, example);
274 |     });
275 |   }
276 | 
277 |   renderValues(props) {
278 |     return props.map(prop => this.renderRow(prop, `<td></td>`));
279 |   }
280 | 
281 |   renderSection(type, heading, fn) {
282 |     const props = this.categories[type];
283 |     if (!props) {
284 |       return "";
285 |     }
286 |     const name = upperfirst(camelCase(type));
287 |     const render = typeof fn === "function" ? fn : this[`render${name}`];
288 |     return `
289 |       <section>
290 |         <table>
291 |           ${this.renderRowHeader(type, heading)}
292 |           <tbody>
293 |             ${render
294 |               .call(this, props)
295 |               .join("")
296 |               .trim()}
297 |           </tbody>
298 |         </table>
299 |         <hr />
300 |       </section>
301 |     `;
302 |   }
303 | 
304 |   render() {
305 |     return `
306 | <!DOCTYPE html>
307 | <html lang="en">
308 |   <head>
309 |     <meta charset="utf-8" />
310 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
311 |     <title>Orbit Design Tokens</title>
312 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
313 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" />
314 |     <style>
315 |       html {
316 |         box-sizing: border-box;
317 |         font-size: 1em;
318 |         font-family: "Roboto", -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
319 |         line-height: 1.5;
320 |         background: #fff;
321 |         color: #444;
322 |       }
323 |       *,
324 |       *:before,
325 |       *:after {
326 |         box-sizing: inherit;
327 |       }
328 |       body { font-size: .75rem; }
329 |       ::-moz-selection {
330 |         background: #b3d4fc;
331 |         text-shadow: none;
332 |       }
333 |       ::selection {
334 |         background: #b3d4fc;
335 |         text-shadow: none;
336 |       }
337 |       .banner,
338 |       .contentinfo { background: #f5f5f5; }
339 |       .banner { padding: 1em 0; }
340 |       .container {
341 |         margin: 0 auto;
342 |         padding: 0 2rem;
343 |         max-width: 80rem;
344 |       }
345 |       main {
346 |         margin-right: -2rem;
347 |         margin-left:  -2rem;
348 |         padding-bottom: 2rem;
349 |       }
350 |       h1 {
351 |         margin: 0;
352 |         font-weight: normal;
353 |         line-height: 1.25;
354 |       }
355 |       table {
356 |         table-layout: fixed;
357 |         border-collapse: separate;
358 |         border-spacing: 1rem;
359 |         width: 100%;
360 |       }
361 |       th,
362 |       td {
363 |         padding: 0 1rem;
364 |         vertical-align: baseline;
365 |         word-break: break-word;
366 |         hyphens: auto;
367 |       }
368 |       th {
369 |         font-weight: normal;
370 |         text-align: left;
371 |       }
372 |       thead th {
373 |         border-bottom: 1px solid #eee;
374 |         padding-top: 1rem;
375 |         padding-bottom: .5rem;
376 |         color: #999;
377 |       }
378 |       thead th:first-child {
379 |         font-size: 1.25rem;
380 |         color: inherit;
381 |       }
382 |       code { font-family: monaco, Consolas, monospace, monospace; }
383 |       hr {
384 |         display: block;
385 |         margin: 2rem 0;
386 |         border: 0;
387 |         border-top: 1px solid #eee;
388 |         padding: 0;
389 |         height: 1px;
390 |       }
391 |       .metric-box,
392 |       .radius-box {
393 |         display: inline-block;
394 |         vertical-align: middle;
395 |         background: #eee;
396 |       }
397 |       .radius-box {
398 |         width: 100%;
399 |         height: 3rem;
400 |       }
401 |       .radius-box.borderRadiusCircle {
402 |         width: 3rem;
403 |       }
404 |       .line-height-example {
405 |         border-bottom: 1px solid #eee;
406 |         background-image: -webkit-linear-gradient(#eee 1px, transparent 1px);
407 |         background-image: linear-gradient(#eee 1px, transparent 1px);
408 |         background-size: 100% 1rem;
409 |       }
410 |     </style>
411 |   </head>
412 |   <body>
413 |     <header role="banner" class="banner">
414 |       <div class="container">
415 |         <h1>Orbit Design Tokens</h1>
416 |       </div>
417 |     </header>
418 |     <div class="container">
419 |       <main role="main">
420 |         ${this.renderSection("Colors", "Colors", this.renderTextColor)}      
421 |         ${this.renderSection("Background colors", "Background Colors", this.renderBackgroundColor)}
422 |         ${this.renderSection("Font family", "Font Families", this.renderFontFamily)}
423 |         ${this.renderSection("Font size", "Font Sizes", this.renderFontSize)}
424 |         ${this.renderSection("Font weight", "Font Weights", this.renderFontWeight)}
425 |         
426 |         ${this.renderSection("Border radius", "Border Radius", this.renderBorderRadius)}
427 |         ${this.renderSection("Size (width, height)", "Sizing", this.renderSizing)}
428 |         ${this.renderSection("Border color", "Border Colors", this.renderBorderColor)}
429 |         ${this.renderSection("Border style", "Border Styles", this.renderBorderStyle)}
430 |         ${this.renderSection("Spacing", "Spacing", this.renderSpacing)}
431 |         ${this.renderSection("Line height", "Line Heights", this.renderLineHeight)}
432 |         ${this.renderSection("Modifier", "Modifier", this.renderValues)}
433 |         ${this.renderSection("Text decoration", "Text decoration", this.renderValues)}
434 |         ${this.renderSection("Duration", "Duration", this.renderValues)}
435 |         ${this.renderSection("Opacity", "Opacity", this.renderValues)}
436 |         ${this.renderSection("Z Index", "Z Index", this.renderValues)}
437 |         ${this.renderSection("Box shadow", "Box Shadows", this.renderBoxShadow)}
438 | 
439 |         ${this.renderSection("text-color", "Text Colors")}
440 |         ${this.renderSection("text-shadow", "Text Shadows")}
441 |         ${this.renderSection("background-color", "Background Colors")}
442 |         ${this.renderSection("sizing", "Sizing")}
443 |         ${this.renderSection("spacing", "Spacing")}
444 |         ${this.renderSection("font", "Fonts")}
445 |         ${this.renderSection("font-style", "Font Styles")}
446 |         ${this.renderSection("font-weight", "Font Weights")}
447 |         ${this.renderSection("font-size", "Font Sizes")}
448 |         ${this.renderSection("font-family", "Font Families")}
449 |         ${this.renderSection("line-height", "Line Heights")}
450 |         ${this.renderSection("border-style", "Border Styles")}
451 |         ${this.renderSection("border-color", "Border Colors")}
452 |         ${this.renderSection("radius", "Radius")}
453 |         ${this.renderSection("border-radius", "Border Radius")}
454 |         ${this.renderSection("hr-color", "Horizontal Rule Colors")}
455 |         ${this.renderSection("gradient", "Gradients")}
456 |         ${this.renderSection("background-gradient", "Background Gradients")}
457 |         ${this.renderSection("drop-shadow", "Drop Shadows")}
458 |         ${this.renderSection("box-shadow", "Box Shadows")}
459 |         ${this.renderSection("inner-shadow", "Inner Drop Shadows", this.renderDropShadow)}
460 |         ${this.renderSection("time", "Time")}
461 |         ${this.renderSection("media-query", "Media Queries")}
462 |       </main>
463 |     </div>
464 |   </body>
465 | </html>
466 | `;
467 |   }
468 | }
469 | 
470 | module.exports = result => {
471 |   const styleguide = new Styleguide(result.toJS());
472 |   return styleguide.render();
473 | };
474 | 


--------------------------------------------------------------------------------
/src/index.js.flow:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | import type {
  3 |   Base,
  4 |   CloudColor,
  5 |   InkColor,
  6 |   ProductColor,
  7 |   SocialColor,
  8 |   StatusColor,
  9 |   WhiteColor,
 10 | } from "./foundation";
 11 | 
 12 | export type Tokens = {|
 13 |   colorTextPrimary: string,
 14 |   colorTextSecondary: string,
 15 |   colorTextError: string,
 16 |   colorTextInfo: string,
 17 |   colorTextSuccess: string,
 18 |   colorTextWarning: string,
 19 |   colorTextCritical: string,
 20 |   colorTextWhite: string,
 21 |   colorIconPrimary: string,
 22 |   colorIconSecondary: string,
 23 |   colorIconTertiary: string,
 24 |   colorIconInfo: string,
 25 |   colorIconSuccess: string,
 26 |   colorIconWarning: string,
 27 |   colorIconCritical: string,
 28 |   colorHeading: string,
 29 |   colorHeadingInverted: string,
 30 |   colorTextLinkPrimary: string,
 31 |   colorTextLinkPrimaryHover: string,
 32 |   colorTextLinkSecondary: string,
 33 |   colorTextLinkSecondaryHover: string,
 34 |   colorAlertIconSuccess: string,
 35 |   colorTextAlertSuccess: string,
 36 |   colorAlertIconInfo: string,
 37 |   colorTextAlertInfo: string,
 38 |   colorAlertIconWarning: string,
 39 |   colorTextAlertWarning: string,
 40 |   colorAlertIconCritical: string,
 41 |   colorTextAlertCritical: string,
 42 |   colorTextAlertLink: string,
 43 |   colorTextButtonFilled: string,
 44 |   colorTextButtonFilledHover: string,
 45 |   colorTextButtonFilledActive: string,
 46 |   colorTextButtonPrimary: string,
 47 |   colorTextButtonPrimaryHover: string,
 48 |   colorTextButtonPrimaryActive: string,
 49 |   colorTextButtonSecondary: string,
 50 |   colorTextButtonSecondaryHover: string,
 51 |   colorTextButtonSecondaryActive: string,
 52 |   colorTextButtonInfo: string,
 53 |   colorTextButtonInfoHover: string,
 54 |   colorTextButtonInfoActive: string,
 55 |   colorTextButtonSuccess: string,
 56 |   colorTextButtonSuccessHover: string,
 57 |   colorTextButtonSuccessActive: string,
 58 |   colorTextButtonWarning: string,
 59 |   colorTextButtonWarningHover: string,
 60 |   colorTextButtonWarningActive: string,
 61 |   colorTextButtonCritical: string,
 62 |   colorTextButtonCriticalHover: string,
 63 |   colorTextButtonCriticalActive: string,
 64 |   colorTextButtonFacebook: string,
 65 |   colorTextButtonFacebookHover: string,
 66 |   colorTextButtonFacebookActive: string,
 67 |   colorTextButtonGoogle: string,
 68 |   colorTextButtonGoogleHover: string,
 69 |   colorTextButtonGoogleActive: string,
 70 |   colorTextButtonWhite: string,
 71 |   colorTextButtonWhiteHover: string,
 72 |   colorTextButtonWhiteActive: string,
 73 |   colorTextButtonPrimaryBordered: string,
 74 |   colorTextButtonPrimaryBorderedHover: string,
 75 |   colorTextButtonPrimaryBorderedActive: string,
 76 |   colorTextButtonSecondaryBordered: string,
 77 |   colorTextButtonSecondaryBorderedHover: string,
 78 |   colorTextButtonSecondaryBorderedActive: string,
 79 |   colorTextButtonInfoBordered: string,
 80 |   colorTextButtonInfoBorderedHover: string,
 81 |   colorTextButtonInfoBorderedActive: string,
 82 |   colorTextButtonSuccessBordered: string,
 83 |   colorTextButtonSuccessBorderedHover: string,
 84 |   colorTextButtonSuccessBorderedActive: string,
 85 |   colorTextButtonWarningBordered: string,
 86 |   colorTextButtonWarningBorderedHover: string,
 87 |   colorTextButtonWarningBorderedActive: string,
 88 |   colorTextButtonCriticalBordered: string,
 89 |   colorTextButtonCriticalBorderedHover: string,
 90 |   colorTextButtonCriticalBorderedActive: string,
 91 |   colorTextButtonFacebookBordered: string,
 92 |   colorTextButtonFacebookBorderedHover: string,
 93 |   colorTextButtonFacebookBorderedActive: string,
 94 |   colorTextButtonGoogleBordered: string,
 95 |   colorTextButtonGoogleBorderedHover: string,
 96 |   colorTextButtonGoogleBorderedActive: string,
 97 |   colorTextButtonWhiteBordered: string,
 98 |   colorTextButtonWhiteBorderedHover: string,
 99 |   colorTextButtonWhiteBorderedActive: string,
100 |   colorTextButtonLinkPrimary: string,
101 |   colorTextButtonLinkPrimaryHover: string,
102 |   colorTextButtonLinkPrimaryActive: string,
103 |   colorTextButtonLinkSecondary: string,
104 |   colorTextButtonLinkSecondaryHover: string,
105 |   colorTextButtonLinkSecondaryActive: string,
106 |   colorTextInput: string,
107 |   colorTextInputPrefix: string,
108 |   colorTextInputDisabled: string,
109 |   colorTextBadgeNeutral: string,
110 |   colorTextBadgeInfo: string,
111 |   colorTextBadgeSuccess: string,
112 |   colorTextBadgeWarning: string,
113 |   colorTextBadgeCritical: string,
114 |   colorTextBadgeDark: string,
115 |   colorTextBadgeWhite: string,
116 |   colorTextLoading: string,
117 |   colorTextTable: string,
118 |   colorTextTag: string,
119 |   colorTextTagSelected: string,
120 |   colorIconInput: string,
121 |   colorPlaceholderInput: string,
122 |   colorPlaceholderInputError: string,
123 |   colorPlaceholderInputFile: string,
124 |   colorPlaceholderInputFileError: string,
125 |   colorFormLabel: string,
126 |   colorFormLabelFilled: string,
127 |   colorInfoCheckBoxRadio: string,
128 |   colorIconCheckboxRadio: string,
129 |   colorIconCheckboxRadioDisabled: string,
130 |   colorIconRadioButton: string,
131 |   colorIconRadioButtonDisabled: string,
132 |   colorStopoverArrow: string,
133 |   fontFamily: string,
134 |   backgroundBody: string,
135 |   backgroundModal: string,
136 |   backgroundCard: string,
137 |   backgroundCarrierLogo: string,
138 |   backgroundCountryFlag: string,
139 |   backgroundButtonPrimary: string,
140 |   backgroundButtonPrimaryHover: string,
141 |   backgroundButtonPrimaryActive: string,
142 |   backgroundButtonSecondary: string,
143 |   backgroundButtonSecondaryHover: string,
144 |   backgroundButtonSecondaryActive: string,
145 |   backgroundButtonFacebook: string,
146 |   backgroundButtonFacebookHover: string,
147 |   backgroundButtonFacebookActive: string,
148 |   backgroundButtonGoogle: string,
149 |   backgroundButtonGoogleHover: string,
150 |   backgroundButtonGoogleActive: string,
151 |   backgroundButtonInfo: string,
152 |   backgroundButtonInfoHover: string,
153 |   backgroundButtonInfoActive: string,
154 |   backgroundButtonSuccess: string,
155 |   backgroundButtonSuccessHover: string,
156 |   backgroundButtonSuccessActive: string,
157 |   backgroundButtonWarning: string,
158 |   backgroundButtonWarningHover: string,
159 |   backgroundButtonWarningActive: string,
160 |   backgroundButtonCritical: string,
161 |   backgroundButtonCriticalHover: string,
162 |   backgroundButtonCriticalActive: string,
163 |   backgroundButtonWhite: string,
164 |   backgroundButtonWhiteHover: string,
165 |   backgroundButtonWhiteActive: string,
166 |   backgroundButtonBordered: string,
167 |   backgroundButtonBorderedHover: string,
168 |   backgroundButtonBorderedActive: string,
169 |   backgroundButtonWhiteBordered: string,
170 |   backgroundButtonWhiteBorderedHover: string,
171 |   backgroundButtonWhiteBorderedActive: string,
172 |   backgroundButtonLinkPrimary: string,
173 |   backgroundButtonLinkPrimaryHover: string,
174 |   backgroundButtonLinkPrimaryActive: string,
175 |   backgroundButtonLinkSecondary: string,
176 |   backgroundButtonLinkSecondaryHover: string,
177 |   backgroundButtonLinkSecondaryActive: string,
178 |   backgroundInput: string,
179 |   backgroundInputDisabled: string,
180 |   backgroundAlertSuccess: string,
181 |   backgroundAlertInfo: string,
182 |   backgroundAlertWarning: string,
183 |   backgroundAlertCritical: string,
184 |   backgroundBadgeNeutral: string,
185 |   backgroundBadgeInfo: string,
186 |   backgroundBadgeSuccess: string,
187 |   backgroundBadgeWarning: string,
188 |   backgroundBadgeCritical: string,
189 |   backgroundBadgeDark: string,
190 |   backgroundBadgeWhite: string,
191 |   backgroundServiceLogo: string,
192 |   backgroundIllustration: string,
193 |   backgroundSeparator: string,
194 |   backgroundTableShadowLeft: string,
195 |   backgroundTableShadowRight: string,
196 |   backgroundTable: string,
197 |   backgroundTableEven: string,
198 |   backgroundTableHover: string,
199 |   backgroundTag: string,
200 |   backgroundTagSelected: string,
201 |   backgroundTagHover: string,
202 |   backgroundTagSelectedHover: string,
203 |   backgroundTagActive: string,
204 |   backgroundTagSelectedActive: string,
205 |   backgroundTooltip: string,
206 |   backgroundTooltipLargeMobile: string,
207 |   fontSizeHeadingDisplay: string,
208 |   fontSizeHeadingDisplaySubtitle: string,
209 |   fontSizeHeadingTitle1: string,
210 |   fontSizeHeadingTitle2: string,
211 |   fontSizeHeadingTitle3: string,
212 |   fontSizeHeadingTitle4: string,
213 |   fontSizeHeadingTitle5: string,
214 |   fontSizeTextNormal: string,
215 |   fontSizeTextLarge: string,
216 |   fontSizeTextSmall: string,
217 |   fontSizeMessage: string,
218 |   fontSizeButtonLarge: string,
219 |   fontSizeButtonNormal: string,
220 |   fontSizeButtonSmall: string,
221 |   fontSizeInputNormal: string,
222 |   fontSizeInputSmall: string,
223 |   fontSizeFormLabel: string,
224 |   fontSizeFormFeedback: string,
225 |   borderRadiusCircle: string,
226 |   borderRadiusNormal: string,
227 |   borderRadiusLarge: string,
228 |   borderRadiusSmall: string,
229 |   borderRadiusBadge: string,
230 |   zIndexDefault: string,
231 |   zIndexSticky: string,
232 |   zIndexModalOverlay: string,
233 |   zIndexModal: string,
234 |   zIndexOnTheTop: string,
235 |   widthIconSmall: string,
236 |   heightIconSmall: string,
237 |   widthIconMedium: string,
238 |   heightIconMedium: string,
239 |   widthIconLarge: string,
240 |   heightIconLarge: string,
241 |   heightInputNormal: string,
242 |   heightInputLarge: string,
243 |   heightInputSmall: string,
244 |   heightButtonNormal: string,
245 |   heightButtonLarge: string,
246 |   heightButtonSmall: string,
247 |   heightRadioButton: string,
248 |   widthRadioButton: string,
249 |   heightCheckbox: string,
250 |   widthCheckbox: string,
251 |   heightCountryFlag: string,
252 |   widthCountryFlag: string,
253 |   heightBadge: string,
254 |   widthBadgeCircled: string,
255 |   heightIllustrationSmall: string,
256 |   heightIllustrationMedium: string,
257 |   heightServiceLogoSmall: string,
258 |   heightServiceLogoMedium: string,
259 |   heightServiceLogoLarge: string,
260 |   heightSeparator: string,
261 |   heightInputGroupSeparatorSmall: string,
262 |   heightInputGroupSeparatorNormal: string,
263 |   widthModalSmall: string,
264 |   widthModalNormal: string,
265 |   widthModalLarge: string,
266 |   widthStopoverArrow: string,
267 |   heightStopoverArrow: string,
268 |   widthBreakpointMediumMobile: number,
269 |   widthBreakpointLargeMobile: number,
270 |   widthBreakpointTablet: number,
271 |   widthBreakpointDesktop: number,
272 |   widthBreakpointLargeDesktop: number,
273 |   borderColorInput: string,
274 |   borderColorInputHover: string,
275 |   borderColorInputActive: string,
276 |   borderColorInputFocus: string,
277 |   borderColorInputError: string,
278 |   borderColorInputErrorHover: string,
279 |   borderColorInputErrorFocus: string,
280 |   borderColorTableCell: string,
281 |   borderColorCard: string,
282 |   borderColorModal: string,
283 |   borderColorButtonPrimaryBordered: string,
284 |   borderColorButtonPrimaryBorderedHover: string,
285 |   borderColorButtonPrimaryBorderedActive: string,
286 |   borderColorButtonSecondaryBordered: string,
287 |   borderColorButtonSecondaryBorderedHover: string,
288 |   borderColorButtonSecondaryBorderedActive: string,
289 |   borderColorButtonFacebookBordered: string,
290 |   borderColorButtonFacebookBorderedHover: string,
291 |   borderColorButtonFacebookBorderedActive: string,
292 |   borderColorButtonGoogleBordered: string,
293 |   borderColorButtonGoogleBorderedHover: string,
294 |   borderColorButtonGoogleBorderedActive: string,
295 |   borderColorButtonInfoBordered: string,
296 |   borderColorButtonInfoBorderedHover: string,
297 |   borderColorButtonInfoBorderedActive: string,
298 |   borderColorButtonSuccessBordered: string,
299 |   borderColorButtonSuccessBorderedHover: string,
300 |   borderColorButtonSuccessBorderedActive: string,
301 |   borderColorButtonWarningBordered: string,
302 |   borderColorButtonWarningBorderedHover: string,
303 |   borderColorButtonWarningBorderedActive: string,
304 |   borderColorButtonCriticalBordered: string,
305 |   borderColorButtonCriticalBorderedHover: string,
306 |   borderColorButtonCriticalBorderedActive: string,
307 |   borderColorButtonWhiteBordered: string,
308 |   borderColorButtonWhiteBorderedHover: string,
309 |   borderColorButtonWhiteBorderedActive: string,
310 |   borderColorCheckboxRadio: string,
311 |   borderColorCheckboxRadioError: string,
312 |   borderColorCheckboxRadioHover: string,
313 |   borderColorCheckboxRadioActive: string,
314 |   borderColorCheckboxRadioFocus: string,
315 |   borderColorTable: string,
316 |   borderColorTableHead: string,
317 |   borderColorTag: string,
318 |   borderColorTagFocus: string,
319 |   borderStyleCard: string,
320 |   borderWidthCard: string,
321 |   borderStyleInput: string,
322 |   borderWidthInput: string,
323 |   borderWidthInputFocus: string,
324 |   opacityOverlay: string,
325 |   opacityButtonDisabled: string,
326 |   opacityRadioButtonDisabled: string,
327 |   opacityCheckboxDisabled: string,
328 |   fontWeightNormal: string,
329 |   fontWeightMedium: string,
330 |   fontWeightBold: string,
331 |   fontWeightLinks: string,
332 |   fontWeightHeadingDisplay: string,
333 |   fontWeightHeadingDisplaySubtitle: string,
334 |   fontWeightHeadingTitle1: string,
335 |   fontWeightHeadingTitle2: string,
336 |   fontWeightHeadingTitle3: string,
337 |   fontWeightHeadingTitle4: string,
338 |   fontWeightHeadingTitle5: string,
339 |   fontWeightTableHead: string,
340 |   paddingAlert: string,
341 |   paddingAlertWithIcon: string,
342 |   paddingBadge: string,
343 |   paddingButtonWithoutText: string,
344 |   paddingButtonSmall: string,
345 |   paddingButtonNormal: string,
346 |   paddingButtonLarge: string,
347 |   paddingButtonSmallWithIcons: string,
348 |   paddingButtonNormalWithIcons: string,
349 |   paddingButtonLargeWithIcons: string,
350 |   paddingButtonSmallWithLeftIcon: string,
351 |   paddingButtonNormalWithLeftIcon: string,
352 |   paddingButtonLargeWithLeftIcon: string,
353 |   paddingButtonSmallWithRightIcon: string,
354 |   paddingButtonNormalWithRightIcon: string,
355 |   paddingButtonLargeWithRightIcon: string,
356 |   paddingTextareaSmall: string,
357 |   paddingTextareaNormal: string,
358 |   paddingInputSmall: string,
359 |   paddingInputNormal: string,
360 |   marginButtonIconSmall: string,
361 |   marginButtonIconNormal: string,
362 |   marginButtonIconLarge: string,
363 |   marginButtonGroup: string,
364 |   marginTopFormFeedback: string,
365 |   marginBottomSelectSuffix: string,
366 |   paddingInputFile: string,
367 |   paddingLeftSelectPrefix: string,
368 |   paddingLoading: string,
369 |   paddingTable: string,
370 |   paddingTableCompact: string,
371 |   paddingTag: string,
372 |   paddingTagWithIcon: string,
373 |   paddingTagRemovable: string,
374 |   paddingTagRemovableWithIcon: string,
375 |   marginBadgeIcon: string,
376 |   spaceXXXSmall: string,
377 |   spaceXXSmall: string,
378 |   spaceXSmall: string,
379 |   spaceSmall: string,
380 |   spaceMedium: string,
381 |   spaceLarge: string,
382 |   spaceXLarge: string,
383 |   spaceXXLarge: string,
384 |   spaceXXXLarge: string,
385 |   durationFast: string,
386 |   durationNormal: string,
387 |   durationSlow: string,
388 |   modifierScaleButtonActive: number,
389 |   modifierScaleCheckboxRadioActive: number,
390 |   lineHeightText: string,
391 |   lineHeightTextSmall: string,
392 |   lineHeightTextNormal: string,
393 |   lineHeightTextLarge: string,
394 |   lineHeightHeading: string,
395 |   lineHeightHeadingDisplay: string,
396 |   lineHeightHeadingDisplaySubtitle: string,
397 |   lineHeightHeadingTitle1: string,
398 |   lineHeightHeadingTitle2: string,
399 |   lineHeightHeadingTitle3: string,
400 |   lineHeightHeadingTitle4: string,
401 |   lineHeightHeadingTitle5: string,
402 |   textDecorationTextLinkPrimary: string,
403 |   textDecorationTextLinkPrimaryHover: string,
404 |   textDecorationTextLinkSecondary: string,
405 |   textDecorationTextLinkSecondaryHover: string,
406 |   boxShadowButtonFocus: string,
407 |   boxShadowAction: string,
408 |   boxShadowActionActive: string,
409 |   boxShadowFixed: string,
410 |   boxShadowFixedReverse: string,
411 |   boxShadowRaised: string,
412 |   boxShadowRaisedReverse: string,
413 |   boxShadowOverlay: string,
414 |   paletteProductLight: string,
415 |   paletteProductLightHover: string,
416 |   paletteProductLightActive: string,
417 |   paletteProductNormal: string,
418 |   paletteProductNormalHover: string,
419 |   paletteProductNormalActive: string,
420 |   paletteProductDark: string,
421 |   paletteProductDarkHover: string,
422 |   paletteProductDarkActive: string,
423 |   paletteProductDarker: string,
424 |   paletteWhite: string,
425 |   paletteWhiteHover: string,
426 |   paletteWhiteActive: string,
427 |   paletteCloudLight: string,
428 |   paletteCloudLightHover: string,
429 |   paletteCloudLightActive: string,
430 |   paletteCloudNormal: string,
431 |   paletteCloudNormalHover: string,
432 |   paletteCloudNormalActive: string,
433 |   paletteCloudDark: string,
434 |   paletteInkLighter: string,
435 |   paletteInkLighterHover: string,
436 |   paletteInkLighterActive: string,
437 |   paletteInkLight: string,
438 |   paletteInkLightHover: string,
439 |   paletteInkLightActive: string,
440 |   paletteInkNormal: string,
441 |   paletteInkNormalHover: string,
442 |   paletteInkNormalActive: string,
443 |   paletteOrangeLight: string,
444 |   paletteOrangeLightHover: string,
445 |   paletteOrangeLightActive: string,
446 |   paletteOrangeNormal: string,
447 |   paletteOrangeNormalHover: string,
448 |   paletteOrangeNormalActive: string,
449 |   paletteOrangeDark: string,
450 |   paletteOrangeDarkHover: string,
451 |   paletteOrangeDarkActive: string,
452 |   paletteOrangeDarker: string,
453 |   paletteRedLight: string,
454 |   paletteRedLightHover: string,
455 |   paletteRedLightActive: string,
456 |   paletteRedNormal: string,
457 |   paletteRedNormalHover: string,
458 |   paletteRedNormalActive: string,
459 |   paletteRedDark: string,
460 |   paletteRedDarkHover: string,
461 |   paletteRedDarkActive: string,
462 |   paletteRedDarker: string,
463 |   paletteGreenLight: string,
464 |   paletteGreenLightHover: string,
465 |   paletteGreenLightActive: string,
466 |   paletteGreenNormal: string,
467 |   paletteGreenNormalHover: string,
468 |   paletteGreenNormalActive: string,
469 |   paletteGreenDark: string,
470 |   paletteGreenDarkHover: string,
471 |   paletteGreenDarkActive: string,
472 |   paletteGreenDarker: string,
473 |   paletteBlueLight: string,
474 |   paletteBlueLightHover: string,
475 |   paletteBlueLightActive: string,
476 |   paletteBlueNormal: string,
477 |   paletteBlueNormalHover: string,
478 |   paletteBlueNormalActive: string,
479 |   paletteBlueDark: string,
480 |   paletteBlueDarkHover: string,
481 |   paletteBlueDarkActive: string,
482 |   paletteBlueDarker: string,
483 |   paletteSocialFacebook: string,
484 |   paletteSocialFacebookHover: string,
485 |   paletteSocialFacebookActive: string,
486 | |};
487 | 
488 | export type ThemePaletteColors = {|
489 |   productLight: string,
490 |   productLightHover: string,
491 |   productLightActive: string,
492 |   productNormal: string,
493 |   productNormalHover: string,
494 |   productNormalActive: string,
495 |   productDark: string,
496 |   productDarkHover?: string,
497 |   productDarkActive?: string,
498 |   productDarker?: string,
499 | |};
500 | 
501 | type CustomPalette = {|
502 |   product?: $Shape<ProductColor>,
503 |   white?: $Shape<WhiteColor>,
504 |   cloud?: $Shape<CloudColor>,
505 |   ink?: $Shape<InkColor>,
506 |   orange?: $Shape<StatusColor>,
507 |   red?: $Shape<StatusColor>,
508 |   green?: $Shape<StatusColor>,
509 |   blue?: $Shape<StatusColor>,
510 |   social?: $Shape<SocialColor>,
511 | |};
512 | type CustomBase = $Shape<Base>;
513 | 
514 | type CustomFoundation = $Shape<{|
515 |   palette: CustomPalette,
516 |   base: CustomBase,
517 | |}>;
518 | 
519 | export type FromPlainObject = (themePaletteColors: ThemePaletteColors) => Tokens;
520 | export type GetTokens = (customFoundation?: CustomFoundation) => Tokens;
521 | 
522 | declare export var getTokens: GetTokens;
523 | declare export var fromPlainObject: FromPlainObject;
524 | declare export var defaultTokens: Tokens;
525 | 


--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | declare module "@kiwicom/orbit-design-tokens/";
  3 | 
  4 | export type ProductColor = {
  5 |   light: string;
  6 |   lightHover: string;
  7 |   lightActive: string;
  8 |   normal: string;
  9 |   normalHover: string;
 10 |   normalActive: string;
 11 |   dark: string;
 12 |   darkHover: string;
 13 |   darkActive: string;
 14 |   darker: string;
 15 | };
 16 | 
 17 | export type StatusColor = {
 18 |   light: string;
 19 |   lightHover: string;
 20 |   lightActive: string;
 21 |   normal: string;
 22 |   normalHover: string;
 23 |   normalActive: string;
 24 |   dark: string;
 25 |   darkHover: string;
 26 |   darkActive: string;
 27 |   darker: string;
 28 | };
 29 | 
 30 | export type WhiteColor = {
 31 |   normal: string;
 32 |   normalHover: string;
 33 |   normalActive: string;
 34 | };
 35 | 
 36 | export type CloudColor = {
 37 |   light: string;
 38 |   lightHover: string;
 39 |   lightActive: string;
 40 |   normal: string;
 41 |   normalHover: string;
 42 |   normalActive: string;
 43 |   dark: string;
 44 | };
 45 | 
 46 | export type InkColor = {
 47 |   lighter: string;
 48 |   lighterHover: string;
 49 |   lighterActive: string;
 50 |   light: string;
 51 |   lightHover: string;
 52 |   lightActive: string;
 53 |   normal: string;
 54 |   normalHover: string;
 55 |   normalActive: string;
 56 | };
 57 | 
 58 | export type SocialColor = {
 59 |   facebook: string;
 60 |   facebookHover: string;
 61 |   facebookActive: string;
 62 | };
 63 | 
 64 | export type Palette = {
 65 |   product: ProductColor;
 66 |   white: WhiteColor;
 67 |   cloud: CloudColor;
 68 |   ink: InkColor;
 69 |   orange: StatusColor;
 70 |   red: StatusColor;
 71 |   green: StatusColor;
 72 |   blue: StatusColor;
 73 |   social: SocialColor;
 74 | };
 75 | 
 76 | export type Base = {
 77 |   fontFamily: string;
 78 |   fontSizeSm: string;
 79 |   fontSizeMd: string;
 80 |   fontSizeLg: string;
 81 |   borderRadius: string;
 82 |   sizeSm: string;
 83 |   sizeMd: string;
 84 |   sizeLg: string;
 85 |   sizeXl: string;
 86 |   size2xl: string;
 87 |   opacitySmall: string;
 88 |   opacityMedium: string;
 89 |   opacityLarge: string;
 90 |   fontWeightNormal: string;
 91 |   fontWeightMedium: string;
 92 |   fontWeightBold: string;
 93 |   space2xs: string;
 94 |   spaceXs: string;
 95 |   spaceSm: string;
 96 |   spaceMd: string;
 97 |   spaceLg: string;
 98 |   spaceXl: string;
 99 |   space2xl: string;
100 |   space3xl: string;
101 |   durationFast: string;
102 |   durationNormal: string;
103 |   durationSlow: string;
104 |   transitionDefault: string;
105 |   lineHeight: string;
106 | };
107 | 
108 | export type Foundation = {
109 |   palette: Palette;
110 |   base: Base;
111 | };
112 | 
113 | export type Tokens = {
114 |   colorTextPrimary: string;
115 |   colorTextSecondary: string;
116 |   colorTextError: string;
117 |   colorTextInfo: string;
118 |   colorTextSuccess: string;
119 |   colorTextWarning: string;
120 |   colorTextCritical: string;
121 |   colorTextWhite: string;
122 |   colorIconPrimary: string;
123 |   colorIconSecondary: string;
124 |   colorIconTertiary: string;
125 |   colorIconInfo: string;
126 |   colorIconSuccess: string;
127 |   colorIconWarning: string;
128 |   colorIconCritical: string;
129 |   colorHeading: string;
130 |   colorHeadingInverted: string;
131 |   colorTextLinkPrimary: string;
132 |   colorTextLinkPrimaryHover: string;
133 |   colorTextLinkSecondary: string;
134 |   colorTextLinkSecondaryHover: string;
135 |   colorAlertIconSuccess: string;
136 |   colorTextAlertSuccess: string;
137 |   colorAlertIconInfo: string;
138 |   colorTextAlertInfo: string;
139 |   colorAlertIconWarning: string;
140 |   colorTextAlertWarning: string;
141 |   colorAlertIconCritical: string;
142 |   colorTextAlertCritical: string;
143 |   colorTextAlertLink: string;
144 |   colorTextButtonFilled: string;
145 |   colorTextButtonFilledHover: string;
146 |   colorTextButtonFilledActive: string;
147 |   colorTextButtonPrimary: string;
148 |   colorTextButtonPrimaryHover: string;
149 |   colorTextButtonPrimaryActive: string;
150 |   colorTextButtonSecondary: string;
151 |   colorTextButtonSecondaryHover: string;
152 |   colorTextButtonSecondaryActive: string;
153 |   colorTextButtonInfo: string;
154 |   colorTextButtonInfoHover: string;
155 |   colorTextButtonInfoActive: string;
156 |   colorTextButtonSuccess: string;
157 |   colorTextButtonSuccessHover: string;
158 |   colorTextButtonSuccessActive: string;
159 |   colorTextButtonWarning: string;
160 |   colorTextButtonWarningHover: string;
161 |   colorTextButtonWarningActive: string;
162 |   colorTextButtonCritical: string;
163 |   colorTextButtonCriticalHover: string;
164 |   colorTextButtonCriticalActive: string;
165 |   colorTextButtonFacebook: string;
166 |   colorTextButtonFacebookHover: string;
167 |   colorTextButtonFacebookActive: string;
168 |   colorTextButtonGoogle: string;
169 |   colorTextButtonGoogleHover: string;
170 |   colorTextButtonGoogleActive: string;
171 |   colorTextButtonWhite: string;
172 |   colorTextButtonWhiteHover: string;
173 |   colorTextButtonWhiteActive: string;
174 |   colorTextButtonPrimaryBordered: string;
175 |   colorTextButtonPrimaryBorderedHover: string;
176 |   colorTextButtonPrimaryBorderedActive: string;
177 |   colorTextButtonSecondaryBordered: string;
178 |   colorTextButtonSecondaryBorderedHover: string;
179 |   colorTextButtonSecondaryBorderedActive: string;
180 |   colorTextButtonInfoBordered: string;
181 |   colorTextButtonInfoBorderedHover: string;
182 |   colorTextButtonInfoBorderedActive: string;
183 |   colorTextButtonSuccessBordered: string;
184 |   colorTextButtonSuccessBorderedHover: string;
185 |   colorTextButtonSuccessBorderedActive: string;
186 |   colorTextButtonWarningBordered: string;
187 |   colorTextButtonWarningBorderedHover: string;
188 |   colorTextButtonWarningBorderedActive: string;
189 |   colorTextButtonCriticalBordered: string;
190 |   colorTextButtonCriticalBorderedHover: string;
191 |   colorTextButtonCriticalBorderedActive: string;
192 |   colorTextButtonFacebookBordered: string;
193 |   colorTextButtonFacebookBorderedHover: string;
194 |   colorTextButtonFacebookBorderedActive: string;
195 |   colorTextButtonGoogleBordered: string;
196 |   colorTextButtonGoogleBorderedHover: string;
197 |   colorTextButtonGoogleBorderedActive: string;
198 |   colorTextButtonWhiteBordered: string;
199 |   colorTextButtonWhiteBorderedHover: string;
200 |   colorTextButtonWhiteBorderedActive: string;
201 |   colorTextButtonLinkPrimary: string;
202 |   colorTextButtonLinkPrimaryHover: string;
203 |   colorTextButtonLinkPrimaryActive: string;
204 |   colorTextButtonLinkSecondary: string;
205 |   colorTextButtonLinkSecondaryHover: string;
206 |   colorTextButtonLinkSecondaryActive: string;
207 |   colorTextInput: string;
208 |   colorTextInputPrefix: string;
209 |   colorTextInputDisabled: string;
210 |   colorTextBadgeNeutral: string;
211 |   colorTextBadgeInfo: string;
212 |   colorTextBadgeSuccess: string;
213 |   colorTextBadgeWarning: string;
214 |   colorTextBadgeCritical: string;
215 |   colorTextBadgeDark: string;
216 |   colorTextBadgeWhite: string;
217 |   colorTextLoading: string;
218 |   colorTextTable: string;
219 |   colorTextTag: string;
220 |   colorTextTagSelected: string;
221 |   colorIconInput: string;
222 |   colorPlaceholderInput: string;
223 |   colorPlaceholderInputError: string;
224 |   colorPlaceholderInputFile: string;
225 |   colorPlaceholderInputFileError: string;
226 |   colorFormLabel: string;
227 |   colorFormLabelFilled: string;
228 |   colorInfoCheckBoxRadio: string;
229 |   colorIconCheckboxRadio: string;
230 |   colorIconCheckboxRadioDisabled: string;
231 |   colorIconRadioButton: string;
232 |   colorIconRadioButtonDisabled: string;
233 |   colorStopoverArrow: string;
234 |   fontFamily: string;
235 |   backgroundBody: string;
236 |   backgroundModal: string;
237 |   backgroundCard: string;
238 |   backgroundCarrierLogo: string;
239 |   backgroundCountryFlag: string;
240 |   backgroundButtonPrimary: string;
241 |   backgroundButtonPrimaryHover: string;
242 |   backgroundButtonPrimaryActive: string;
243 |   backgroundButtonSecondary: string;
244 |   backgroundButtonSecondaryHover: string;
245 |   backgroundButtonSecondaryActive: string;
246 |   backgroundButtonFacebook: string;
247 |   backgroundButtonFacebookHover: string;
248 |   backgroundButtonFacebookActive: string;
249 |   backgroundButtonGoogle: string;
250 |   backgroundButtonGoogleHover: string;
251 |   backgroundButtonGoogleActive: string;
252 |   backgroundButtonInfo: string;
253 |   backgroundButtonInfoHover: string;
254 |   backgroundButtonInfoActive: string;
255 |   backgroundButtonSuccess: string;
256 |   backgroundButtonSuccessHover: string;
257 |   backgroundButtonSuccessActive: string;
258 |   backgroundButtonWarning: string;
259 |   backgroundButtonWarningHover: string;
260 |   backgroundButtonWarningActive: string;
261 |   backgroundButtonCritical: string;
262 |   backgroundButtonCriticalHover: string;
263 |   backgroundButtonCriticalActive: string;
264 |   backgroundButtonWhite: string;
265 |   backgroundButtonWhiteHover: string;
266 |   backgroundButtonWhiteActive: string;
267 |   backgroundButtonBordered: string;
268 |   backgroundButtonBorderedHover: string;
269 |   backgroundButtonBorderedActive: string;
270 |   backgroundButtonWhiteBordered: string;
271 |   backgroundButtonWhiteBorderedHover: string;
272 |   backgroundButtonWhiteBorderedActive: string;
273 |   backgroundButtonLinkPrimary: string;
274 |   backgroundButtonLinkPrimaryHover: string;
275 |   backgroundButtonLinkPrimaryActive: string;
276 |   backgroundButtonLinkSecondary: string;
277 |   backgroundButtonLinkSecondaryHover: string;
278 |   backgroundButtonLinkSecondaryActive: string;
279 |   backgroundInput: string;
280 |   backgroundInputDisabled: string;
281 |   backgroundAlertSuccess: string;
282 |   backgroundAlertInfo: string;
283 |   backgroundAlertWarning: string;
284 |   backgroundAlertCritical: string;
285 |   backgroundBadgeNeutral: string;
286 |   backgroundBadgeInfo: string;
287 |   backgroundBadgeSuccess: string;
288 |   backgroundBadgeWarning: string;
289 |   backgroundBadgeCritical: string;
290 |   backgroundBadgeDark: string;
291 |   backgroundBadgeWhite: string;
292 |   backgroundServiceLogo: string;
293 |   backgroundIllustration: string;
294 |   backgroundSeparator: string;
295 |   backgroundTableShadowLeft: string;
296 |   backgroundTableShadowRight: string;
297 |   backgroundTable: string;
298 |   backgroundTableEven: string;
299 |   backgroundTableHover: string;
300 |   backgroundTag: string;
301 |   backgroundTagSelected: string;
302 |   backgroundTagHover: string;
303 |   backgroundTagSelectedHover: string;
304 |   backgroundTagActive: string;
305 |   backgroundTagSelectedActive: string;
306 |   backgroundTooltip: string;
307 |   backgroundTooltipLargeMobile: string;
308 |   fontSizeHeadingDisplay: string;
309 |   fontSizeHeadingDisplaySubtitle: string;
310 |   fontSizeHeadingTitle1: string;
311 |   fontSizeHeadingTitle2: string;
312 |   fontSizeHeadingTitle3: string;
313 |   fontSizeHeadingTitle4: string;
314 |   fontSizeHeadingTitle5: string;
315 |   fontSizeTextNormal: string;
316 |   fontSizeTextLarge: string;
317 |   fontSizeTextSmall: string;
318 |   fontSizeMessage: string;
319 |   fontSizeButtonLarge: string;
320 |   fontSizeButtonNormal: string;
321 |   fontSizeButtonSmall: string;
322 |   fontSizeInputNormal: string;
323 |   fontSizeInputSmall: string;
324 |   fontSizeFormLabel: string;
325 |   fontSizeFormFeedback: string;
326 |   borderRadiusCircle: string;
327 |   borderRadiusNormal: string;
328 |   borderRadiusLarge: string;
329 |   borderRadiusSmall: string;
330 |   borderRadiusBadge: string;
331 |   zIndexDefault: string;
332 |   zIndexSticky: string;
333 |   zIndexModalOverlay: string;
334 |   zIndexModal: string;
335 |   zIndexOnTheTop: string;
336 |   widthIconSmall: string;
337 |   heightIconSmall: string;
338 |   widthIconMedium: string;
339 |   heightIconMedium: string;
340 |   widthIconLarge: string;
341 |   heightIconLarge: string;
342 |   heightInputNormal: string;
343 |   heightInputLarge: string;
344 |   heightInputSmall: string;
345 |   heightButtonNormal: string;
346 |   heightButtonLarge: string;
347 |   heightButtonSmall: string;
348 |   heightRadioButton: string;
349 |   widthRadioButton: string;
350 |   heightCheckbox: string;
351 |   widthCheckbox: string;
352 |   heightCountryFlag: string;
353 |   widthCountryFlag: string;
354 |   heightBadge: string;
355 |   widthBadgeCircled: string;
356 |   heightIllustrationSmall: string;
357 |   heightIllustrationMedium: string;
358 |   heightServiceLogoSmall: string;
359 |   heightServiceLogoMedium: string;
360 |   heightServiceLogoLarge: string;
361 |   heightSeparator: string;
362 |   heightInputGroupSeparatorSmall: string;
363 |   heightInputGroupSeparatorNormal: string;
364 |   widthModalSmall: string;
365 |   widthModalNormal: string;
366 |   widthModalLarge: string;
367 |   widthStopoverArrow: string;
368 |   heightStopoverArrow: string;
369 |   widthBreakpointMediumMobile: number;
370 |   widthBreakpointLargeMobile: number;
371 |   widthBreakpointTablet: number;
372 |   widthBreakpointDesktop: number;
373 |   widthBreakpointLargeDesktop: number;
374 |   borderColorInput: string;
375 |   borderColorInputHover: string;
376 |   borderColorInputActive: string;
377 |   borderColorInputFocus: string;
378 |   borderColorInputError: string;
379 |   borderColorInputErrorHover: string;
380 |   borderColorInputErrorFocus: string;
381 |   borderColorTableCell: string;
382 |   borderColorCard: string;
383 |   borderColorModal: string;
384 |   borderColorButtonPrimaryBordered: string;
385 |   borderColorButtonPrimaryBorderedHover: string;
386 |   borderColorButtonPrimaryBorderedActive: string;
387 |   borderColorButtonSecondaryBordered: string;
388 |   borderColorButtonSecondaryBorderedHover: string;
389 |   borderColorButtonSecondaryBorderedActive: string;
390 |   borderColorButtonFacebookBordered: string;
391 |   borderColorButtonFacebookBorderedHover: string;
392 |   borderColorButtonFacebookBorderedActive: string;
393 |   borderColorButtonGoogleBordered: string;
394 |   borderColorButtonGoogleBorderedHover: string;
395 |   borderColorButtonGoogleBorderedActive: string;
396 |   borderColorButtonInfoBordered: string;
397 |   borderColorButtonInfoBorderedHover: string;
398 |   borderColorButtonInfoBorderedActive: string;
399 |   borderColorButtonSuccessBordered: string;
400 |   borderColorButtonSuccessBorderedHover: string;
401 |   borderColorButtonSuccessBorderedActive: string;
402 |   borderColorButtonWarningBordered: string;
403 |   borderColorButtonWarningBorderedHover: string;
404 |   borderColorButtonWarningBorderedActive: string;
405 |   borderColorButtonCriticalBordered: string;
406 |   borderColorButtonCriticalBorderedHover: string;
407 |   borderColorButtonCriticalBorderedActive: string;
408 |   borderColorButtonWhiteBordered: string;
409 |   borderColorButtonWhiteBorderedHover: string;
410 |   borderColorButtonWhiteBorderedActive: string;
411 |   borderColorCheckboxRadio: string;
412 |   borderColorCheckboxRadioError: string;
413 |   borderColorCheckboxRadioHover: string;
414 |   borderColorCheckboxRadioActive: string;
415 |   borderColorCheckboxRadioFocus: string;
416 |   borderColorTable: string;
417 |   borderColorTableHead: string;
418 |   borderColorTag: string;
419 |   borderColorTagFocus: string;
420 |   borderStyleCard: string;
421 |   borderWidthCard: string;
422 |   borderStyleInput: string;
423 |   borderWidthInput: string;
424 |   borderWidthInputFocus: string;
425 |   opacityOverlay: string;
426 |   opacityButtonDisabled: string;
427 |   opacityRadioButtonDisabled: string;
428 |   opacityCheckboxDisabled: string;
429 |   fontWeightNormal: string;
430 |   fontWeightMedium: string;
431 |   fontWeightBold: string;
432 |   fontWeightLinks: string;
433 |   fontWeightHeadingDisplay: string;
434 |   fontWeightHeadingDisplaySubtitle: string;
435 |   fontWeightHeadingTitle1: string;
436 |   fontWeightHeadingTitle2: string;
437 |   fontWeightHeadingTitle3: string;
438 |   fontWeightHeadingTitle4: string;
439 |   fontWeightHeadingTitle5: string;
440 |   fontWeightTableHead: string;
441 |   paddingAlert: string;
442 |   paddingAlertWithIcon: string;
443 |   paddingBadge: string;
444 |   paddingButtonWithoutText: string;
445 |   paddingButtonSmall: string;
446 |   paddingButtonNormal: string;
447 |   paddingButtonLarge: string;
448 |   paddingButtonSmallWithIcons: string;
449 |   paddingButtonNormalWithIcons: string;
450 |   paddingButtonLargeWithIcons: string;
451 |   paddingButtonSmallWithLeftIcon: string;
452 |   paddingButtonNormalWithLeftIcon: string;
453 |   paddingButtonLargeWithLeftIcon: string;
454 |   paddingButtonSmallWithRightIcon: string;
455 |   paddingButtonNormalWithRightIcon: string;
456 |   paddingButtonLargeWithRightIcon: string;
457 |   paddingTextareaSmall: string;
458 |   paddingTextareaNormal: string;
459 |   paddingInputSmall: string;
460 |   paddingInputNormal: string;
461 |   marginButtonIconSmall: string;
462 |   marginButtonIconNormal: string;
463 |   marginButtonIconLarge: string;
464 |   marginButtonGroup: string;
465 |   marginTopFormFeedback: string;
466 |   marginBottomSelectSuffix: string;
467 |   paddingInputFile: string;
468 |   paddingLeftSelectPrefix: string;
469 |   paddingLoading: string;
470 |   paddingTable: string;
471 |   paddingTableCompact: string;
472 |   paddingTag: string;
473 |   paddingTagWithIcon: string;
474 |   paddingTagRemovable: string;
475 |   paddingTagRemovableWithIcon: string;
476 |   marginBadgeIcon: string;
477 |   spaceXXXSmall: string;
478 |   spaceXXSmall: string;
479 |   spaceXSmall: string;
480 |   spaceSmall: string;
481 |   spaceMedium: string;
482 |   spaceLarge: string;
483 |   spaceXLarge: string;
484 |   spaceXXLarge: string;
485 |   spaceXXXLarge: string;
486 |   durationFast: string;
487 |   durationNormal: string;
488 |   durationSlow: string;
489 |   modifierScaleButtonActive: number;
490 |   modifierScaleCheckboxRadioActive: number;
491 |   lineHeightText: string;
492 |   lineHeightTextSmall: string;
493 |   lineHeightTextNormal: string;
494 |   lineHeightTextLarge: string;
495 |   lineHeightHeading: string;
496 |   lineHeightHeadingDisplay: string;
497 |   lineHeightHeadingDisplaySubtitle: string;
498 |   lineHeightHeadingTitle1: string;
499 |   lineHeightHeadingTitle2: string;
500 |   lineHeightHeadingTitle3: string;
501 |   lineHeightHeadingTitle4: string;
502 |   lineHeightHeadingTitle5: string;
503 |   textDecorationTextLinkPrimary: string;
504 |   textDecorationTextLinkPrimaryHover: string;
505 |   textDecorationTextLinkSecondary: string;
506 |   textDecorationTextLinkSecondaryHover: string;
507 |   boxShadowButtonFocus: string;
508 |   boxShadowAction: string;
509 |   boxShadowActionActive: string;
510 |   boxShadowFixed: string;
511 |   boxShadowFixedReverse: string;
512 |   boxShadowRaised: string;
513 |   boxShadowRaisedReverse: string;
514 |   boxShadowOverlay: string;
515 |   paletteProductLight: string;
516 |   paletteProductLightHover: string;
517 |   paletteProductLightActive: string;
518 |   paletteProductNormal: string;
519 |   paletteProductNormalHover: string;
520 |   paletteProductNormalActive: string;
521 |   paletteProductDark: string;
522 |   paletteProductDarkHover: string;
523 |   paletteProductDarkActive: string;
524 |   paletteProductDarker: string;
525 |   paletteWhite: string;
526 |   paletteWhiteHover: string;
527 |   paletteWhiteActive: string;
528 |   paletteCloudLight: string;
529 |   paletteCloudLightHover: string;
530 |   paletteCloudLightActive: string;
531 |   paletteCloudNormal: string;
532 |   paletteCloudNormalHover: string;
533 |   paletteCloudNormalActive: string;
534 |   paletteCloudDark: string;
535 |   paletteInkLighter: string;
536 |   paletteInkLighterHover: string;
537 |   paletteInkLighterActive: string;
538 |   paletteInkLight: string;
539 |   paletteInkLightHover: string;
540 |   paletteInkLightActive: string;
541 |   paletteInkNormal: string;
542 |   paletteInkNormalHover: string;
543 |   paletteInkNormalActive: string;
544 |   paletteOrangeLight: string;
545 |   paletteOrangeLightHover: string;
546 |   paletteOrangeLightActive: string;
547 |   paletteOrangeNormal: string;
548 |   paletteOrangeNormalHover: string;
549 |   paletteOrangeNormalActive: string;
550 |   paletteOrangeDark: string;
551 |   paletteOrangeDarkHover: string;
552 |   paletteOrangeDarkActive: string;
553 |   paletteOrangeDarker: string;
554 |   paletteRedLight: string;
555 |   paletteRedLightHover: string;
556 |   paletteRedLightActive: string;
557 |   paletteRedNormal: string;
558 |   paletteRedNormalHover: string;
559 |   paletteRedNormalActive: string;
560 |   paletteRedDark: string;
561 |   paletteRedDarkHover: string;
562 |   paletteRedDarkActive: string;
563 |   paletteRedDarker: string;
564 |   paletteGreenLight: string;
565 |   paletteGreenLightHover: string;
566 |   paletteGreenLightActive: string;
567 |   paletteGreenNormal: string;
568 |   paletteGreenNormalHover: string;
569 |   paletteGreenNormalActive: string;
570 |   paletteGreenDark: string;
571 |   paletteGreenDarkHover: string;
572 |   paletteGreenDarkActive: string;
573 |   paletteGreenDarker: string;
574 |   paletteBlueLight: string;
575 |   paletteBlueLightHover: string;
576 |   paletteBlueLightActive: string;
577 |   paletteBlueNormal: string;
578 |   paletteBlueNormalHover: string;
579 |   paletteBlueNormalActive: string;
580 |   paletteBlueDark: string;
581 |   paletteBlueDarkHover: string;
582 |   paletteBlueDarkActive: string;
583 |   paletteBlueDarker: string;
584 |   paletteSocialFacebook: string;
585 |   paletteSocialFacebookHover: string;
586 |   paletteSocialFacebookActive: string;
587 | };
588 | 
589 | export type ThemePaletteColors = {
590 |   productLight: string;
591 |   productLightHover: string;
592 |   productLightActive: string;
593 |   productNormal: string;
594 |   productNormalHover: string;
595 |   productNormalActive: string;
596 |   productDark: string;
597 |   productDarkHover?: string;
598 |   productDarkActive?: string;
599 |   productDarker?: string;
600 | };
601 | 
602 | type CustomPalette = {
603 |   product?: Partial<ProductColor>;
604 |   white?: Partial<WhiteColor>;
605 |   cloud?: Partial<CloudColor>;
606 |   ink?: Partial<InkColor>;
607 |   orange?: Partial<StatusColor>;
608 |   red?: Partial<StatusColor>;
609 |   green?: Partial<StatusColor>;
610 |   blue?: Partial<StatusColor>;
611 |   social?: Partial<SocialColor>;
612 | };
613 | type CustomBase = Partial<Base>;
614 | 
615 | type CustomFoundation = Partial<{
616 |   palette: CustomPalette;
617 |   base: CustomBase;
618 | }>;
619 | 
620 | export declare const ConvertHexToRgba: (color: string, opacity: number) => string;
621 | export declare const FromPlainObject: (themePaletteColors: ThemePaletteColors) => Tokens;
622 | export declare const GetTokens: (customFoundation?: CustomFoundation) => Tokens;
623 | export declare const defaultTokens: Tokens;
624 | 


--------------------------------------------------------------------------------
/output/theo-spec.sass:
--------------------------------------------------------------------------------
  1 | 
  2 | $background-button-link-secondary-active: rgb(214, 222, 230)
  3 | $padding-input-normal: 0 12px
  4 | $width-modal-small: 540px
  5 | $background-button-warning-hover: rgb(220, 124, 5)
  6 | $color-text-button-primary: rgb(255, 255, 255)
  7 | $border-color-button-facebook-bordered-active: rgb(53, 79, 136)
  8 | $margin-button-icon-normal: 8px
  9 | $height-button-normal: 44px
 10 | $color-icon-warning: rgb(233, 131, 5)
 11 | $font-size-form-label: 14px
 12 | $palette-cloud-light-hover: rgb(229, 234, 239)
 13 | $color-text-button-warning-active: rgb(255, 255, 255)
 14 | $palette-red-light: rgb(250, 234, 234)
 15 | $line-height-heading-title1: 36px
 16 | $background-table: rgb(255, 255, 255)
 17 | $color-alert-icon-info: rgb(1, 114, 203)
 18 | $palette-blue-normal-hover: rgb(1, 97, 172)
 19 | $color-text-button-critical: rgb(255, 255, 255)
 20 | $z-index-sticky: "100"
 21 | $border-color-checkbox-radio: rgb(186, 199, 213)
 22 | $palette-blue-light: rgb(232, 244, 253)
 23 | $box-shadow-action: 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 1px 4px 0px rgba(37, 42, 49, 0.12)
 24 | $color-text-badge-info: rgb(1, 114, 203)
 25 | $color-text-button-info-bordered-hover: rgb(1, 97, 172)
 26 | $palette-cloud-normal: rgb(239, 242, 245)
 27 | $palette-product-normal-hover: rgb(0, 152, 130)
 28 | $space-xx-small: 4px
 29 | $color-text-button-google-active: rgb(11, 12, 15)
 30 | $font-size-input-normal: 14px
 31 | $color-text-button-google-hover: rgb(24, 27, 32)
 32 | $palette-product-normal-active: rgb(0, 143, 123)
 33 | $line-height-heading-title2: 28px
 34 | $color-text-button-info-bordered-active: rgb(1, 80, 142)
 35 | $color-text-button-success: rgb(255, 255, 255)
 36 | $space-small: 12px
 37 | $height-service-logo-large: 48px
 38 | $background-button-link-secondary-hover: rgb(229, 234, 239)
 39 | $palette-blue-normal-active: rgb(1, 80, 142)
 40 | $color-text-button-warning-hover: rgb(255, 255, 255)
 41 | $palette-cloud-light-active: rgb(214, 222, 230)
 42 | $line-height-heading-title3: 24px
 43 | $palette-product-light: rgb(236, 248, 247)
 44 | $height-button-large: 52px
 45 | $background-button-warning-active: rgb(205, 115, 4)
 46 | $margin-button-icon-large: 12px
 47 | $border-color-button-info-bordered: rgb(1, 114, 203)
 48 | $background-button-primary: rgb(0, 169, 145)
 49 | $border-color-button-facebook-bordered-hover: rgb(56, 84, 144)
 50 | $background-button-google-hover: rgb(229, 234, 239)
 51 | $box-shadow-raised: 0px 4px 8px 0px rgba(37, 42, 49, 0.16), 0px 8px 24px 0px rgba(37, 42, 49, 0.24)
 52 | $background-badge-info: rgb(232, 244, 253)
 53 | $border-color-tag: rgb(239, 242, 245)
 54 | $background-button-success: rgb(40, 161, 56)
 55 | $palette-red-normal-active: rgb(157, 21, 21)
 56 | $color-text-button-secondary-bordered-active: rgb(11, 12, 15)
 57 | $line-height-heading-title4: 20px
 58 | $border-color-input-error-focus: rgb(210, 28, 28)
 59 | $padding-button-small: 0 12px
 60 | $color-text-secondary: rgb(95, 115, 140)
 61 | $color-text-link-primary-hover: rgb(0, 169, 145)
 62 | $color-text-button-link-secondary-hover: rgb(24, 27, 32)
 63 | $font-size-text-normal: 14px
 64 | $palette-green-dark-active: rgb(31, 81, 38)
 65 | $palette-ink-lighter-hover: rgb(166, 182, 200)
 66 | $border-color-button-primary-bordered: rgb(0, 169, 145)
 67 | $border-color-button-warning-bordered-active: rgb(205, 115, 4)
 68 | $color-text-button-filled: rgb(255, 255, 255)
 69 | $line-height-heading-title5: 20px
 70 | $height-input-small: 32px
 71 | $border-color-input-focus: rgb(1, 114, 203)
 72 | $padding-button-normal-with-right-icon: 0 12px 0 16px
 73 | $background-button-critical-active: rgb(157, 21, 21)
 74 | $opacity-overlay: "0.8"
 75 | $width-breakpoint-desktop: 992
 76 | $border-style-input: "solid"
 77 | $font-size-button-small: 12px
 78 | /* use for all basic elements like buttons, inputs, content containers */
 79 | $border-radius-normal: 3px
 80 | $border-radius-badge: 12px
 81 | $color-text-button-warning-bordered: rgb(233, 131, 5)
 82 | $box-shadow-overlay: 0px 12px 24px -4px rgba(37, 42, 49, 0.24), 0px 8px 60px 0px rgba(37, 42, 49, 0.32)
 83 | $color-text-tag-selected: rgb(239, 242, 245)
 84 | $border-color-button-success-bordered: rgb(40, 161, 56)
 85 | $palette-orange-dark-active: rgb(117, 58, 0)
 86 | $color-text-button-primary-active: rgb(255, 255, 255)
 87 | $color-text-button-link-primary: rgb(0, 169, 145)
 88 | $background-button-facebook: rgb(59, 89, 152)
 89 | $width-breakpoint-large-mobile: 576
 90 | $border-color-button-secondary-bordered-hover: rgb(24, 27, 32)
 91 | $palette-red-light-active: rgb(238, 185, 185)
 92 | $padding-table-compact: 8px 12px
 93 | $color-text-alert-link: rgb(37, 42, 49)
 94 | $color-text-button-google-bordered: rgb(37, 42, 49)
 95 | $padding-left-select-prefix: 48px
 96 | $height-radio-button: 20px
 97 | $margin-bottom-select-suffix: 2px
 98 | $color-icon-primary: rgb(37, 42, 49)
 99 | $palette-cloud-normal-active: rgb(202, 212, 222)
100 | $background-table-shadow-left: "linear-gradient(to left, transparent, rgba(186, 199, 213, 0.23))"
101 | $width-radio-button: 20px
102 | $color-text-button-success-active: rgb(255, 255, 255)
103 | $border-color-checkbox-radio-error: rgb(210, 28, 28)
104 | $color-icon-success: rgb(40, 161, 56)
105 | $background-tag-selected: rgb(37, 42, 49)
106 | $border-color-card: rgb(239, 242, 245)
107 | $color-text-button-critical-active: rgb(255, 255, 255)
108 | $height-icon-small: 16px
109 | $color-text-button-white: rgb(37, 42, 49)
110 | $background-badge-warning: rgb(253, 240, 227)
111 | $color-info-check-box-radio: rgb(95, 115, 140)
112 | $font-weight-table-head: "700"
113 | $palette-blue-light-active: rgb(180, 219, 248)
114 | $border-color-checkbox-radio-active: rgb(37, 42, 49)
115 | $box-shadow-action-active: 0px 1px 4px 0px rgba(37, 42, 49, 0.16), 0px 4px 8px 0px rgba(37, 42, 49, 0.12)
116 | $line-height-heading: "1.2"
117 | $font-weight-heading-display: "700"
118 | $border-color-input-error-hover: rgb(185, 25, 25)
119 | $width-icon-small: 16px
120 | $palette-product-light-active: rgb(192, 232, 228)
121 | $border-color-button-info-bordered-active: rgb(1, 80, 142)
122 | $background-button-primary-active: rgb(0, 143, 123)
123 | $background-tooltip-large-mobile: rgb(0, 90, 163)
124 | $font-size-heading-display-subtitle: 22px
125 | $line-height-text: "1.4"
126 | $background-button-secondary-hover: rgb(220, 227, 233)
127 | $background-button-link-primary: "transparent"
128 | $background-button-white-bordered-hover: rgba(255, 255, 255, 0.2)
129 | $padding-tag-with-icon: 6px 8px 6px 6px
130 | $color-text-button-facebook: rgb(255, 255, 255)
131 | $border-width-input-focus: 2px
132 | $color-text-badge-dark: rgb(255, 255, 255)
133 | $border-color-input-hover: rgb(166, 182, 200)
134 | $padding-tag: 6px 8px
135 | $color-text-badge-warning: rgb(233, 131, 5)
136 | $background-button-white: rgb(255, 255, 255)
137 | $space-x-large: 32px
138 | $z-index-default: "1"
139 | $background-button-success-active: rgb(29, 114, 40)
140 | $box-shadow-fixed: 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 2px 4px 0px rgba(37, 42, 49, 0.12)
141 | $width-checkbox: 20px
142 | $color-text-button-facebook-bordered-hover: rgb(56, 84, 144)
143 | $border-color-button-critical-bordered-hover: rgb(185, 25, 25)
144 | $space-xxx-large: 52px
145 | $font-size-button-normal: 14px
146 | /* use for smaller elements like tags */
147 | $border-radius-small: 2px
148 | $palette-ink-normal-hover: rgb(24, 27, 32)
149 | $font-size-text-small: 12px
150 | $color-text-link-secondary: rgb(37, 42, 49)
151 | $color-icon-info: rgb(1, 114, 203)
152 | $padding-button-normal: 0 16px
153 | $opacity-checkbox-disabled: "0.5"
154 | $height-input-normal: 44px
155 | $height-checkbox: 20px
156 | $border-color-button-primary-bordered-active: rgb(0, 143, 123)
157 | $padding-button-small-with-left-icon: 0 12px 0 8px
158 | $color-text-tag: rgb(37, 42, 49)
159 | $color-text-button-filled-active: rgb(255, 255, 255)
160 | $color-text-button-white-bordered-hover: rgb(255, 255, 255)
161 | $border-width-card: 1px
162 | $padding-alert-with-icon: 12px
163 | $color-text-button-secondary-hover: rgb(24, 27, 32)
164 | $color-alert-icon-warning: rgb(233, 131, 5)
165 | $palette-product-dark: rgb(0, 127, 109)
166 | $padding-button-normal-with-icons: 0 12px
167 | $background-badge-dark: rgb(37, 42, 49)
168 | $palette-ink-light: rgb(95, 115, 140)
169 | $padding-button-small-with-right-icon: 0 8px 0 12px
170 | $modifier-scale-button-active: 0.95
171 | $color-text-button-warning-bordered-active: rgb(205, 115, 4)
172 | $palette-green-darker: rgb(35, 92, 43)
173 | $border-color-button-success-bordered-active: rgb(29, 114, 40)
174 | $font-size-heading-title1: 28px
175 | $palette-blue-dark: rgb(0, 90, 163)
176 | $border-color-button-white-bordered: rgb(255, 255, 255)
177 | $color-text-button-primary-bordered: rgb(0, 169, 145)
178 | $modifier-scale-checkbox-radio-active: 0.95
179 | $color-text-alert-critical: rgb(151, 12, 12)
180 | $padding-alert: 16px
181 | $padding-loading: 12px
182 | $background-button-bordered: "transparent"
183 | $color-text-button-success-bordered: rgb(40, 161, 56)
184 | $palette-orange-normal-hover: rgb(220, 124, 5)
185 | $palette-orange-darker: rgb(128, 63, 0)
186 | $palette-red-dark: rgb(151, 12, 12)
187 | $color-text-button-info-hover: rgb(255, 255, 255)
188 | $text-decoration-text-link-secondary-hover: "none"
189 | $color-text-button-google-bordered-active: rgb(11, 12, 15)
190 | $color-text-button-critical-bordered: rgb(210, 28, 28)
191 | $color-text-input-prefix: rgb(95, 115, 140)
192 | $color-text-warning: rgb(233, 131, 5)
193 | $height-illustration-medium: 200px
194 | $font-size-heading-title2: 22px
195 | $font-weight-bold: "700"
196 | $color-text-button-link-primary-active: rgb(0, 143, 123)
197 | $background-tag: rgb(245, 247, 249)
198 | $background-button-facebook-active: rgb(53, 79, 136)
199 | $color-text-loading: rgb(186, 199, 213)
200 | $height-stopover-arrow: 7px
201 | $border-color-button-google-bordered: rgb(37, 42, 49)
202 | $background-tag-selected-active: rgb(11, 12, 15)
203 | $font-size-input-small: 14px
204 | $color-form-label: rgb(37, 42, 49)
205 | $color-icon-radio-button-disabled: rgb(186, 199, 213)
206 | $color-text-button-white-active: rgb(11, 12, 15)
207 | $width-stopover-arrow: 36px
208 | $palette-orange-light: rgb(253, 240, 227)
209 | $palette-green-normal-hover: rgb(35, 139, 49)
210 | $font-size-heading-title3: 16px
211 | $background-alert-critical: rgb(250, 234, 234)
212 | $width-modal-normal: 740px
213 | $width-breakpoint-medium-mobile: 414
214 | $color-text-button-facebook-active: rgb(255, 255, 255)
215 | $palette-green-light: rgb(235, 244, 236)
216 | $palette-social-facebook: rgb(59, 89, 152)
217 | $margin-badge-icon: 0 4px 0 0
218 | $palette-social-facebook-hover: rgb(56, 84, 144)
219 | $palette-green-light-hover: rgb(215, 234, 217)
220 | $height-button-small: 32px
221 | $margin-button-icon-small: 8px
222 | $height-service-logo-small: 12px
223 | $padding-input-small: 0 12px
224 | /* use only for square */
225 | $border-radius-circle: 50%
226 | $palette-white: rgb(255, 255, 255)
227 | $font-size-heading-title4: 14px
228 | $color-placeholder-input-error: rgb(210, 28, 28)
229 | $color-icon-input: rgb(186, 199, 213)
230 | $background-button-info: rgb(1, 114, 203)
231 | $background-alert-warning: rgb(253, 240, 227)
232 | $color-icon-tertiary: rgb(186, 199, 213)
233 | $background-button-info-hover: rgb(1, 97, 172)
234 | $background-badge-success: rgb(235, 244, 236)
235 | $height-service-logo-medium: 24px
236 | $palette-white-hover: rgb(245, 247, 249)
237 | $font-weight-normal: "400"
238 | $background-button-link-primary-active: rgb(214, 222, 230)
239 | $color-form-label-filled: rgb(95, 115, 140)
240 | $palette-green-normal: rgb(40, 161, 56)
241 | $line-height-text-normal: 20px
242 | $border-color-button-google-bordered-hover: rgb(24, 27, 32)
243 | $font-size-heading-title5: 12px
244 | $background-button-white-active: rgb(229, 234, 239)
245 | $color-text-critical: rgb(210, 28, 28)
246 | $palette-orange-light-hover: rgb(250, 226, 199)
247 | $duration-fast: "0.15s"
248 | $color-text-button-success-bordered-hover: rgb(35, 139, 49)
249 | $background-tag-hover: rgb(229, 234, 239)
250 | $font-size-heading-display: 40px
251 | $color-text-alert-warning: rgb(162, 81, 0)
252 | $text-decoration-text-link-secondary: "underline"
253 | $padding-button-small-with-icons: 0 8px
254 | $color-text-badge-success: rgb(40, 161, 56)
255 | $color-text-button-info: rgb(255, 255, 255)
256 | $padding-button-normal-with-left-icon: 0 16px 0 12px
257 | $margin-top-form-feedback: 2px
258 | $palette-orange-normal: rgb(233, 131, 5)
259 | $border-width-input: 1px
260 | $palette-cloud-dark: rgb(232, 237, 241)
261 | $palette-product-dark-active: rgb(0, 102, 87)
262 | $height-illustration-small: 90px
263 | $color-stopover-arrow: rgb(95, 115, 140)
264 | $height-input-group-separator-normal: 24px
265 | $color-text-button-critical-bordered-hover: rgb(185, 25, 25)
266 | $palette-red-dark-hover: rgb(137, 11, 11)
267 | $background-body: rgb(245, 247, 249)
268 | $background-button-bordered-hover: rgb(245, 247, 249)
269 | $color-text-button-primary-bordered-hover: rgb(0, 152, 130)
270 | $border-color-button-white-bordered-hover: rgb(255, 255, 255)
271 | $palette-blue-dark-hover: rgb(0, 79, 143)
272 | $palette-blue-dark-active: rgb(0, 62, 112)
273 | $color-alert-icon-critical: rgb(210, 28, 28)
274 | $padding-tag-removable-with-icon: 6px
275 | $border-color-button-white-bordered-active: rgb(255, 255, 255)
276 | $color-text-button-primary-bordered-active: rgb(0, 143, 123)
277 | $background-button-bordered-active: rgb(245, 247, 249)
278 | $color-icon-radio-button: rgb(0, 169, 145)
279 | $palette-ink-light-active: rgb(70, 85, 103)
280 | $palette-ink-light-hover: rgb(82, 100, 122)
281 | $color-alert-icon-success: rgb(40, 161, 56)
282 | $palette-ink-normal: rgb(37, 42, 49)
283 | $font-weight-links: "500"
284 | $color-text-primary: rgb(37, 42, 49)
285 | $background-badge-neutral: rgb(245, 247, 249)
286 | $padding-tag-removable: 6px 6px 6px 8px
287 | $color-text-button-secondary: rgb(37, 42, 49)
288 | $color-text-button-white-bordered: rgb(255, 255, 255)
289 | $background-tag-active: rgb(214, 222, 230)
290 | $padding-badge: 0 8px
291 | $color-text-link-secondary-hover: rgb(0, 169, 145)
292 | $color-text-button-success-bordered-active: rgb(29, 114, 40)
293 | $palette-red-dark-active: rgb(109, 9, 9)
294 | $color-text-badge-critical: rgb(210, 28, 28)
295 | $padding-textarea-normal: 12px
296 | $color-text-button-critical-bordered-active: rgb(157, 21, 21)
297 | $padding-button-without-text: "0"
298 | $color-placeholder-input-file-error: rgb(210, 28, 28)
299 | $palette-product-dark-hover: rgb(0, 112, 96)
300 | $background-service-logo: "transparent"
301 | $font-family: "'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif"
302 | $line-height-heading-display-subtitle: 28px
303 | $background-button-white-hover: rgb(245, 247, 249)
304 | $border-color-button-critical-bordered: rgb(210, 28, 28)
305 | $color-text-button-facebook-bordered: rgb(59, 89, 152)
306 | $border-color-button-google-bordered-active: rgb(11, 12, 15)
307 | $line-height-text-large: 22px
308 | $color-text-success: rgb(40, 161, 56)
309 | $border-color-input: rgb(186, 199, 213)
310 | $palette-orange-light-active: rgb(248, 211, 171)
311 | $font-weight-heading-title1: "700"
312 | $color-heading-inverted: rgb(255, 255, 255)
313 | $palette-green-light-active: rgb(195, 223, 199)
314 | $palette-social-facebook-active: rgb(53, 79, 136)
315 | $background-badge-critical: rgb(250, 234, 234)
316 | $background-badge-white: rgb(255, 255, 255)
317 | $background-country-flag: "transparent"
318 | $color-text-button-facebook-hover: rgb(255, 255, 255)
319 | $background-button-white-bordered: "transparent"
320 | $width-modal-large: 1280px
321 | $palette-white-active: rgb(229, 234, 239)
322 | $background-button-secondary: rgb(232, 237, 241)
323 | $background-button-info-active: rgb(1, 80, 142)
324 | $background-button-link-primary-hover: rgb(229, 234, 239)
325 | $width-icon-medium: 24px
326 | $color-text-badge-neutral: rgb(37, 42, 49)
327 | $space-x-small: 8px
328 | $palette-green-normal-active: rgb(29, 114, 40)
329 | $space-xx-large: 40px
330 | $font-weight-heading-title2: "500"
331 | $z-index-modal: "825"
332 | $border-color-tag-focus: rgb(1, 114, 203)
333 | $border-style-card: "solid"
334 | $space-xxx-small: 2px
335 | $duration-slow: "0.4s"
336 | $space-large: 24px
337 | $height-icon-medium: 24px
338 | $border-color-input-error: rgb(210, 28, 28)
339 | $background-carrier-logo: "transparent"
340 | $color-text-button-white-hover: rgb(24, 27, 32)
341 | $background-tooltip: rgb(255, 255, 255)
342 | $background-tag-selected-hover: rgb(24, 27, 32)
343 | $background-alert-success: rgb(235, 244, 236)
344 | $padding-input-file: 0 0 0 6px
345 | $color-text-button-link-primary-hover: rgb(0, 152, 130)
346 | $color-placeholder-input-file: rgb(95, 115, 140)
347 | $font-weight-heading-title3: "500"
348 | $color-text-button-info-active: rgb(255, 255, 255)
349 | $color-text-badge-white: rgb(37, 42, 49)
350 | $border-color-button-secondary-bordered: rgb(37, 42, 49)
351 | $palette-orange-normal-active: rgb(205, 115, 4)
352 | $border-color-modal: rgb(239, 242, 245)
353 | $color-text-button-google-bordered-hover: rgb(24, 27, 32)
354 | $color-text-input-disabled: rgb(186, 199, 213)
355 | $background-button-facebook-hover: rgb(56, 84, 144)
356 | $border-color-checkbox-radio-focus: rgb(1, 114, 203)
357 | $font-size-message: 14px
358 | $font-weight-heading-title4: "500"
359 | $border-color-button-success-bordered-hover: rgb(35, 139, 49)
360 | $width-badge-circled: 24px
361 | $background-separator: rgb(239, 242, 245)
362 | $color-text-button-warning-bordered-hover: rgb(220, 124, 5)
363 | $palette-product-darker: rgb(0, 92, 78)
364 | $border-color-table-head: rgb(186, 199, 213)
365 | $color-text-alert-success: rgb(43, 115, 54)
366 | $padding-button-large-with-right-icon: 0 16px 0 28px
367 | $border-color-table: rgb(239, 242, 245)
368 | $width-breakpoint-large-desktop: 1200
369 | $palette-blue-darker: rgb(0, 70, 128)
370 | $color-text-error: rgb(210, 28, 28)
371 | $font-weight-heading-title5: "700"
372 | $color-text-button-filled-hover: rgb(255, 255, 255)
373 | $border-color-button-primary-bordered-hover: rgb(0, 152, 130)
374 | $background-input-disabled: rgb(239, 242, 245)
375 | $palette-ink-normal-active: rgb(11, 12, 15)
376 | $height-input-large: 52px
377 | $palette-ink-lighter: rgb(186, 199, 213)
378 | $color-icon-secondary: rgb(95, 115, 140)
379 | $padding-button-large: 0 28px
380 | $color-text-button-secondary-active: rgb(11, 12, 15)
381 | $color-text-button-link-secondary: rgb(37, 42, 49)
382 | $color-text-link-primary: rgb(0, 127, 109)
383 | $color-text-button-white-bordered-active: rgb(255, 255, 255)
384 | $color-icon-checkbox-radio-disabled: rgb(186, 199, 213)
385 | $font-size-button-large: 16px
386 | $background-button-google: rgb(245, 247, 249)
387 | $border-color-input-active: rgb(148, 168, 190)
388 | $opacity-button-disabled: "0.3"
389 | $background-button-success-hover: rgb(35, 139, 49)
390 | $border-color-table-cell: rgb(186, 199, 213)
391 | $font-size-form-feedback: 12px
392 | $border-color-button-critical-bordered-active: rgb(157, 21, 21)
393 | $color-text-button-facebook-bordered-active: rgb(53, 79, 136)
394 | $palette-red-darker: rgb(118, 9, 9)
395 | $color-text-white: rgb(255, 255, 255)
396 | $box-shadow-fixed-reverse: 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px -2px 4px 0px rgba(37, 42, 49, 0.12)
397 | $background-table-even: rgb(245, 247, 249)
398 | $background-button-link-secondary: "transparent"
399 | $border-color-button-facebook-bordered: rgb(59, 89, 152)
400 | $background-button-primary-hover: rgb(0, 152, 130)
401 | $color-text-input: rgb(37, 42, 49)
402 | $border-color-button-info-bordered-hover: rgb(1, 97, 172)
403 | $color-text-button-warning: rgb(255, 255, 255)
404 | $color-text-alert-info: rgb(0, 90, 163)
405 | $palette-product-light-hover: rgb(214, 240, 238)
406 | $background-button-white-bordered-active: rgba(255, 255, 255, 0.2)
407 | $background-button-secondary-active: rgb(202, 212, 222)
408 | $color-placeholder-input: rgb(186, 199, 213)
409 | $space-medium: 16px
410 | $color-text-button-info-bordered: rgb(1, 114, 203)
411 | $height-country-flag: "auto"
412 | $height-icon-large: 32px
413 | $box-shadow-button-focus: 0 0 4px 1px rgba(1, 114, 203, 0.3)
414 | $palette-blue-light-hover: rgb(208, 233, 251)
415 | $border-color-checkbox-radio-hover: rgb(95, 115, 140)
416 | $color-text-button-critical-hover: rgb(255, 255, 255)
417 | $z-index-modal-overlay: "800"
418 | $color-icon-critical: rgb(210, 28, 28)
419 | $z-index-on-the-top: "900"
420 | $color-text-button-success-hover: rgb(255, 255, 255)
421 | $color-text-button-google: rgb(37, 42, 49)
422 | $line-height-heading-display: 44px
423 | $duration-normal: "0.3s"
424 | $palette-cloud-normal-hover: rgb(220, 227, 233)
425 | $palette-product-normal: rgb(0, 169, 145)
426 | $border-color-button-secondary-bordered-active: rgb(11, 12, 15)
427 | $palette-cloud-light: rgb(245, 247, 249)
428 | $color-icon-checkbox-radio: rgb(0, 169, 145)
429 | $padding-textarea-small: 8px 12px
430 | $background-table-shadow-right: "linear-gradient(to right, transparent, rgba(186, 199, 213, 0.23))"
431 | $background-button-warning: rgb(233, 131, 5)
432 | $background-table-hover: rgb(239, 242, 245)
433 | $font-weight-medium: "500"
434 | $padding-button-large-with-icons: 0 16px
435 | $width-country-flag: 24px
436 | $palette-red-light-hover: rgb(244, 210, 210)
437 | $background-alert-info: rgb(232, 244, 253)
438 | $palette-blue-normal: rgb(1, 114, 203)
439 | $height-badge: 24px
440 | $width-icon-large: 32px
441 | $background-input: rgb(255, 255, 255)
442 | $color-text-button-primary-hover: rgb(255, 255, 255)
443 | $palette-red-normal: rgb(210, 28, 28)
444 | $palette-orange-dark-hover: rgb(143, 71, 0)
445 | $color-text-button-secondary-bordered: rgb(37, 42, 49)
446 | /* use for big elements like modal and large buttons */
447 | $border-radius-large: 6px
448 | $padding-table: 12px 16px
449 | $background-button-critical-hover: rgb(185, 25, 25)
450 | $width-breakpoint-tablet: 768
451 | $color-text-button-link-secondary-active: rgb(11, 12, 15)
452 | $palette-green-dark: rgb(43, 115, 54)
453 | $background-card: rgb(255, 255, 255)
454 | $height-separator: 1px
455 | $border-color-button-warning-bordered: rgb(233, 131, 5)
456 | $background-illustration: "transparent"
457 | $height-input-group-separator-small: 16px
458 | $text-decoration-text-link-primary: "underline"
459 | $text-decoration-text-link-primary-hover: "none"
460 | $border-color-button-warning-bordered-hover: rgb(220, 124, 5)
461 | $padding-button-large-with-left-icon: 0 28px 0 16px
462 | $color-text-table: rgb(95, 115, 140)
463 | $opacity-radio-button-disabled: "0.5"
464 | $palette-green-dark-hover: rgb(37, 100, 47)
465 | $font-size-text-large: 16px
466 | $palette-ink-lighter-active: rgb(148, 168, 190)
467 | $color-text-info: rgb(1, 114, 203)
468 | $background-button-google-active: rgb(214, 222, 230)
469 | $box-shadow-raised-reverse: 0px -4px 8px 0px rgba(37, 42, 49, 0.16), 0px -8px 24px 0px rgba(37, 42, 49, 0.24)
470 | $font-weight-heading-display-subtitle: "400"
471 | $color-heading: rgb(37, 42, 49)
472 | $background-button-critical: rgb(210, 28, 28)
473 | $background-modal: rgb(255, 255, 255)
474 | $color-text-button-secondary-bordered-hover: rgb(24, 27, 32)
475 | $palette-red-normal-hover: rgb(185, 25, 25)
476 | $palette-orange-dark: rgb(162, 81, 0)
477 | $line-height-text-small: 16px
478 | $margin-button-group: 0 1px 0 0
479 | 


--------------------------------------------------------------------------------
/output/theo-spec.common.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   backgroundButtonLinkSecondaryActive: "rgb(214, 222, 230)",
  3 |   paddingInputNormal: "0 12px",
  4 |   widthModalSmall: "540px",
  5 |   backgroundButtonWarningHover: "rgb(220, 124, 5)",
  6 |   colorTextButtonPrimary: "rgb(255, 255, 255)",
  7 |   borderColorButtonFacebookBorderedActive: "rgb(53, 79, 136)",
  8 |   marginButtonIconNormal: "8px",
  9 |   heightButtonNormal: "44px",
 10 |   colorIconWarning: "rgb(233, 131, 5)",
 11 |   fontSizeFormLabel: "14px",
 12 |   paletteCloudLightHover: "rgb(229, 234, 239)",
 13 |   colorTextButtonWarningActive: "rgb(255, 255, 255)",
 14 |   paletteRedLight: "rgb(250, 234, 234)",
 15 |   lineHeightHeadingTitle1: "36px",
 16 |   backgroundTable: "rgb(255, 255, 255)",
 17 |   colorAlertIconInfo: "rgb(1, 114, 203)",
 18 |   paletteBlueNormalHover: "rgb(1, 97, 172)",
 19 |   colorTextButtonCritical: "rgb(255, 255, 255)",
 20 |   zIndexSticky: "100",
 21 |   borderColorCheckboxRadio: "rgb(186, 199, 213)",
 22 |   paletteBlueLight: "rgb(232, 244, 253)",
 23 |   boxShadowAction: "0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 1px 4px 0px rgba(37, 42, 49, 0.12)",
 24 |   colorTextBadgeInfo: "rgb(1, 114, 203)",
 25 |   colorTextButtonInfoBorderedHover: "rgb(1, 97, 172)",
 26 |   paletteCloudNormal: "rgb(239, 242, 245)",
 27 |   paletteProductNormalHover: "rgb(0, 152, 130)",
 28 |   spaceXxSmall: "4px",
 29 |   colorTextButtonGoogleActive: "rgb(11, 12, 15)",
 30 |   fontSizeInputNormal: "14px",
 31 |   colorTextButtonGoogleHover: "rgb(24, 27, 32)",
 32 |   paletteProductNormalActive: "rgb(0, 143, 123)",
 33 |   lineHeightHeadingTitle2: "28px",
 34 |   colorTextButtonInfoBorderedActive: "rgb(1, 80, 142)",
 35 |   colorTextButtonSuccess: "rgb(255, 255, 255)",
 36 |   spaceSmall: "12px",
 37 |   heightServiceLogoLarge: "48px",
 38 |   backgroundButtonLinkSecondaryHover: "rgb(229, 234, 239)",
 39 |   paletteBlueNormalActive: "rgb(1, 80, 142)",
 40 |   colorTextButtonWarningHover: "rgb(255, 255, 255)",
 41 |   paletteCloudLightActive: "rgb(214, 222, 230)",
 42 |   lineHeightHeadingTitle3: "24px",
 43 |   paletteProductLight: "rgb(236, 248, 247)",
 44 |   heightButtonLarge: "52px",
 45 |   backgroundButtonWarningActive: "rgb(205, 115, 4)",
 46 |   marginButtonIconLarge: "12px",
 47 |   borderColorButtonInfoBordered: "rgb(1, 114, 203)",
 48 |   backgroundButtonPrimary: "rgb(0, 169, 145)",
 49 |   borderColorButtonFacebookBorderedHover: "rgb(56, 84, 144)",
 50 |   backgroundButtonGoogleHover: "rgb(229, 234, 239)",
 51 |   boxShadowRaised: "0px 4px 8px 0px rgba(37, 42, 49, 0.16), 0px 8px 24px 0px rgba(37, 42, 49, 0.24)",
 52 |   backgroundBadgeInfo: "rgb(232, 244, 253)",
 53 |   borderColorTag: "rgb(239, 242, 245)",
 54 |   backgroundButtonSuccess: "rgb(40, 161, 56)",
 55 |   paletteRedNormalActive: "rgb(157, 21, 21)",
 56 |   colorTextButtonSecondaryBorderedActive: "rgb(11, 12, 15)",
 57 |   lineHeightHeadingTitle4: "20px",
 58 |   borderColorInputErrorFocus: "rgb(210, 28, 28)",
 59 |   paddingButtonSmall: "0 12px",
 60 |   colorTextSecondary: "rgb(95, 115, 140)",
 61 |   colorTextLinkPrimaryHover: "rgb(0, 169, 145)",
 62 |   colorTextButtonLinkSecondaryHover: "rgb(24, 27, 32)",
 63 |   fontSizeTextNormal: "14px",
 64 |   paletteGreenDarkActive: "rgb(31, 81, 38)",
 65 |   paletteInkLighterHover: "rgb(166, 182, 200)",
 66 |   borderColorButtonPrimaryBordered: "rgb(0, 169, 145)",
 67 |   borderColorButtonWarningBorderedActive: "rgb(205, 115, 4)",
 68 |   colorTextButtonFilled: "rgb(255, 255, 255)",
 69 |   lineHeightHeadingTitle5: "20px",
 70 |   heightInputSmall: "32px",
 71 |   borderColorInputFocus: "rgb(1, 114, 203)",
 72 |   paddingButtonNormalWithRightIcon: "0 12px 0 16px",
 73 |   backgroundButtonCriticalActive: "rgb(157, 21, 21)",
 74 |   opacityOverlay: "0.8",
 75 |   widthBreakpointDesktop: 992,
 76 |   borderStyleInput: "solid",
 77 |   fontSizeButtonSmall: "12px",
 78 |   /* use for all basic elements like buttons, inputs, content containers */
 79 |   borderRadiusNormal: "3px",
 80 |   borderRadiusBadge: "12px",
 81 |   colorTextButtonWarningBordered: "rgb(233, 131, 5)",
 82 |   boxShadowOverlay: "0px 12px 24px -4px rgba(37, 42, 49, 0.24), 0px 8px 60px 0px rgba(37, 42, 49, 0.32)",
 83 |   colorTextTagSelected: "rgb(239, 242, 245)",
 84 |   borderColorButtonSuccessBordered: "rgb(40, 161, 56)",
 85 |   paletteOrangeDarkActive: "rgb(117, 58, 0)",
 86 |   colorTextButtonPrimaryActive: "rgb(255, 255, 255)",
 87 |   colorTextButtonLinkPrimary: "rgb(0, 169, 145)",
 88 |   backgroundButtonFacebook: "rgb(59, 89, 152)",
 89 |   widthBreakpointLargeMobile: 576,
 90 |   borderColorButtonSecondaryBorderedHover: "rgb(24, 27, 32)",
 91 |   paletteRedLightActive: "rgb(238, 185, 185)",
 92 |   paddingTableCompact: "8px 12px",
 93 |   colorTextAlertLink: "rgb(37, 42, 49)",
 94 |   colorTextButtonGoogleBordered: "rgb(37, 42, 49)",
 95 |   paddingLeftSelectPrefix: "48px",
 96 |   heightRadioButton: "20px",
 97 |   marginBottomSelectSuffix: "2px",
 98 |   colorIconPrimary: "rgb(37, 42, 49)",
 99 |   paletteCloudNormalActive: "rgb(202, 212, 222)",
100 |   backgroundTableShadowLeft: "linear-gradient(to left, transparent, rgba(186, 199, 213, 0.23))",
101 |   widthRadioButton: "20px",
102 |   colorTextButtonSuccessActive: "rgb(255, 255, 255)",
103 |   borderColorCheckboxRadioError: "rgb(210, 28, 28)",
104 |   colorIconSuccess: "rgb(40, 161, 56)",
105 |   backgroundTagSelected: "rgb(37, 42, 49)",
106 |   borderColorCard: "rgb(239, 242, 245)",
107 |   colorTextButtonCriticalActive: "rgb(255, 255, 255)",
108 |   heightIconSmall: "16px",
109 |   colorTextButtonWhite: "rgb(37, 42, 49)",
110 |   backgroundBadgeWarning: "rgb(253, 240, 227)",
111 |   colorInfoCheckBoxRadio: "rgb(95, 115, 140)",
112 |   fontWeightTableHead: "700",
113 |   paletteBlueLightActive: "rgb(180, 219, 248)",
114 |   borderColorCheckboxRadioActive: "rgb(37, 42, 49)",
115 |   boxShadowActionActive: "0px 1px 4px 0px rgba(37, 42, 49, 0.16), 0px 4px 8px 0px rgba(37, 42, 49, 0.12)",
116 |   lineHeightHeading: "1.2",
117 |   fontWeightHeadingDisplay: "700",
118 |   borderColorInputErrorHover: "rgb(185, 25, 25)",
119 |   widthIconSmall: "16px",
120 |   paletteProductLightActive: "rgb(192, 232, 228)",
121 |   borderColorButtonInfoBorderedActive: "rgb(1, 80, 142)",
122 |   backgroundButtonPrimaryActive: "rgb(0, 143, 123)",
123 |   backgroundTooltipLargeMobile: "rgb(0, 90, 163)",
124 |   fontSizeHeadingDisplaySubtitle: "22px",
125 |   lineHeightText: "1.4",
126 |   backgroundButtonSecondaryHover: "rgb(220, 227, 233)",
127 |   backgroundButtonLinkPrimary: "transparent",
128 |   backgroundButtonWhiteBorderedHover: "rgba(255, 255, 255, 0.2)",
129 |   paddingTagWithIcon: "6px 8px 6px 6px",
130 |   colorTextButtonFacebook: "rgb(255, 255, 255)",
131 |   borderWidthInputFocus: "2px",
132 |   colorTextBadgeDark: "rgb(255, 255, 255)",
133 |   borderColorInputHover: "rgb(166, 182, 200)",
134 |   paddingTag: "6px 8px",
135 |   colorTextBadgeWarning: "rgb(233, 131, 5)",
136 |   backgroundButtonWhite: "rgb(255, 255, 255)",
137 |   spaceXLarge: "32px",
138 |   zIndexDefault: "1",
139 |   backgroundButtonSuccessActive: "rgb(29, 114, 40)",
140 |   boxShadowFixed: "0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 2px 4px 0px rgba(37, 42, 49, 0.12)",
141 |   widthCheckbox: "20px",
142 |   colorTextButtonFacebookBorderedHover: "rgb(56, 84, 144)",
143 |   borderColorButtonCriticalBorderedHover: "rgb(185, 25, 25)",
144 |   spaceXxxLarge: "52px",
145 |   fontSizeButtonNormal: "14px",
146 |   /* use for smaller elements like tags */
147 |   borderRadiusSmall: "2px",
148 |   paletteInkNormalHover: "rgb(24, 27, 32)",
149 |   fontSizeTextSmall: "12px",
150 |   colorTextLinkSecondary: "rgb(37, 42, 49)",
151 |   colorIconInfo: "rgb(1, 114, 203)",
152 |   paddingButtonNormal: "0 16px",
153 |   opacityCheckboxDisabled: "0.5",
154 |   heightInputNormal: "44px",
155 |   heightCheckbox: "20px",
156 |   borderColorButtonPrimaryBorderedActive: "rgb(0, 143, 123)",
157 |   paddingButtonSmallWithLeftIcon: "0 12px 0 8px",
158 |   colorTextTag: "rgb(37, 42, 49)",
159 |   colorTextButtonFilledActive: "rgb(255, 255, 255)",
160 |   colorTextButtonWhiteBorderedHover: "rgb(255, 255, 255)",
161 |   borderWidthCard: "1px",
162 |   paddingAlertWithIcon: "12px",
163 |   colorTextButtonSecondaryHover: "rgb(24, 27, 32)",
164 |   colorAlertIconWarning: "rgb(233, 131, 5)",
165 |   paletteProductDark: "rgb(0, 127, 109)",
166 |   paddingButtonNormalWithIcons: "0 12px",
167 |   backgroundBadgeDark: "rgb(37, 42, 49)",
168 |   paletteInkLight: "rgb(95, 115, 140)",
169 |   paddingButtonSmallWithRightIcon: "0 8px 0 12px",
170 |   modifierScaleButtonActive: 0.95,
171 |   colorTextButtonWarningBorderedActive: "rgb(205, 115, 4)",
172 |   paletteGreenDarker: "rgb(35, 92, 43)",
173 |   borderColorButtonSuccessBorderedActive: "rgb(29, 114, 40)",
174 |   fontSizeHeadingTitle1: "28px",
175 |   paletteBlueDark: "rgb(0, 90, 163)",
176 |   borderColorButtonWhiteBordered: "rgb(255, 255, 255)",
177 |   colorTextButtonPrimaryBordered: "rgb(0, 169, 145)",
178 |   modifierScaleCheckboxRadioActive: 0.95,
179 |   colorTextAlertCritical: "rgb(151, 12, 12)",
180 |   paddingAlert: "16px",
181 |   paddingLoading: "12px",
182 |   backgroundButtonBordered: "transparent",
183 |   colorTextButtonSuccessBordered: "rgb(40, 161, 56)",
184 |   paletteOrangeNormalHover: "rgb(220, 124, 5)",
185 |   paletteOrangeDarker: "rgb(128, 63, 0)",
186 |   paletteRedDark: "rgb(151, 12, 12)",
187 |   colorTextButtonInfoHover: "rgb(255, 255, 255)",
188 |   textDecorationTextLinkSecondaryHover: "none",
189 |   colorTextButtonGoogleBorderedActive: "rgb(11, 12, 15)",
190 |   colorTextButtonCriticalBordered: "rgb(210, 28, 28)",
191 |   colorTextInputPrefix: "rgb(95, 115, 140)",
192 |   colorTextWarning: "rgb(233, 131, 5)",
193 |   heightIllustrationMedium: "200px",
194 |   fontSizeHeadingTitle2: "22px",
195 |   fontWeightBold: "700",
196 |   colorTextButtonLinkPrimaryActive: "rgb(0, 143, 123)",
197 |   backgroundTag: "rgb(245, 247, 249)",
198 |   backgroundButtonFacebookActive: "rgb(53, 79, 136)",
199 |   colorTextLoading: "rgb(186, 199, 213)",
200 |   heightStopoverArrow: "7px",
201 |   borderColorButtonGoogleBordered: "rgb(37, 42, 49)",
202 |   backgroundTagSelectedActive: "rgb(11, 12, 15)",
203 |   fontSizeInputSmall: "14px",
204 |   colorFormLabel: "rgb(37, 42, 49)",
205 |   colorIconRadioButtonDisabled: "rgb(186, 199, 213)",
206 |   colorTextButtonWhiteActive: "rgb(11, 12, 15)",
207 |   widthStopoverArrow: "36px",
208 |   paletteOrangeLight: "rgb(253, 240, 227)",
209 |   paletteGreenNormalHover: "rgb(35, 139, 49)",
210 |   fontSizeHeadingTitle3: "16px",
211 |   backgroundAlertCritical: "rgb(250, 234, 234)",
212 |   widthModalNormal: "740px",
213 |   widthBreakpointMediumMobile: 414,
214 |   colorTextButtonFacebookActive: "rgb(255, 255, 255)",
215 |   paletteGreenLight: "rgb(235, 244, 236)",
216 |   paletteSocialFacebook: "rgb(59, 89, 152)",
217 |   marginBadgeIcon: "0 4px 0 0",
218 |   paletteSocialFacebookHover: "rgb(56, 84, 144)",
219 |   paletteGreenLightHover: "rgb(215, 234, 217)",
220 |   heightButtonSmall: "32px",
221 |   marginButtonIconSmall: "8px",
222 |   heightServiceLogoSmall: "12px",
223 |   paddingInputSmall: "0 12px",
224 |   /* use only for square */
225 |   borderRadiusCircle: "50%",
226 |   paletteWhite: "rgb(255, 255, 255)",
227 |   fontSizeHeadingTitle4: "14px",
228 |   colorPlaceholderInputError: "rgb(210, 28, 28)",
229 |   colorIconInput: "rgb(186, 199, 213)",
230 |   backgroundButtonInfo: "rgb(1, 114, 203)",
231 |   backgroundAlertWarning: "rgb(253, 240, 227)",
232 |   colorIconTertiary: "rgb(186, 199, 213)",
233 |   backgroundButtonInfoHover: "rgb(1, 97, 172)",
234 |   backgroundBadgeSuccess: "rgb(235, 244, 236)",
235 |   heightServiceLogoMedium: "24px",
236 |   paletteWhiteHover: "rgb(245, 247, 249)",
237 |   fontWeightNormal: "400",
238 |   backgroundButtonLinkPrimaryActive: "rgb(214, 222, 230)",
239 |   colorFormLabelFilled: "rgb(95, 115, 140)",
240 |   paletteGreenNormal: "rgb(40, 161, 56)",
241 |   lineHeightTextNormal: "20px",
242 |   borderColorButtonGoogleBorderedHover: "rgb(24, 27, 32)",
243 |   fontSizeHeadingTitle5: "12px",
244 |   backgroundButtonWhiteActive: "rgb(229, 234, 239)",
245 |   colorTextCritical: "rgb(210, 28, 28)",
246 |   paletteOrangeLightHover: "rgb(250, 226, 199)",
247 |   durationFast: "0.15s",
248 |   colorTextButtonSuccessBorderedHover: "rgb(35, 139, 49)",
249 |   backgroundTagHover: "rgb(229, 234, 239)",
250 |   fontSizeHeadingDisplay: "40px",
251 |   colorTextAlertWarning: "rgb(162, 81, 0)",
252 |   textDecorationTextLinkSecondary: "underline",
253 |   paddingButtonSmallWithIcons: "0 8px",
254 |   colorTextBadgeSuccess: "rgb(40, 161, 56)",
255 |   colorTextButtonInfo: "rgb(255, 255, 255)",
256 |   paddingButtonNormalWithLeftIcon: "0 16px 0 12px",
257 |   marginTopFormFeedback: "2px",
258 |   paletteOrangeNormal: "rgb(233, 131, 5)",
259 |   borderWidthInput: "1px",
260 |   paletteCloudDark: "rgb(232, 237, 241)",
261 |   paletteProductDarkActive: "rgb(0, 102, 87)",
262 |   heightIllustrationSmall: "90px",
263 |   colorStopoverArrow: "rgb(95, 115, 140)",
264 |   heightInputGroupSeparatorNormal: "24px",
265 |   colorTextButtonCriticalBorderedHover: "rgb(185, 25, 25)",
266 |   paletteRedDarkHover: "rgb(137, 11, 11)",
267 |   backgroundBody: "rgb(245, 247, 249)",
268 |   backgroundButtonBorderedHover: "rgb(245, 247, 249)",
269 |   colorTextButtonPrimaryBorderedHover: "rgb(0, 152, 130)",
270 |   borderColorButtonWhiteBorderedHover: "rgb(255, 255, 255)",
271 |   paletteBlueDarkHover: "rgb(0, 79, 143)",
272 |   paletteBlueDarkActive: "rgb(0, 62, 112)",
273 |   colorAlertIconCritical: "rgb(210, 28, 28)",
274 |   paddingTagRemovableWithIcon: "6px",
275 |   borderColorButtonWhiteBorderedActive: "rgb(255, 255, 255)",
276 |   colorTextButtonPrimaryBorderedActive: "rgb(0, 143, 123)",
277 |   backgroundButtonBorderedActive: "rgb(245, 247, 249)",
278 |   colorIconRadioButton: "rgb(0, 169, 145)",
279 |   paletteInkLightActive: "rgb(70, 85, 103)",
280 |   paletteInkLightHover: "rgb(82, 100, 122)",
281 |   colorAlertIconSuccess: "rgb(40, 161, 56)",
282 |   paletteInkNormal: "rgb(37, 42, 49)",
283 |   fontWeightLinks: "500",
284 |   colorTextPrimary: "rgb(37, 42, 49)",
285 |   backgroundBadgeNeutral: "rgb(245, 247, 249)",
286 |   paddingTagRemovable: "6px 6px 6px 8px",
287 |   colorTextButtonSecondary: "rgb(37, 42, 49)",
288 |   colorTextButtonWhiteBordered: "rgb(255, 255, 255)",
289 |   backgroundTagActive: "rgb(214, 222, 230)",
290 |   paddingBadge: "0 8px",
291 |   colorTextLinkSecondaryHover: "rgb(0, 169, 145)",
292 |   colorTextButtonSuccessBorderedActive: "rgb(29, 114, 40)",
293 |   paletteRedDarkActive: "rgb(109, 9, 9)",
294 |   colorTextBadgeCritical: "rgb(210, 28, 28)",
295 |   paddingTextareaNormal: "12px",
296 |   colorTextButtonCriticalBorderedActive: "rgb(157, 21, 21)",
297 |   paddingButtonWithoutText: "0",
298 |   colorPlaceholderInputFileError: "rgb(210, 28, 28)",
299 |   paletteProductDarkHover: "rgb(0, 112, 96)",
300 |   backgroundServiceLogo: "transparent",
301 |   fontFamily: "'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
302 |   lineHeightHeadingDisplaySubtitle: "28px",
303 |   backgroundButtonWhiteHover: "rgb(245, 247, 249)",
304 |   borderColorButtonCriticalBordered: "rgb(210, 28, 28)",
305 |   colorTextButtonFacebookBordered: "rgb(59, 89, 152)",
306 |   borderColorButtonGoogleBorderedActive: "rgb(11, 12, 15)",
307 |   lineHeightTextLarge: "22px",
308 |   colorTextSuccess: "rgb(40, 161, 56)",
309 |   borderColorInput: "rgb(186, 199, 213)",
310 |   paletteOrangeLightActive: "rgb(248, 211, 171)",
311 |   fontWeightHeadingTitle1: "700",
312 |   colorHeadingInverted: "rgb(255, 255, 255)",
313 |   paletteGreenLightActive: "rgb(195, 223, 199)",
314 |   paletteSocialFacebookActive: "rgb(53, 79, 136)",
315 |   backgroundBadgeCritical: "rgb(250, 234, 234)",
316 |   backgroundBadgeWhite: "rgb(255, 255, 255)",
317 |   backgroundCountryFlag: "transparent",
318 |   colorTextButtonFacebookHover: "rgb(255, 255, 255)",
319 |   backgroundButtonWhiteBordered: "transparent",
320 |   widthModalLarge: "1280px",
321 |   paletteWhiteActive: "rgb(229, 234, 239)",
322 |   backgroundButtonSecondary: "rgb(232, 237, 241)",
323 |   backgroundButtonInfoActive: "rgb(1, 80, 142)",
324 |   backgroundButtonLinkPrimaryHover: "rgb(229, 234, 239)",
325 |   widthIconMedium: "24px",
326 |   colorTextBadgeNeutral: "rgb(37, 42, 49)",
327 |   spaceXSmall: "8px",
328 |   paletteGreenNormalActive: "rgb(29, 114, 40)",
329 |   spaceXxLarge: "40px",
330 |   fontWeightHeadingTitle2: "500",
331 |   zIndexModal: "825",
332 |   borderColorTagFocus: "rgb(1, 114, 203)",
333 |   borderStyleCard: "solid",
334 |   spaceXxxSmall: "2px",
335 |   durationSlow: "0.4s",
336 |   spaceLarge: "24px",
337 |   heightIconMedium: "24px",
338 |   borderColorInputError: "rgb(210, 28, 28)",
339 |   backgroundCarrierLogo: "transparent",
340 |   colorTextButtonWhiteHover: "rgb(24, 27, 32)",
341 |   backgroundTooltip: "rgb(255, 255, 255)",
342 |   backgroundTagSelectedHover: "rgb(24, 27, 32)",
343 |   backgroundAlertSuccess: "rgb(235, 244, 236)",
344 |   paddingInputFile: "0 0 0 6px",
345 |   colorTextButtonLinkPrimaryHover: "rgb(0, 152, 130)",
346 |   colorPlaceholderInputFile: "rgb(95, 115, 140)",
347 |   fontWeightHeadingTitle3: "500",
348 |   colorTextButtonInfoActive: "rgb(255, 255, 255)",
349 |   colorTextBadgeWhite: "rgb(37, 42, 49)",
350 |   borderColorButtonSecondaryBordered: "rgb(37, 42, 49)",
351 |   paletteOrangeNormalActive: "rgb(205, 115, 4)",
352 |   borderColorModal: "rgb(239, 242, 245)",
353 |   colorTextButtonGoogleBorderedHover: "rgb(24, 27, 32)",
354 |   colorTextInputDisabled: "rgb(186, 199, 213)",
355 |   backgroundButtonFacebookHover: "rgb(56, 84, 144)",
356 |   borderColorCheckboxRadioFocus: "rgb(1, 114, 203)",
357 |   fontSizeMessage: "14px",
358 |   fontWeightHeadingTitle4: "500",
359 |   borderColorButtonSuccessBorderedHover: "rgb(35, 139, 49)",
360 |   widthBadgeCircled: "24px",
361 |   backgroundSeparator: "rgb(239, 242, 245)",
362 |   colorTextButtonWarningBorderedHover: "rgb(220, 124, 5)",
363 |   paletteProductDarker: "rgb(0, 92, 78)",
364 |   borderColorTableHead: "rgb(186, 199, 213)",
365 |   colorTextAlertSuccess: "rgb(43, 115, 54)",
366 |   paddingButtonLargeWithRightIcon: "0 16px 0 28px",
367 |   borderColorTable: "rgb(239, 242, 245)",
368 |   widthBreakpointLargeDesktop: 1200,
369 |   paletteBlueDarker: "rgb(0, 70, 128)",
370 |   colorTextError: "rgb(210, 28, 28)",
371 |   fontWeightHeadingTitle5: "700",
372 |   colorTextButtonFilledHover: "rgb(255, 255, 255)",
373 |   borderColorButtonPrimaryBorderedHover: "rgb(0, 152, 130)",
374 |   backgroundInputDisabled: "rgb(239, 242, 245)",
375 |   paletteInkNormalActive: "rgb(11, 12, 15)",
376 |   heightInputLarge: "52px",
377 |   paletteInkLighter: "rgb(186, 199, 213)",
378 |   colorIconSecondary: "rgb(95, 115, 140)",
379 |   paddingButtonLarge: "0 28px",
380 |   colorTextButtonSecondaryActive: "rgb(11, 12, 15)",
381 |   colorTextButtonLinkSecondary: "rgb(37, 42, 49)",
382 |   colorTextLinkPrimary: "rgb(0, 127, 109)",
383 |   colorTextButtonWhiteBorderedActive: "rgb(255, 255, 255)",
384 |   colorIconCheckboxRadioDisabled: "rgb(186, 199, 213)",
385 |   fontSizeButtonLarge: "16px",
386 |   backgroundButtonGoogle: "rgb(245, 247, 249)",
387 |   borderColorInputActive: "rgb(148, 168, 190)",
388 |   opacityButtonDisabled: "0.3",
389 |   backgroundButtonSuccessHover: "rgb(35, 139, 49)",
390 |   borderColorTableCell: "rgb(186, 199, 213)",
391 |   fontSizeFormFeedback: "12px",
392 |   borderColorButtonCriticalBorderedActive: "rgb(157, 21, 21)",
393 |   colorTextButtonFacebookBorderedActive: "rgb(53, 79, 136)",
394 |   paletteRedDarker: "rgb(118, 9, 9)",
395 |   colorTextWhite: "rgb(255, 255, 255)",
396 |   boxShadowFixedReverse: "0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px -2px 4px 0px rgba(37, 42, 49, 0.12)",
397 |   backgroundTableEven: "rgb(245, 247, 249)",
398 |   backgroundButtonLinkSecondary: "transparent",
399 |   borderColorButtonFacebookBordered: "rgb(59, 89, 152)",
400 |   backgroundButtonPrimaryHover: "rgb(0, 152, 130)",
401 |   colorTextInput: "rgb(37, 42, 49)",
402 |   borderColorButtonInfoBorderedHover: "rgb(1, 97, 172)",
403 |   colorTextButtonWarning: "rgb(255, 255, 255)",
404 |   colorTextAlertInfo: "rgb(0, 90, 163)",
405 |   paletteProductLightHover: "rgb(214, 240, 238)",
406 |   backgroundButtonWhiteBorderedActive: "rgba(255, 255, 255, 0.2)",
407 |   backgroundButtonSecondaryActive: "rgb(202, 212, 222)",
408 |   colorPlaceholderInput: "rgb(186, 199, 213)",
409 |   spaceMedium: "16px",
410 |   colorTextButtonInfoBordered: "rgb(1, 114, 203)",
411 |   heightCountryFlag: "auto",
412 |   heightIconLarge: "32px",
413 |   boxShadowButtonFocus: "0 0 4px 1px rgba(1, 114, 203, 0.3)",
414 |   paletteBlueLightHover: "rgb(208, 233, 251)",
415 |   borderColorCheckboxRadioHover: "rgb(95, 115, 140)",
416 |   colorTextButtonCriticalHover: "rgb(255, 255, 255)",
417 |   zIndexModalOverlay: "800",
418 |   colorIconCritical: "rgb(210, 28, 28)",
419 |   zIndexOnTheTop: "900",
420 |   colorTextButtonSuccessHover: "rgb(255, 255, 255)",
421 |   colorTextButtonGoogle: "rgb(37, 42, 49)",
422 |   lineHeightHeadingDisplay: "44px",
423 |   durationNormal: "0.3s",
424 |   paletteCloudNormalHover: "rgb(220, 227, 233)",
425 |   paletteProductNormal: "rgb(0, 169, 145)",
426 |   borderColorButtonSecondaryBorderedActive: "rgb(11, 12, 15)",
427 |   paletteCloudLight: "rgb(245, 247, 249)",
428 |   colorIconCheckboxRadio: "rgb(0, 169, 145)",
429 |   paddingTextareaSmall: "8px 12px",
430 |   backgroundTableShadowRight: "linear-gradient(to right, transparent, rgba(186, 199, 213, 0.23))",
431 |   backgroundButtonWarning: "rgb(233, 131, 5)",
432 |   backgroundTableHover: "rgb(239, 242, 245)",
433 |   fontWeightMedium: "500",
434 |   paddingButtonLargeWithIcons: "0 16px",
435 |   widthCountryFlag: "24px",
436 |   paletteRedLightHover: "rgb(244, 210, 210)",
437 |   backgroundAlertInfo: "rgb(232, 244, 253)",
438 |   paletteBlueNormal: "rgb(1, 114, 203)",
439 |   heightBadge: "24px",
440 |   widthIconLarge: "32px",
441 |   backgroundInput: "rgb(255, 255, 255)",
442 |   colorTextButtonPrimaryHover: "rgb(255, 255, 255)",
443 |   paletteRedNormal: "rgb(210, 28, 28)",
444 |   paletteOrangeDarkHover: "rgb(143, 71, 0)",
445 |   colorTextButtonSecondaryBordered: "rgb(37, 42, 49)",
446 |   /* use for big elements like modal and large buttons */
447 |   borderRadiusLarge: "6px",
448 |   paddingTable: "12px 16px",
449 |   backgroundButtonCriticalHover: "rgb(185, 25, 25)",
450 |   widthBreakpointTablet: 768,
451 |   colorTextButtonLinkSecondaryActive: "rgb(11, 12, 15)",
452 |   paletteGreenDark: "rgb(43, 115, 54)",
453 |   backgroundCard: "rgb(255, 255, 255)",
454 |   heightSeparator: "1px",
455 |   borderColorButtonWarningBordered: "rgb(233, 131, 5)",
456 |   backgroundIllustration: "transparent",
457 |   heightInputGroupSeparatorSmall: "16px",
458 |   textDecorationTextLinkPrimary: "underline",
459 |   textDecorationTextLinkPrimaryHover: "none",
460 |   borderColorButtonWarningBorderedHover: "rgb(220, 124, 5)",
461 |   paddingButtonLargeWithLeftIcon: "0 28px 0 16px",
462 |   colorTextTable: "rgb(95, 115, 140)",
463 |   opacityRadioButtonDisabled: "0.5",
464 |   paletteGreenDarkHover: "rgb(37, 100, 47)",
465 |   fontSizeTextLarge: "16px",
466 |   paletteInkLighterActive: "rgb(148, 168, 190)",
467 |   colorTextInfo: "rgb(1, 114, 203)",
468 |   backgroundButtonGoogleActive: "rgb(214, 222, 230)",
469 |   boxShadowRaisedReverse: "0px -4px 8px 0px rgba(37, 42, 49, 0.16), 0px -8px 24px 0px rgba(37, 42, 49, 0.24)",
470 |   fontWeightHeadingDisplaySubtitle: "400",
471 |   colorHeading: "rgb(37, 42, 49)",
472 |   backgroundButtonCritical: "rgb(210, 28, 28)",
473 |   backgroundModal: "rgb(255, 255, 255)",
474 |   colorTextButtonSecondaryBorderedHover: "rgb(24, 27, 32)",
475 |   paletteRedNormalHover: "rgb(185, 25, 25)",
476 |   paletteOrangeDark: "rgb(162, 81, 0)",
477 |   lineHeightTextSmall: "16px",
478 |   marginButtonGroup: "0 1px 0 0",
479 | };


--------------------------------------------------------------------------------
/output/theo-spec.less:
--------------------------------------------------------------------------------
  1 | 
  2 | @background-button-link-secondary-active: rgb(214, 222, 230);
  3 | @padding-input-normal: 0 12px;
  4 | @width-modal-small: 540px;
  5 | @background-button-warning-hover: rgb(220, 124, 5);
  6 | @color-text-button-primary: rgb(255, 255, 255);
  7 | @border-color-button-facebook-bordered-active: rgb(53, 79, 136);
  8 | @margin-button-icon-normal: 8px;
  9 | @height-button-normal: 44px;
 10 | @color-icon-warning: rgb(233, 131, 5);
 11 | @font-size-form-label: 14px;
 12 | @palette-cloud-light-hover: rgb(229, 234, 239);
 13 | @color-text-button-warning-active: rgb(255, 255, 255);
 14 | @palette-red-light: rgb(250, 234, 234);
 15 | @line-height-heading-title1: 36px;
 16 | @background-table: rgb(255, 255, 255);
 17 | @color-alert-icon-info: rgb(1, 114, 203);
 18 | @palette-blue-normal-hover: rgb(1, 97, 172);
 19 | @color-text-button-critical: rgb(255, 255, 255);
 20 | @z-index-sticky: "100";
 21 | @border-color-checkbox-radio: rgb(186, 199, 213);
 22 | @palette-blue-light: rgb(232, 244, 253);
 23 | @box-shadow-action: 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 1px 4px 0px rgba(37, 42, 49, 0.12);
 24 | @color-text-badge-info: rgb(1, 114, 203);
 25 | @color-text-button-info-bordered-hover: rgb(1, 97, 172);
 26 | @palette-cloud-normal: rgb(239, 242, 245);
 27 | @palette-product-normal-hover: rgb(0, 152, 130);
 28 | @space-xx-small: 4px;
 29 | @color-text-button-google-active: rgb(11, 12, 15);
 30 | @font-size-input-normal: 14px;
 31 | @color-text-button-google-hover: rgb(24, 27, 32);
 32 | @palette-product-normal-active: rgb(0, 143, 123);
 33 | @line-height-heading-title2: 28px;
 34 | @color-text-button-info-bordered-active: rgb(1, 80, 142);
 35 | @color-text-button-success: rgb(255, 255, 255);
 36 | @space-small: 12px;
 37 | @height-service-logo-large: 48px;
 38 | @background-button-link-secondary-hover: rgb(229, 234, 239);
 39 | @palette-blue-normal-active: rgb(1, 80, 142);
 40 | @color-text-button-warning-hover: rgb(255, 255, 255);
 41 | @palette-cloud-light-active: rgb(214, 222, 230);
 42 | @line-height-heading-title3: 24px;
 43 | @palette-product-light: rgb(236, 248, 247);
 44 | @height-button-large: 52px;
 45 | @background-button-warning-active: rgb(205, 115, 4);
 46 | @margin-button-icon-large: 12px;
 47 | @border-color-button-info-bordered: rgb(1, 114, 203);
 48 | @background-button-primary: rgb(0, 169, 145);
 49 | @border-color-button-facebook-bordered-hover: rgb(56, 84, 144);
 50 | @background-button-google-hover: rgb(229, 234, 239);
 51 | @box-shadow-raised: 0px 4px 8px 0px rgba(37, 42, 49, 0.16), 0px 8px 24px 0px rgba(37, 42, 49, 0.24);
 52 | @background-badge-info: rgb(232, 244, 253);
 53 | @border-color-tag: rgb(239, 242, 245);
 54 | @background-button-success: rgb(40, 161, 56);
 55 | @palette-red-normal-active: rgb(157, 21, 21);
 56 | @color-text-button-secondary-bordered-active: rgb(11, 12, 15);
 57 | @line-height-heading-title4: 20px;
 58 | @border-color-input-error-focus: rgb(210, 28, 28);
 59 | @padding-button-small: 0 12px;
 60 | @color-text-secondary: rgb(95, 115, 140);
 61 | @color-text-link-primary-hover: rgb(0, 169, 145);
 62 | @color-text-button-link-secondary-hover: rgb(24, 27, 32);
 63 | @font-size-text-normal: 14px;
 64 | @palette-green-dark-active: rgb(31, 81, 38);
 65 | @palette-ink-lighter-hover: rgb(166, 182, 200);
 66 | @border-color-button-primary-bordered: rgb(0, 169, 145);
 67 | @border-color-button-warning-bordered-active: rgb(205, 115, 4);
 68 | @color-text-button-filled: rgb(255, 255, 255);
 69 | @line-height-heading-title5: 20px;
 70 | @height-input-small: 32px;
 71 | @border-color-input-focus: rgb(1, 114, 203);
 72 | @padding-button-normal-with-right-icon: 0 12px 0 16px;
 73 | @background-button-critical-active: rgb(157, 21, 21);
 74 | @opacity-overlay: "0.8";
 75 | @width-breakpoint-desktop: 992;
 76 | @border-style-input: "solid";
 77 | @font-size-button-small: 12px;
 78 | /* use for all basic elements like buttons, inputs, content containers */
 79 | @border-radius-normal: 3px;
 80 | @border-radius-badge: 12px;
 81 | @color-text-button-warning-bordered: rgb(233, 131, 5);
 82 | @box-shadow-overlay: 0px 12px 24px -4px rgba(37, 42, 49, 0.24), 0px 8px 60px 0px rgba(37, 42, 49, 0.32);
 83 | @color-text-tag-selected: rgb(239, 242, 245);
 84 | @border-color-button-success-bordered: rgb(40, 161, 56);
 85 | @palette-orange-dark-active: rgb(117, 58, 0);
 86 | @color-text-button-primary-active: rgb(255, 255, 255);
 87 | @color-text-button-link-primary: rgb(0, 169, 145);
 88 | @background-button-facebook: rgb(59, 89, 152);
 89 | @width-breakpoint-large-mobile: 576;
 90 | @border-color-button-secondary-bordered-hover: rgb(24, 27, 32);
 91 | @palette-red-light-active: rgb(238, 185, 185);
 92 | @padding-table-compact: 8px 12px;
 93 | @color-text-alert-link: rgb(37, 42, 49);
 94 | @color-text-button-google-bordered: rgb(37, 42, 49);
 95 | @padding-left-select-prefix: 48px;
 96 | @height-radio-button: 20px;
 97 | @margin-bottom-select-suffix: 2px;
 98 | @color-icon-primary: rgb(37, 42, 49);
 99 | @palette-cloud-normal-active: rgb(202, 212, 222);
100 | @background-table-shadow-left: "linear-gradient(to left, transparent, rgba(186, 199, 213, 0.23))";
101 | @width-radio-button: 20px;
102 | @color-text-button-success-active: rgb(255, 255, 255);
103 | @border-color-checkbox-radio-error: rgb(210, 28, 28);
104 | @color-icon-success: rgb(40, 161, 56);
105 | @background-tag-selected: rgb(37, 42, 49);
106 | @border-color-card: rgb(239, 242, 245);
107 | @color-text-button-critical-active: rgb(255, 255, 255);
108 | @height-icon-small: 16px;
109 | @color-text-button-white: rgb(37, 42, 49);
110 | @background-badge-warning: rgb(253, 240, 227);
111 | @color-info-check-box-radio: rgb(95, 115, 140);
112 | @font-weight-table-head: "700";
113 | @palette-blue-light-active: rgb(180, 219, 248);
114 | @border-color-checkbox-radio-active: rgb(37, 42, 49);
115 | @box-shadow-action-active: 0px 1px 4px 0px rgba(37, 42, 49, 0.16), 0px 4px 8px 0px rgba(37, 42, 49, 0.12);
116 | @line-height-heading: "1.2";
117 | @font-weight-heading-display: "700";
118 | @border-color-input-error-hover: rgb(185, 25, 25);
119 | @width-icon-small: 16px;
120 | @palette-product-light-active: rgb(192, 232, 228);
121 | @border-color-button-info-bordered-active: rgb(1, 80, 142);
122 | @background-button-primary-active: rgb(0, 143, 123);
123 | @background-tooltip-large-mobile: rgb(0, 90, 163);
124 | @font-size-heading-display-subtitle: 22px;
125 | @line-height-text: "1.4";
126 | @background-button-secondary-hover: rgb(220, 227, 233);
127 | @background-button-link-primary: "transparent";
128 | @background-button-white-bordered-hover: rgba(255, 255, 255, 0.2);
129 | @padding-tag-with-icon: 6px 8px 6px 6px;
130 | @color-text-button-facebook: rgb(255, 255, 255);
131 | @border-width-input-focus: 2px;
132 | @color-text-badge-dark: rgb(255, 255, 255);
133 | @border-color-input-hover: rgb(166, 182, 200);
134 | @padding-tag: 6px 8px;
135 | @color-text-badge-warning: rgb(233, 131, 5);
136 | @background-button-white: rgb(255, 255, 255);
137 | @space-x-large: 32px;
138 | @z-index-default: "1";
139 | @background-button-success-active: rgb(29, 114, 40);
140 | @box-shadow-fixed: 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 2px 4px 0px rgba(37, 42, 49, 0.12);
141 | @width-checkbox: 20px;
142 | @color-text-button-facebook-bordered-hover: rgb(56, 84, 144);
143 | @border-color-button-critical-bordered-hover: rgb(185, 25, 25);
144 | @space-xxx-large: 52px;
145 | @font-size-button-normal: 14px;
146 | /* use for smaller elements like tags */
147 | @border-radius-small: 2px;
148 | @palette-ink-normal-hover: rgb(24, 27, 32);
149 | @font-size-text-small: 12px;
150 | @color-text-link-secondary: rgb(37, 42, 49);
151 | @color-icon-info: rgb(1, 114, 203);
152 | @padding-button-normal: 0 16px;
153 | @opacity-checkbox-disabled: "0.5";
154 | @height-input-normal: 44px;
155 | @height-checkbox: 20px;
156 | @border-color-button-primary-bordered-active: rgb(0, 143, 123);
157 | @padding-button-small-with-left-icon: 0 12px 0 8px;
158 | @color-text-tag: rgb(37, 42, 49);
159 | @color-text-button-filled-active: rgb(255, 255, 255);
160 | @color-text-button-white-bordered-hover: rgb(255, 255, 255);
161 | @border-width-card: 1px;
162 | @padding-alert-with-icon: 12px;
163 | @color-text-button-secondary-hover: rgb(24, 27, 32);
164 | @color-alert-icon-warning: rgb(233, 131, 5);
165 | @palette-product-dark: rgb(0, 127, 109);
166 | @padding-button-normal-with-icons: 0 12px;
167 | @background-badge-dark: rgb(37, 42, 49);
168 | @palette-ink-light: rgb(95, 115, 140);
169 | @padding-button-small-with-right-icon: 0 8px 0 12px;
170 | @modifier-scale-button-active: 0.95;
171 | @color-text-button-warning-bordered-active: rgb(205, 115, 4);
172 | @palette-green-darker: rgb(35, 92, 43);
173 | @border-color-button-success-bordered-active: rgb(29, 114, 40);
174 | @font-size-heading-title1: 28px;
175 | @palette-blue-dark: rgb(0, 90, 163);
176 | @border-color-button-white-bordered: rgb(255, 255, 255);
177 | @color-text-button-primary-bordered: rgb(0, 169, 145);
178 | @modifier-scale-checkbox-radio-active: 0.95;
179 | @color-text-alert-critical: rgb(151, 12, 12);
180 | @padding-alert: 16px;
181 | @padding-loading: 12px;
182 | @background-button-bordered: "transparent";
183 | @color-text-button-success-bordered: rgb(40, 161, 56);
184 | @palette-orange-normal-hover: rgb(220, 124, 5);
185 | @palette-orange-darker: rgb(128, 63, 0);
186 | @palette-red-dark: rgb(151, 12, 12);
187 | @color-text-button-info-hover: rgb(255, 255, 255);
188 | @text-decoration-text-link-secondary-hover: "none";
189 | @color-text-button-google-bordered-active: rgb(11, 12, 15);
190 | @color-text-button-critical-bordered: rgb(210, 28, 28);
191 | @color-text-input-prefix: rgb(95, 115, 140);
192 | @color-text-warning: rgb(233, 131, 5);
193 | @height-illustration-medium: 200px;
194 | @font-size-heading-title2: 22px;
195 | @font-weight-bold: "700";
196 | @color-text-button-link-primary-active: rgb(0, 143, 123);
197 | @background-tag: rgb(245, 247, 249);
198 | @background-button-facebook-active: rgb(53, 79, 136);
199 | @color-text-loading: rgb(186, 199, 213);
200 | @height-stopover-arrow: 7px;
201 | @border-color-button-google-bordered: rgb(37, 42, 49);
202 | @background-tag-selected-active: rgb(11, 12, 15);
203 | @font-size-input-small: 14px;
204 | @color-form-label: rgb(37, 42, 49);
205 | @color-icon-radio-button-disabled: rgb(186, 199, 213);
206 | @color-text-button-white-active: rgb(11, 12, 15);
207 | @width-stopover-arrow: 36px;
208 | @palette-orange-light: rgb(253, 240, 227);
209 | @palette-green-normal-hover: rgb(35, 139, 49);
210 | @font-size-heading-title3: 16px;
211 | @background-alert-critical: rgb(250, 234, 234);
212 | @width-modal-normal: 740px;
213 | @width-breakpoint-medium-mobile: 414;
214 | @color-text-button-facebook-active: rgb(255, 255, 255);
215 | @palette-green-light: rgb(235, 244, 236);
216 | @palette-social-facebook: rgb(59, 89, 152);
217 | @margin-badge-icon: 0 4px 0 0;
218 | @palette-social-facebook-hover: rgb(56, 84, 144);
219 | @palette-green-light-hover: rgb(215, 234, 217);
220 | @height-button-small: 32px;
221 | @margin-button-icon-small: 8px;
222 | @height-service-logo-small: 12px;
223 | @padding-input-small: 0 12px;
224 | /* use only for square */
225 | @border-radius-circle: 50%;
226 | @palette-white: rgb(255, 255, 255);
227 | @font-size-heading-title4: 14px;
228 | @color-placeholder-input-error: rgb(210, 28, 28);
229 | @color-icon-input: rgb(186, 199, 213);
230 | @background-button-info: rgb(1, 114, 203);
231 | @background-alert-warning: rgb(253, 240, 227);
232 | @color-icon-tertiary: rgb(186, 199, 213);
233 | @background-button-info-hover: rgb(1, 97, 172);
234 | @background-badge-success: rgb(235, 244, 236);
235 | @height-service-logo-medium: 24px;
236 | @palette-white-hover: rgb(245, 247, 249);
237 | @font-weight-normal: "400";
238 | @background-button-link-primary-active: rgb(214, 222, 230);
239 | @color-form-label-filled: rgb(95, 115, 140);
240 | @palette-green-normal: rgb(40, 161, 56);
241 | @line-height-text-normal: 20px;
242 | @border-color-button-google-bordered-hover: rgb(24, 27, 32);
243 | @font-size-heading-title5: 12px;
244 | @background-button-white-active: rgb(229, 234, 239);
245 | @color-text-critical: rgb(210, 28, 28);
246 | @palette-orange-light-hover: rgb(250, 226, 199);
247 | @duration-fast: "0.15s";
248 | @color-text-button-success-bordered-hover: rgb(35, 139, 49);
249 | @background-tag-hover: rgb(229, 234, 239);
250 | @font-size-heading-display: 40px;
251 | @color-text-alert-warning: rgb(162, 81, 0);
252 | @text-decoration-text-link-secondary: "underline";
253 | @padding-button-small-with-icons: 0 8px;
254 | @color-text-badge-success: rgb(40, 161, 56);
255 | @color-text-button-info: rgb(255, 255, 255);
256 | @padding-button-normal-with-left-icon: 0 16px 0 12px;
257 | @margin-top-form-feedback: 2px;
258 | @palette-orange-normal: rgb(233, 131, 5);
259 | @border-width-input: 1px;
260 | @palette-cloud-dark: rgb(232, 237, 241);
261 | @palette-product-dark-active: rgb(0, 102, 87);
262 | @height-illustration-small: 90px;
263 | @color-stopover-arrow: rgb(95, 115, 140);
264 | @height-input-group-separator-normal: 24px;
265 | @color-text-button-critical-bordered-hover: rgb(185, 25, 25);
266 | @palette-red-dark-hover: rgb(137, 11, 11);
267 | @background-body: rgb(245, 247, 249);
268 | @background-button-bordered-hover: rgb(245, 247, 249);
269 | @color-text-button-primary-bordered-hover: rgb(0, 152, 130);
270 | @border-color-button-white-bordered-hover: rgb(255, 255, 255);
271 | @palette-blue-dark-hover: rgb(0, 79, 143);
272 | @palette-blue-dark-active: rgb(0, 62, 112);
273 | @color-alert-icon-critical: rgb(210, 28, 28);
274 | @padding-tag-removable-with-icon: 6px;
275 | @border-color-button-white-bordered-active: rgb(255, 255, 255);
276 | @color-text-button-primary-bordered-active: rgb(0, 143, 123);
277 | @background-button-bordered-active: rgb(245, 247, 249);
278 | @color-icon-radio-button: rgb(0, 169, 145);
279 | @palette-ink-light-active: rgb(70, 85, 103);
280 | @palette-ink-light-hover: rgb(82, 100, 122);
281 | @color-alert-icon-success: rgb(40, 161, 56);
282 | @palette-ink-normal: rgb(37, 42, 49);
283 | @font-weight-links: "500";
284 | @color-text-primary: rgb(37, 42, 49);
285 | @background-badge-neutral: rgb(245, 247, 249);
286 | @padding-tag-removable: 6px 6px 6px 8px;
287 | @color-text-button-secondary: rgb(37, 42, 49);
288 | @color-text-button-white-bordered: rgb(255, 255, 255);
289 | @background-tag-active: rgb(214, 222, 230);
290 | @padding-badge: 0 8px;
291 | @color-text-link-secondary-hover: rgb(0, 169, 145);
292 | @color-text-button-success-bordered-active: rgb(29, 114, 40);
293 | @palette-red-dark-active: rgb(109, 9, 9);
294 | @color-text-badge-critical: rgb(210, 28, 28);
295 | @padding-textarea-normal: 12px;
296 | @color-text-button-critical-bordered-active: rgb(157, 21, 21);
297 | @padding-button-without-text: "0";
298 | @color-placeholder-input-file-error: rgb(210, 28, 28);
299 | @palette-product-dark-hover: rgb(0, 112, 96);
300 | @background-service-logo: "transparent";
301 | @font-family: "'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif";
302 | @line-height-heading-display-subtitle: 28px;
303 | @background-button-white-hover: rgb(245, 247, 249);
304 | @border-color-button-critical-bordered: rgb(210, 28, 28);
305 | @color-text-button-facebook-bordered: rgb(59, 89, 152);
306 | @border-color-button-google-bordered-active: rgb(11, 12, 15);
307 | @line-height-text-large: 22px;
308 | @color-text-success: rgb(40, 161, 56);
309 | @border-color-input: rgb(186, 199, 213);
310 | @palette-orange-light-active: rgb(248, 211, 171);
311 | @font-weight-heading-title1: "700";
312 | @color-heading-inverted: rgb(255, 255, 255);
313 | @palette-green-light-active: rgb(195, 223, 199);
314 | @palette-social-facebook-active: rgb(53, 79, 136);
315 | @background-badge-critical: rgb(250, 234, 234);
316 | @background-badge-white: rgb(255, 255, 255);
317 | @background-country-flag: "transparent";
318 | @color-text-button-facebook-hover: rgb(255, 255, 255);
319 | @background-button-white-bordered: "transparent";
320 | @width-modal-large: 1280px;
321 | @palette-white-active: rgb(229, 234, 239);
322 | @background-button-secondary: rgb(232, 237, 241);
323 | @background-button-info-active: rgb(1, 80, 142);
324 | @background-button-link-primary-hover: rgb(229, 234, 239);
325 | @width-icon-medium: 24px;
326 | @color-text-badge-neutral: rgb(37, 42, 49);
327 | @space-x-small: 8px;
328 | @palette-green-normal-active: rgb(29, 114, 40);
329 | @space-xx-large: 40px;
330 | @font-weight-heading-title2: "500";
331 | @z-index-modal: "825";
332 | @border-color-tag-focus: rgb(1, 114, 203);
333 | @border-style-card: "solid";
334 | @space-xxx-small: 2px;
335 | @duration-slow: "0.4s";
336 | @space-large: 24px;
337 | @height-icon-medium: 24px;
338 | @border-color-input-error: rgb(210, 28, 28);
339 | @background-carrier-logo: "transparent";
340 | @color-text-button-white-hover: rgb(24, 27, 32);
341 | @background-tooltip: rgb(255, 255, 255);
342 | @background-tag-selected-hover: rgb(24, 27, 32);
343 | @background-alert-success: rgb(235, 244, 236);
344 | @padding-input-file: 0 0 0 6px;
345 | @color-text-button-link-primary-hover: rgb(0, 152, 130);
346 | @color-placeholder-input-file: rgb(95, 115, 140);
347 | @font-weight-heading-title3: "500";
348 | @color-text-button-info-active: rgb(255, 255, 255);
349 | @color-text-badge-white: rgb(37, 42, 49);
350 | @border-color-button-secondary-bordered: rgb(37, 42, 49);
351 | @palette-orange-normal-active: rgb(205, 115, 4);
352 | @border-color-modal: rgb(239, 242, 245);
353 | @color-text-button-google-bordered-hover: rgb(24, 27, 32);
354 | @color-text-input-disabled: rgb(186, 199, 213);
355 | @background-button-facebook-hover: rgb(56, 84, 144);
356 | @border-color-checkbox-radio-focus: rgb(1, 114, 203);
357 | @font-size-message: 14px;
358 | @font-weight-heading-title4: "500";
359 | @border-color-button-success-bordered-hover: rgb(35, 139, 49);
360 | @width-badge-circled: 24px;
361 | @background-separator: rgb(239, 242, 245);
362 | @color-text-button-warning-bordered-hover: rgb(220, 124, 5);
363 | @palette-product-darker: rgb(0, 92, 78);
364 | @border-color-table-head: rgb(186, 199, 213);
365 | @color-text-alert-success: rgb(43, 115, 54);
366 | @padding-button-large-with-right-icon: 0 16px 0 28px;
367 | @border-color-table: rgb(239, 242, 245);
368 | @width-breakpoint-large-desktop: 1200;
369 | @palette-blue-darker: rgb(0, 70, 128);
370 | @color-text-error: rgb(210, 28, 28);
371 | @font-weight-heading-title5: "700";
372 | @color-text-button-filled-hover: rgb(255, 255, 255);
373 | @border-color-button-primary-bordered-hover: rgb(0, 152, 130);
374 | @background-input-disabled: rgb(239, 242, 245);
375 | @palette-ink-normal-active: rgb(11, 12, 15);
376 | @height-input-large: 52px;
377 | @palette-ink-lighter: rgb(186, 199, 213);
378 | @color-icon-secondary: rgb(95, 115, 140);
379 | @padding-button-large: 0 28px;
380 | @color-text-button-secondary-active: rgb(11, 12, 15);
381 | @color-text-button-link-secondary: rgb(37, 42, 49);
382 | @color-text-link-primary: rgb(0, 127, 109);
383 | @color-text-button-white-bordered-active: rgb(255, 255, 255);
384 | @color-icon-checkbox-radio-disabled: rgb(186, 199, 213);
385 | @font-size-button-large: 16px;
386 | @background-button-google: rgb(245, 247, 249);
387 | @border-color-input-active: rgb(148, 168, 190);
388 | @opacity-button-disabled: "0.3";
389 | @background-button-success-hover: rgb(35, 139, 49);
390 | @border-color-table-cell: rgb(186, 199, 213);
391 | @font-size-form-feedback: 12px;
392 | @border-color-button-critical-bordered-active: rgb(157, 21, 21);
393 | @color-text-button-facebook-bordered-active: rgb(53, 79, 136);
394 | @palette-red-darker: rgb(118, 9, 9);
395 | @color-text-white: rgb(255, 255, 255);
396 | @box-shadow-fixed-reverse: 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px -2px 4px 0px rgba(37, 42, 49, 0.12);
397 | @background-table-even: rgb(245, 247, 249);
398 | @background-button-link-secondary: "transparent";
399 | @border-color-button-facebook-bordered: rgb(59, 89, 152);
400 | @background-button-primary-hover: rgb(0, 152, 130);
401 | @color-text-input: rgb(37, 42, 49);
402 | @border-color-button-info-bordered-hover: rgb(1, 97, 172);
403 | @color-text-button-warning: rgb(255, 255, 255);
404 | @color-text-alert-info: rgb(0, 90, 163);
405 | @palette-product-light-hover: rgb(214, 240, 238);
406 | @background-button-white-bordered-active: rgba(255, 255, 255, 0.2);
407 | @background-button-secondary-active: rgb(202, 212, 222);
408 | @color-placeholder-input: rgb(186, 199, 213);
409 | @space-medium: 16px;
410 | @color-text-button-info-bordered: rgb(1, 114, 203);
411 | @height-country-flag: "auto";
412 | @height-icon-large: 32px;
413 | @box-shadow-button-focus: 0 0 4px 1px rgba(1, 114, 203, 0.3);
414 | @palette-blue-light-hover: rgb(208, 233, 251);
415 | @border-color-checkbox-radio-hover: rgb(95, 115, 140);
416 | @color-text-button-critical-hover: rgb(255, 255, 255);
417 | @z-index-modal-overlay: "800";
418 | @color-icon-critical: rgb(210, 28, 28);
419 | @z-index-on-the-top: "900";
420 | @color-text-button-success-hover: rgb(255, 255, 255);
421 | @color-text-button-google: rgb(37, 42, 49);
422 | @line-height-heading-display: 44px;
423 | @duration-normal: "0.3s";
424 | @palette-cloud-normal-hover: rgb(220, 227, 233);
425 | @palette-product-normal: rgb(0, 169, 145);
426 | @border-color-button-secondary-bordered-active: rgb(11, 12, 15);
427 | @palette-cloud-light: rgb(245, 247, 249);
428 | @color-icon-checkbox-radio: rgb(0, 169, 145);
429 | @padding-textarea-small: 8px 12px;
430 | @background-table-shadow-right: "linear-gradient(to right, transparent, rgba(186, 199, 213, 0.23))";
431 | @background-button-warning: rgb(233, 131, 5);
432 | @background-table-hover: rgb(239, 242, 245);
433 | @font-weight-medium: "500";
434 | @padding-button-large-with-icons: 0 16px;
435 | @width-country-flag: 24px;
436 | @palette-red-light-hover: rgb(244, 210, 210);
437 | @background-alert-info: rgb(232, 244, 253);
438 | @palette-blue-normal: rgb(1, 114, 203);
439 | @height-badge: 24px;
440 | @width-icon-large: 32px;
441 | @background-input: rgb(255, 255, 255);
442 | @color-text-button-primary-hover: rgb(255, 255, 255);
443 | @palette-red-normal: rgb(210, 28, 28);
444 | @palette-orange-dark-hover: rgb(143, 71, 0);
445 | @color-text-button-secondary-bordered: rgb(37, 42, 49);
446 | /* use for big elements like modal and large buttons */
447 | @border-radius-large: 6px;
448 | @padding-table: 12px 16px;
449 | @background-button-critical-hover: rgb(185, 25, 25);
450 | @width-breakpoint-tablet: 768;
451 | @color-text-button-link-secondary-active: rgb(11, 12, 15);
452 | @palette-green-dark: rgb(43, 115, 54);
453 | @background-card: rgb(255, 255, 255);
454 | @height-separator: 1px;
455 | @border-color-button-warning-bordered: rgb(233, 131, 5);
456 | @background-illustration: "transparent";
457 | @height-input-group-separator-small: 16px;
458 | @text-decoration-text-link-primary: "underline";
459 | @text-decoration-text-link-primary-hover: "none";
460 | @border-color-button-warning-bordered-hover: rgb(220, 124, 5);
461 | @padding-button-large-with-left-icon: 0 28px 0 16px;
462 | @color-text-table: rgb(95, 115, 140);
463 | @opacity-radio-button-disabled: "0.5";
464 | @palette-green-dark-hover: rgb(37, 100, 47);
465 | @font-size-text-large: 16px;
466 | @palette-ink-lighter-active: rgb(148, 168, 190);
467 | @color-text-info: rgb(1, 114, 203);
468 | @background-button-google-active: rgb(214, 222, 230);
469 | @box-shadow-raised-reverse: 0px -4px 8px 0px rgba(37, 42, 49, 0.16), 0px -8px 24px 0px rgba(37, 42, 49, 0.24);
470 | @font-weight-heading-display-subtitle: "400";
471 | @color-heading: rgb(37, 42, 49);
472 | @background-button-critical: rgb(210, 28, 28);
473 | @background-modal: rgb(255, 255, 255);
474 | @color-text-button-secondary-bordered-hover: rgb(24, 27, 32);
475 | @palette-red-normal-hover: rgb(185, 25, 25);
476 | @palette-orange-dark: rgb(162, 81, 0);
477 | @line-height-text-small: 16px;
478 | @margin-button-group: 0 1px 0 0;
479 | 


--------------------------------------------------------------------------------
/output/theo-spec.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | $background-button-link-secondary-active: rgb(214, 222, 230);
  3 | $padding-input-normal: 0 12px;
  4 | $width-modal-small: 540px;
  5 | $background-button-warning-hover: rgb(220, 124, 5);
  6 | $color-text-button-primary: rgb(255, 255, 255);
  7 | $border-color-button-facebook-bordered-active: rgb(53, 79, 136);
  8 | $margin-button-icon-normal: 8px;
  9 | $height-button-normal: 44px;
 10 | $color-icon-warning: rgb(233, 131, 5);
 11 | $font-size-form-label: 14px;
 12 | $palette-cloud-light-hover: rgb(229, 234, 239);
 13 | $color-text-button-warning-active: rgb(255, 255, 255);
 14 | $palette-red-light: rgb(250, 234, 234);
 15 | $line-height-heading-title1: 36px;
 16 | $background-table: rgb(255, 255, 255);
 17 | $color-alert-icon-info: rgb(1, 114, 203);
 18 | $palette-blue-normal-hover: rgb(1, 97, 172);
 19 | $color-text-button-critical: rgb(255, 255, 255);
 20 | $z-index-sticky: "100";
 21 | $border-color-checkbox-radio: rgb(186, 199, 213);
 22 | $palette-blue-light: rgb(232, 244, 253);
 23 | $box-shadow-action: 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 1px 4px 0px rgba(37, 42, 49, 0.12);
 24 | $color-text-badge-info: rgb(1, 114, 203);
 25 | $color-text-button-info-bordered-hover: rgb(1, 97, 172);
 26 | $palette-cloud-normal: rgb(239, 242, 245);
 27 | $palette-product-normal-hover: rgb(0, 152, 130);
 28 | $space-xx-small: 4px;
 29 | $color-text-button-google-active: rgb(11, 12, 15);
 30 | $font-size-input-normal: 14px;
 31 | $color-text-button-google-hover: rgb(24, 27, 32);
 32 | $palette-product-normal-active: rgb(0, 143, 123);
 33 | $line-height-heading-title2: 28px;
 34 | $color-text-button-info-bordered-active: rgb(1, 80, 142);
 35 | $color-text-button-success: rgb(255, 255, 255);
 36 | $space-small: 12px;
 37 | $height-service-logo-large: 48px;
 38 | $background-button-link-secondary-hover: rgb(229, 234, 239);
 39 | $palette-blue-normal-active: rgb(1, 80, 142);
 40 | $color-text-button-warning-hover: rgb(255, 255, 255);
 41 | $palette-cloud-light-active: rgb(214, 222, 230);
 42 | $line-height-heading-title3: 24px;
 43 | $palette-product-light: rgb(236, 248, 247);
 44 | $height-button-large: 52px;
 45 | $background-button-warning-active: rgb(205, 115, 4);
 46 | $margin-button-icon-large: 12px;
 47 | $border-color-button-info-bordered: rgb(1, 114, 203);
 48 | $background-button-primary: rgb(0, 169, 145);
 49 | $border-color-button-facebook-bordered-hover: rgb(56, 84, 144);
 50 | $background-button-google-hover: rgb(229, 234, 239);
 51 | $box-shadow-raised: 0px 4px 8px 0px rgba(37, 42, 49, 0.16), 0px 8px 24px 0px rgba(37, 42, 49, 0.24);
 52 | $background-badge-info: rgb(232, 244, 253);
 53 | $border-color-tag: rgb(239, 242, 245);
 54 | $background-button-success: rgb(40, 161, 56);
 55 | $palette-red-normal-active: rgb(157, 21, 21);
 56 | $color-text-button-secondary-bordered-active: rgb(11, 12, 15);
 57 | $line-height-heading-title4: 20px;
 58 | $border-color-input-error-focus: rgb(210, 28, 28);
 59 | $padding-button-small: 0 12px;
 60 | $color-text-secondary: rgb(95, 115, 140);
 61 | $color-text-link-primary-hover: rgb(0, 169, 145);
 62 | $color-text-button-link-secondary-hover: rgb(24, 27, 32);
 63 | $font-size-text-normal: 14px;
 64 | $palette-green-dark-active: rgb(31, 81, 38);
 65 | $palette-ink-lighter-hover: rgb(166, 182, 200);
 66 | $border-color-button-primary-bordered: rgb(0, 169, 145);
 67 | $border-color-button-warning-bordered-active: rgb(205, 115, 4);
 68 | $color-text-button-filled: rgb(255, 255, 255);
 69 | $line-height-heading-title5: 20px;
 70 | $height-input-small: 32px;
 71 | $border-color-input-focus: rgb(1, 114, 203);
 72 | $padding-button-normal-with-right-icon: 0 12px 0 16px;
 73 | $background-button-critical-active: rgb(157, 21, 21);
 74 | $opacity-overlay: "0.8";
 75 | $width-breakpoint-desktop: 992;
 76 | $border-style-input: "solid";
 77 | $font-size-button-small: 12px;
 78 | /* use for all basic elements like buttons, inputs, content containers */
 79 | $border-radius-normal: 3px;
 80 | $border-radius-badge: 12px;
 81 | $color-text-button-warning-bordered: rgb(233, 131, 5);
 82 | $box-shadow-overlay: 0px 12px 24px -4px rgba(37, 42, 49, 0.24), 0px 8px 60px 0px rgba(37, 42, 49, 0.32);
 83 | $color-text-tag-selected: rgb(239, 242, 245);
 84 | $border-color-button-success-bordered: rgb(40, 161, 56);
 85 | $palette-orange-dark-active: rgb(117, 58, 0);
 86 | $color-text-button-primary-active: rgb(255, 255, 255);
 87 | $color-text-button-link-primary: rgb(0, 169, 145);
 88 | $background-button-facebook: rgb(59, 89, 152);
 89 | $width-breakpoint-large-mobile: 576;
 90 | $border-color-button-secondary-bordered-hover: rgb(24, 27, 32);
 91 | $palette-red-light-active: rgb(238, 185, 185);
 92 | $padding-table-compact: 8px 12px;
 93 | $color-text-alert-link: rgb(37, 42, 49);
 94 | $color-text-button-google-bordered: rgb(37, 42, 49);
 95 | $padding-left-select-prefix: 48px;
 96 | $height-radio-button: 20px;
 97 | $margin-bottom-select-suffix: 2px;
 98 | $color-icon-primary: rgb(37, 42, 49);
 99 | $palette-cloud-normal-active: rgb(202, 212, 222);
100 | $background-table-shadow-left: "linear-gradient(to left, transparent, rgba(186, 199, 213, 0.23))";
101 | $width-radio-button: 20px;
102 | $color-text-button-success-active: rgb(255, 255, 255);
103 | $border-color-checkbox-radio-error: rgb(210, 28, 28);
104 | $color-icon-success: rgb(40, 161, 56);
105 | $background-tag-selected: rgb(37, 42, 49);
106 | $border-color-card: rgb(239, 242, 245);
107 | $color-text-button-critical-active: rgb(255, 255, 255);
108 | $height-icon-small: 16px;
109 | $color-text-button-white: rgb(37, 42, 49);
110 | $background-badge-warning: rgb(253, 240, 227);
111 | $color-info-check-box-radio: rgb(95, 115, 140);
112 | $font-weight-table-head: "700";
113 | $palette-blue-light-active: rgb(180, 219, 248);
114 | $border-color-checkbox-radio-active: rgb(37, 42, 49);
115 | $box-shadow-action-active: 0px 1px 4px 0px rgba(37, 42, 49, 0.16), 0px 4px 8px 0px rgba(37, 42, 49, 0.12);
116 | $line-height-heading: "1.2";
117 | $font-weight-heading-display: "700";
118 | $border-color-input-error-hover: rgb(185, 25, 25);
119 | $width-icon-small: 16px;
120 | $palette-product-light-active: rgb(192, 232, 228);
121 | $border-color-button-info-bordered-active: rgb(1, 80, 142);
122 | $background-button-primary-active: rgb(0, 143, 123);
123 | $background-tooltip-large-mobile: rgb(0, 90, 163);
124 | $font-size-heading-display-subtitle: 22px;
125 | $line-height-text: "1.4";
126 | $background-button-secondary-hover: rgb(220, 227, 233);
127 | $background-button-link-primary: "transparent";
128 | $background-button-white-bordered-hover: rgba(255, 255, 255, 0.2);
129 | $padding-tag-with-icon: 6px 8px 6px 6px;
130 | $color-text-button-facebook: rgb(255, 255, 255);
131 | $border-width-input-focus: 2px;
132 | $color-text-badge-dark: rgb(255, 255, 255);
133 | $border-color-input-hover: rgb(166, 182, 200);
134 | $padding-tag: 6px 8px;
135 | $color-text-badge-warning: rgb(233, 131, 5);
136 | $background-button-white: rgb(255, 255, 255);
137 | $space-x-large: 32px;
138 | $z-index-default: "1";
139 | $background-button-success-active: rgb(29, 114, 40);
140 | $box-shadow-fixed: 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 2px 4px 0px rgba(37, 42, 49, 0.12);
141 | $width-checkbox: 20px;
142 | $color-text-button-facebook-bordered-hover: rgb(56, 84, 144);
143 | $border-color-button-critical-bordered-hover: rgb(185, 25, 25);
144 | $space-xxx-large: 52px;
145 | $font-size-button-normal: 14px;
146 | /* use for smaller elements like tags */
147 | $border-radius-small: 2px;
148 | $palette-ink-normal-hover: rgb(24, 27, 32);
149 | $font-size-text-small: 12px;
150 | $color-text-link-secondary: rgb(37, 42, 49);
151 | $color-icon-info: rgb(1, 114, 203);
152 | $padding-button-normal: 0 16px;
153 | $opacity-checkbox-disabled: "0.5";
154 | $height-input-normal: 44px;
155 | $height-checkbox: 20px;
156 | $border-color-button-primary-bordered-active: rgb(0, 143, 123);
157 | $padding-button-small-with-left-icon: 0 12px 0 8px;
158 | $color-text-tag: rgb(37, 42, 49);
159 | $color-text-button-filled-active: rgb(255, 255, 255);
160 | $color-text-button-white-bordered-hover: rgb(255, 255, 255);
161 | $border-width-card: 1px;
162 | $padding-alert-with-icon: 12px;
163 | $color-text-button-secondary-hover: rgb(24, 27, 32);
164 | $color-alert-icon-warning: rgb(233, 131, 5);
165 | $palette-product-dark: rgb(0, 127, 109);
166 | $padding-button-normal-with-icons: 0 12px;
167 | $background-badge-dark: rgb(37, 42, 49);
168 | $palette-ink-light: rgb(95, 115, 140);
169 | $padding-button-small-with-right-icon: 0 8px 0 12px;
170 | $modifier-scale-button-active: 0.95;
171 | $color-text-button-warning-bordered-active: rgb(205, 115, 4);
172 | $palette-green-darker: rgb(35, 92, 43);
173 | $border-color-button-success-bordered-active: rgb(29, 114, 40);
174 | $font-size-heading-title1: 28px;
175 | $palette-blue-dark: rgb(0, 90, 163);
176 | $border-color-button-white-bordered: rgb(255, 255, 255);
177 | $color-text-button-primary-bordered: rgb(0, 169, 145);
178 | $modifier-scale-checkbox-radio-active: 0.95;
179 | $color-text-alert-critical: rgb(151, 12, 12);
180 | $padding-alert: 16px;
181 | $padding-loading: 12px;
182 | $background-button-bordered: "transparent";
183 | $color-text-button-success-bordered: rgb(40, 161, 56);
184 | $palette-orange-normal-hover: rgb(220, 124, 5);
185 | $palette-orange-darker: rgb(128, 63, 0);
186 | $palette-red-dark: rgb(151, 12, 12);
187 | $color-text-button-info-hover: rgb(255, 255, 255);
188 | $text-decoration-text-link-secondary-hover: "none";
189 | $color-text-button-google-bordered-active: rgb(11, 12, 15);
190 | $color-text-button-critical-bordered: rgb(210, 28, 28);
191 | $color-text-input-prefix: rgb(95, 115, 140);
192 | $color-text-warning: rgb(233, 131, 5);
193 | $height-illustration-medium: 200px;
194 | $font-size-heading-title2: 22px;
195 | $font-weight-bold: "700";
196 | $color-text-button-link-primary-active: rgb(0, 143, 123);
197 | $background-tag: rgb(245, 247, 249);
198 | $background-button-facebook-active: rgb(53, 79, 136);
199 | $color-text-loading: rgb(186, 199, 213);
200 | $height-stopover-arrow: 7px;
201 | $border-color-button-google-bordered: rgb(37, 42, 49);
202 | $background-tag-selected-active: rgb(11, 12, 15);
203 | $font-size-input-small: 14px;
204 | $color-form-label: rgb(37, 42, 49);
205 | $color-icon-radio-button-disabled: rgb(186, 199, 213);
206 | $color-text-button-white-active: rgb(11, 12, 15);
207 | $width-stopover-arrow: 36px;
208 | $palette-orange-light: rgb(253, 240, 227);
209 | $palette-green-normal-hover: rgb(35, 139, 49);
210 | $font-size-heading-title3: 16px;
211 | $background-alert-critical: rgb(250, 234, 234);
212 | $width-modal-normal: 740px;
213 | $width-breakpoint-medium-mobile: 414;
214 | $color-text-button-facebook-active: rgb(255, 255, 255);
215 | $palette-green-light: rgb(235, 244, 236);
216 | $palette-social-facebook: rgb(59, 89, 152);
217 | $margin-badge-icon: 0 4px 0 0;
218 | $palette-social-facebook-hover: rgb(56, 84, 144);
219 | $palette-green-light-hover: rgb(215, 234, 217);
220 | $height-button-small: 32px;
221 | $margin-button-icon-small: 8px;
222 | $height-service-logo-small: 12px;
223 | $padding-input-small: 0 12px;
224 | /* use only for square */
225 | $border-radius-circle: 50%;
226 | $palette-white: rgb(255, 255, 255);
227 | $font-size-heading-title4: 14px;
228 | $color-placeholder-input-error: rgb(210, 28, 28);
229 | $color-icon-input: rgb(186, 199, 213);
230 | $background-button-info: rgb(1, 114, 203);
231 | $background-alert-warning: rgb(253, 240, 227);
232 | $color-icon-tertiary: rgb(186, 199, 213);
233 | $background-button-info-hover: rgb(1, 97, 172);
234 | $background-badge-success: rgb(235, 244, 236);
235 | $height-service-logo-medium: 24px;
236 | $palette-white-hover: rgb(245, 247, 249);
237 | $font-weight-normal: "400";
238 | $background-button-link-primary-active: rgb(214, 222, 230);
239 | $color-form-label-filled: rgb(95, 115, 140);
240 | $palette-green-normal: rgb(40, 161, 56);
241 | $line-height-text-normal: 20px;
242 | $border-color-button-google-bordered-hover: rgb(24, 27, 32);
243 | $font-size-heading-title5: 12px;
244 | $background-button-white-active: rgb(229, 234, 239);
245 | $color-text-critical: rgb(210, 28, 28);
246 | $palette-orange-light-hover: rgb(250, 226, 199);
247 | $duration-fast: "0.15s";
248 | $color-text-button-success-bordered-hover: rgb(35, 139, 49);
249 | $background-tag-hover: rgb(229, 234, 239);
250 | $font-size-heading-display: 40px;
251 | $color-text-alert-warning: rgb(162, 81, 0);
252 | $text-decoration-text-link-secondary: "underline";
253 | $padding-button-small-with-icons: 0 8px;
254 | $color-text-badge-success: rgb(40, 161, 56);
255 | $color-text-button-info: rgb(255, 255, 255);
256 | $padding-button-normal-with-left-icon: 0 16px 0 12px;
257 | $margin-top-form-feedback: 2px;
258 | $palette-orange-normal: rgb(233, 131, 5);
259 | $border-width-input: 1px;
260 | $palette-cloud-dark: rgb(232, 237, 241);
261 | $palette-product-dark-active: rgb(0, 102, 87);
262 | $height-illustration-small: 90px;
263 | $color-stopover-arrow: rgb(95, 115, 140);
264 | $height-input-group-separator-normal: 24px;
265 | $color-text-button-critical-bordered-hover: rgb(185, 25, 25);
266 | $palette-red-dark-hover: rgb(137, 11, 11);
267 | $background-body: rgb(245, 247, 249);
268 | $background-button-bordered-hover: rgb(245, 247, 249);
269 | $color-text-button-primary-bordered-hover: rgb(0, 152, 130);
270 | $border-color-button-white-bordered-hover: rgb(255, 255, 255);
271 | $palette-blue-dark-hover: rgb(0, 79, 143);
272 | $palette-blue-dark-active: rgb(0, 62, 112);
273 | $color-alert-icon-critical: rgb(210, 28, 28);
274 | $padding-tag-removable-with-icon: 6px;
275 | $border-color-button-white-bordered-active: rgb(255, 255, 255);
276 | $color-text-button-primary-bordered-active: rgb(0, 143, 123);
277 | $background-button-bordered-active: rgb(245, 247, 249);
278 | $color-icon-radio-button: rgb(0, 169, 145);
279 | $palette-ink-light-active: rgb(70, 85, 103);
280 | $palette-ink-light-hover: rgb(82, 100, 122);
281 | $color-alert-icon-success: rgb(40, 161, 56);
282 | $palette-ink-normal: rgb(37, 42, 49);
283 | $font-weight-links: "500";
284 | $color-text-primary: rgb(37, 42, 49);
285 | $background-badge-neutral: rgb(245, 247, 249);
286 | $padding-tag-removable: 6px 6px 6px 8px;
287 | $color-text-button-secondary: rgb(37, 42, 49);
288 | $color-text-button-white-bordered: rgb(255, 255, 255);
289 | $background-tag-active: rgb(214, 222, 230);
290 | $padding-badge: 0 8px;
291 | $color-text-link-secondary-hover: rgb(0, 169, 145);
292 | $color-text-button-success-bordered-active: rgb(29, 114, 40);
293 | $palette-red-dark-active: rgb(109, 9, 9);
294 | $color-text-badge-critical: rgb(210, 28, 28);
295 | $padding-textarea-normal: 12px;
296 | $color-text-button-critical-bordered-active: rgb(157, 21, 21);
297 | $padding-button-without-text: "0";
298 | $color-placeholder-input-file-error: rgb(210, 28, 28);
299 | $palette-product-dark-hover: rgb(0, 112, 96);
300 | $background-service-logo: "transparent";
301 | $font-family: "'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif";
302 | $line-height-heading-display-subtitle: 28px;
303 | $background-button-white-hover: rgb(245, 247, 249);
304 | $border-color-button-critical-bordered: rgb(210, 28, 28);
305 | $color-text-button-facebook-bordered: rgb(59, 89, 152);
306 | $border-color-button-google-bordered-active: rgb(11, 12, 15);
307 | $line-height-text-large: 22px;
308 | $color-text-success: rgb(40, 161, 56);
309 | $border-color-input: rgb(186, 199, 213);
310 | $palette-orange-light-active: rgb(248, 211, 171);
311 | $font-weight-heading-title1: "700";
312 | $color-heading-inverted: rgb(255, 255, 255);
313 | $palette-green-light-active: rgb(195, 223, 199);
314 | $palette-social-facebook-active: rgb(53, 79, 136);
315 | $background-badge-critical: rgb(250, 234, 234);
316 | $background-badge-white: rgb(255, 255, 255);
317 | $background-country-flag: "transparent";
318 | $color-text-button-facebook-hover: rgb(255, 255, 255);
319 | $background-button-white-bordered: "transparent";
320 | $width-modal-large: 1280px;
321 | $palette-white-active: rgb(229, 234, 239);
322 | $background-button-secondary: rgb(232, 237, 241);
323 | $background-button-info-active: rgb(1, 80, 142);
324 | $background-button-link-primary-hover: rgb(229, 234, 239);
325 | $width-icon-medium: 24px;
326 | $color-text-badge-neutral: rgb(37, 42, 49);
327 | $space-x-small: 8px;
328 | $palette-green-normal-active: rgb(29, 114, 40);
329 | $space-xx-large: 40px;
330 | $font-weight-heading-title2: "500";
331 | $z-index-modal: "825";
332 | $border-color-tag-focus: rgb(1, 114, 203);
333 | $border-style-card: "solid";
334 | $space-xxx-small: 2px;
335 | $duration-slow: "0.4s";
336 | $space-large: 24px;
337 | $height-icon-medium: 24px;
338 | $border-color-input-error: rgb(210, 28, 28);
339 | $background-carrier-logo: "transparent";
340 | $color-text-button-white-hover: rgb(24, 27, 32);
341 | $background-tooltip: rgb(255, 255, 255);
342 | $background-tag-selected-hover: rgb(24, 27, 32);
343 | $background-alert-success: rgb(235, 244, 236);
344 | $padding-input-file: 0 0 0 6px;
345 | $color-text-button-link-primary-hover: rgb(0, 152, 130);
346 | $color-placeholder-input-file: rgb(95, 115, 140);
347 | $font-weight-heading-title3: "500";
348 | $color-text-button-info-active: rgb(255, 255, 255);
349 | $color-text-badge-white: rgb(37, 42, 49);
350 | $border-color-button-secondary-bordered: rgb(37, 42, 49);
351 | $palette-orange-normal-active: rgb(205, 115, 4);
352 | $border-color-modal: rgb(239, 242, 245);
353 | $color-text-button-google-bordered-hover: rgb(24, 27, 32);
354 | $color-text-input-disabled: rgb(186, 199, 213);
355 | $background-button-facebook-hover: rgb(56, 84, 144);
356 | $border-color-checkbox-radio-focus: rgb(1, 114, 203);
357 | $font-size-message: 14px;
358 | $font-weight-heading-title4: "500";
359 | $border-color-button-success-bordered-hover: rgb(35, 139, 49);
360 | $width-badge-circled: 24px;
361 | $background-separator: rgb(239, 242, 245);
362 | $color-text-button-warning-bordered-hover: rgb(220, 124, 5);
363 | $palette-product-darker: rgb(0, 92, 78);
364 | $border-color-table-head: rgb(186, 199, 213);
365 | $color-text-alert-success: rgb(43, 115, 54);
366 | $padding-button-large-with-right-icon: 0 16px 0 28px;
367 | $border-color-table: rgb(239, 242, 245);
368 | $width-breakpoint-large-desktop: 1200;
369 | $palette-blue-darker: rgb(0, 70, 128);
370 | $color-text-error: rgb(210, 28, 28);
371 | $font-weight-heading-title5: "700";
372 | $color-text-button-filled-hover: rgb(255, 255, 255);
373 | $border-color-button-primary-bordered-hover: rgb(0, 152, 130);
374 | $background-input-disabled: rgb(239, 242, 245);
375 | $palette-ink-normal-active: rgb(11, 12, 15);
376 | $height-input-large: 52px;
377 | $palette-ink-lighter: rgb(186, 199, 213);
378 | $color-icon-secondary: rgb(95, 115, 140);
379 | $padding-button-large: 0 28px;
380 | $color-text-button-secondary-active: rgb(11, 12, 15);
381 | $color-text-button-link-secondary: rgb(37, 42, 49);
382 | $color-text-link-primary: rgb(0, 127, 109);
383 | $color-text-button-white-bordered-active: rgb(255, 255, 255);
384 | $color-icon-checkbox-radio-disabled: rgb(186, 199, 213);
385 | $font-size-button-large: 16px;
386 | $background-button-google: rgb(245, 247, 249);
387 | $border-color-input-active: rgb(148, 168, 190);
388 | $opacity-button-disabled: "0.3";
389 | $background-button-success-hover: rgb(35, 139, 49);
390 | $border-color-table-cell: rgb(186, 199, 213);
391 | $font-size-form-feedback: 12px;
392 | $border-color-button-critical-bordered-active: rgb(157, 21, 21);
393 | $color-text-button-facebook-bordered-active: rgb(53, 79, 136);
394 | $palette-red-darker: rgb(118, 9, 9);
395 | $color-text-white: rgb(255, 255, 255);
396 | $box-shadow-fixed-reverse: 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px -2px 4px 0px rgba(37, 42, 49, 0.12);
397 | $background-table-even: rgb(245, 247, 249);
398 | $background-button-link-secondary: "transparent";
399 | $border-color-button-facebook-bordered: rgb(59, 89, 152);
400 | $background-button-primary-hover: rgb(0, 152, 130);
401 | $color-text-input: rgb(37, 42, 49);
402 | $border-color-button-info-bordered-hover: rgb(1, 97, 172);
403 | $color-text-button-warning: rgb(255, 255, 255);
404 | $color-text-alert-info: rgb(0, 90, 163);
405 | $palette-product-light-hover: rgb(214, 240, 238);
406 | $background-button-white-bordered-active: rgba(255, 255, 255, 0.2);
407 | $background-button-secondary-active: rgb(202, 212, 222);
408 | $color-placeholder-input: rgb(186, 199, 213);
409 | $space-medium: 16px;
410 | $color-text-button-info-bordered: rgb(1, 114, 203);
411 | $height-country-flag: "auto";
412 | $height-icon-large: 32px;
413 | $box-shadow-button-focus: 0 0 4px 1px rgba(1, 114, 203, 0.3);
414 | $palette-blue-light-hover: rgb(208, 233, 251);
415 | $border-color-checkbox-radio-hover: rgb(95, 115, 140);
416 | $color-text-button-critical-hover: rgb(255, 255, 255);
417 | $z-index-modal-overlay: "800";
418 | $color-icon-critical: rgb(210, 28, 28);
419 | $z-index-on-the-top: "900";
420 | $color-text-button-success-hover: rgb(255, 255, 255);
421 | $color-text-button-google: rgb(37, 42, 49);
422 | $line-height-heading-display: 44px;
423 | $duration-normal: "0.3s";
424 | $palette-cloud-normal-hover: rgb(220, 227, 233);
425 | $palette-product-normal: rgb(0, 169, 145);
426 | $border-color-button-secondary-bordered-active: rgb(11, 12, 15);
427 | $palette-cloud-light: rgb(245, 247, 249);
428 | $color-icon-checkbox-radio: rgb(0, 169, 145);
429 | $padding-textarea-small: 8px 12px;
430 | $background-table-shadow-right: "linear-gradient(to right, transparent, rgba(186, 199, 213, 0.23))";
431 | $background-button-warning: rgb(233, 131, 5);
432 | $background-table-hover: rgb(239, 242, 245);
433 | $font-weight-medium: "500";
434 | $padding-button-large-with-icons: 0 16px;
435 | $width-country-flag: 24px;
436 | $palette-red-light-hover: rgb(244, 210, 210);
437 | $background-alert-info: rgb(232, 244, 253);
438 | $palette-blue-normal: rgb(1, 114, 203);
439 | $height-badge: 24px;
440 | $width-icon-large: 32px;
441 | $background-input: rgb(255, 255, 255);
442 | $color-text-button-primary-hover: rgb(255, 255, 255);
443 | $palette-red-normal: rgb(210, 28, 28);
444 | $palette-orange-dark-hover: rgb(143, 71, 0);
445 | $color-text-button-secondary-bordered: rgb(37, 42, 49);
446 | /* use for big elements like modal and large buttons */
447 | $border-radius-large: 6px;
448 | $padding-table: 12px 16px;
449 | $background-button-critical-hover: rgb(185, 25, 25);
450 | $width-breakpoint-tablet: 768;
451 | $color-text-button-link-secondary-active: rgb(11, 12, 15);
452 | $palette-green-dark: rgb(43, 115, 54);
453 | $background-card: rgb(255, 255, 255);
454 | $height-separator: 1px;
455 | $border-color-button-warning-bordered: rgb(233, 131, 5);
456 | $background-illustration: "transparent";
457 | $height-input-group-separator-small: 16px;
458 | $text-decoration-text-link-primary: "underline";
459 | $text-decoration-text-link-primary-hover: "none";
460 | $border-color-button-warning-bordered-hover: rgb(220, 124, 5);
461 | $padding-button-large-with-left-icon: 0 28px 0 16px;
462 | $color-text-table: rgb(95, 115, 140);
463 | $opacity-radio-button-disabled: "0.5";
464 | $palette-green-dark-hover: rgb(37, 100, 47);
465 | $font-size-text-large: 16px;
466 | $palette-ink-lighter-active: rgb(148, 168, 190);
467 | $color-text-info: rgb(1, 114, 203);
468 | $background-button-google-active: rgb(214, 222, 230);
469 | $box-shadow-raised-reverse: 0px -4px 8px 0px rgba(37, 42, 49, 0.16), 0px -8px 24px 0px rgba(37, 42, 49, 0.24);
470 | $font-weight-heading-display-subtitle: "400";
471 | $color-heading: rgb(37, 42, 49);
472 | $background-button-critical: rgb(210, 28, 28);
473 | $background-modal: rgb(255, 255, 255);
474 | $color-text-button-secondary-bordered-hover: rgb(24, 27, 32);
475 | $palette-red-normal-hover: rgb(185, 25, 25);
476 | $palette-orange-dark: rgb(162, 81, 0);
477 | $line-height-text-small: 16px;
478 | $margin-button-group: 0 1px 0 0;
479 | 


--------------------------------------------------------------------------------
/output/theo-spec.styl:
--------------------------------------------------------------------------------
  1 | 
  2 | $background-button-link-secondary-active = rgb(214, 222, 230)
  3 | $padding-input-normal = 0 12px
  4 | $width-modal-small = 540px
  5 | $background-button-warning-hover = rgb(220, 124, 5)
  6 | $color-text-button-primary = rgb(255, 255, 255)
  7 | $border-color-button-facebook-bordered-active = rgb(53, 79, 136)
  8 | $margin-button-icon-normal = 8px
  9 | $height-button-normal = 44px
 10 | $color-icon-warning = rgb(233, 131, 5)
 11 | $font-size-form-label = 14px
 12 | $palette-cloud-light-hover = rgb(229, 234, 239)
 13 | $color-text-button-warning-active = rgb(255, 255, 255)
 14 | $palette-red-light = rgb(250, 234, 234)
 15 | $line-height-heading-title1 = 36px
 16 | $background-table = rgb(255, 255, 255)
 17 | $color-alert-icon-info = rgb(1, 114, 203)
 18 | $palette-blue-normal-hover = rgb(1, 97, 172)
 19 | $color-text-button-critical = rgb(255, 255, 255)
 20 | $z-index-sticky = "100"
 21 | $border-color-checkbox-radio = rgb(186, 199, 213)
 22 | $palette-blue-light = rgb(232, 244, 253)
 23 | $box-shadow-action = 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 1px 4px 0px rgba(37, 42, 49, 0.12)
 24 | $color-text-badge-info = rgb(1, 114, 203)
 25 | $color-text-button-info-bordered-hover = rgb(1, 97, 172)
 26 | $palette-cloud-normal = rgb(239, 242, 245)
 27 | $palette-product-normal-hover = rgb(0, 152, 130)
 28 | $space-xx-small = 4px
 29 | $color-text-button-google-active = rgb(11, 12, 15)
 30 | $font-size-input-normal = 14px
 31 | $color-text-button-google-hover = rgb(24, 27, 32)
 32 | $palette-product-normal-active = rgb(0, 143, 123)
 33 | $line-height-heading-title2 = 28px
 34 | $color-text-button-info-bordered-active = rgb(1, 80, 142)
 35 | $color-text-button-success = rgb(255, 255, 255)
 36 | $space-small = 12px
 37 | $height-service-logo-large = 48px
 38 | $background-button-link-secondary-hover = rgb(229, 234, 239)
 39 | $palette-blue-normal-active = rgb(1, 80, 142)
 40 | $color-text-button-warning-hover = rgb(255, 255, 255)
 41 | $palette-cloud-light-active = rgb(214, 222, 230)
 42 | $line-height-heading-title3 = 24px
 43 | $palette-product-light = rgb(236, 248, 247)
 44 | $height-button-large = 52px
 45 | $background-button-warning-active = rgb(205, 115, 4)
 46 | $margin-button-icon-large = 12px
 47 | $border-color-button-info-bordered = rgb(1, 114, 203)
 48 | $background-button-primary = rgb(0, 169, 145)
 49 | $border-color-button-facebook-bordered-hover = rgb(56, 84, 144)
 50 | $background-button-google-hover = rgb(229, 234, 239)
 51 | $box-shadow-raised = 0px 4px 8px 0px rgba(37, 42, 49, 0.16), 0px 8px 24px 0px rgba(37, 42, 49, 0.24)
 52 | $background-badge-info = rgb(232, 244, 253)
 53 | $border-color-tag = rgb(239, 242, 245)
 54 | $background-button-success = rgb(40, 161, 56)
 55 | $palette-red-normal-active = rgb(157, 21, 21)
 56 | $color-text-button-secondary-bordered-active = rgb(11, 12, 15)
 57 | $line-height-heading-title4 = 20px
 58 | $border-color-input-error-focus = rgb(210, 28, 28)
 59 | $padding-button-small = 0 12px
 60 | $color-text-secondary = rgb(95, 115, 140)
 61 | $color-text-link-primary-hover = rgb(0, 169, 145)
 62 | $color-text-button-link-secondary-hover = rgb(24, 27, 32)
 63 | $font-size-text-normal = 14px
 64 | $palette-green-dark-active = rgb(31, 81, 38)
 65 | $palette-ink-lighter-hover = rgb(166, 182, 200)
 66 | $border-color-button-primary-bordered = rgb(0, 169, 145)
 67 | $border-color-button-warning-bordered-active = rgb(205, 115, 4)
 68 | $color-text-button-filled = rgb(255, 255, 255)
 69 | $line-height-heading-title5 = 20px
 70 | $height-input-small = 32px
 71 | $border-color-input-focus = rgb(1, 114, 203)
 72 | $padding-button-normal-with-right-icon = 0 12px 0 16px
 73 | $background-button-critical-active = rgb(157, 21, 21)
 74 | $opacity-overlay = "0.8"
 75 | $width-breakpoint-desktop = 992
 76 | $border-style-input = "solid"
 77 | $font-size-button-small = 12px
 78 | /* use for all basic elements like buttons, inputs, content containers */
 79 | $border-radius-normal = 3px
 80 | $border-radius-badge = 12px
 81 | $color-text-button-warning-bordered = rgb(233, 131, 5)
 82 | $box-shadow-overlay = 0px 12px 24px -4px rgba(37, 42, 49, 0.24), 0px 8px 60px 0px rgba(37, 42, 49, 0.32)
 83 | $color-text-tag-selected = rgb(239, 242, 245)
 84 | $border-color-button-success-bordered = rgb(40, 161, 56)
 85 | $palette-orange-dark-active = rgb(117, 58, 0)
 86 | $color-text-button-primary-active = rgb(255, 255, 255)
 87 | $color-text-button-link-primary = rgb(0, 169, 145)
 88 | $background-button-facebook = rgb(59, 89, 152)
 89 | $width-breakpoint-large-mobile = 576
 90 | $border-color-button-secondary-bordered-hover = rgb(24, 27, 32)
 91 | $palette-red-light-active = rgb(238, 185, 185)
 92 | $padding-table-compact = 8px 12px
 93 | $color-text-alert-link = rgb(37, 42, 49)
 94 | $color-text-button-google-bordered = rgb(37, 42, 49)
 95 | $padding-left-select-prefix = 48px
 96 | $height-radio-button = 20px
 97 | $margin-bottom-select-suffix = 2px
 98 | $color-icon-primary = rgb(37, 42, 49)
 99 | $palette-cloud-normal-active = rgb(202, 212, 222)
100 | $background-table-shadow-left = "linear-gradient(to left, transparent, rgba(186, 199, 213, 0.23))"
101 | $width-radio-button = 20px
102 | $color-text-button-success-active = rgb(255, 255, 255)
103 | $border-color-checkbox-radio-error = rgb(210, 28, 28)
104 | $color-icon-success = rgb(40, 161, 56)
105 | $background-tag-selected = rgb(37, 42, 49)
106 | $border-color-card = rgb(239, 242, 245)
107 | $color-text-button-critical-active = rgb(255, 255, 255)
108 | $height-icon-small = 16px
109 | $color-text-button-white = rgb(37, 42, 49)
110 | $background-badge-warning = rgb(253, 240, 227)
111 | $color-info-check-box-radio = rgb(95, 115, 140)
112 | $font-weight-table-head = "700"
113 | $palette-blue-light-active = rgb(180, 219, 248)
114 | $border-color-checkbox-radio-active = rgb(37, 42, 49)
115 | $box-shadow-action-active = 0px 1px 4px 0px rgba(37, 42, 49, 0.16), 0px 4px 8px 0px rgba(37, 42, 49, 0.12)
116 | $line-height-heading = "1.2"
117 | $font-weight-heading-display = "700"
118 | $border-color-input-error-hover = rgb(185, 25, 25)
119 | $width-icon-small = 16px
120 | $palette-product-light-active = rgb(192, 232, 228)
121 | $border-color-button-info-bordered-active = rgb(1, 80, 142)
122 | $background-button-primary-active = rgb(0, 143, 123)
123 | $background-tooltip-large-mobile = rgb(0, 90, 163)
124 | $font-size-heading-display-subtitle = 22px
125 | $line-height-text = "1.4"
126 | $background-button-secondary-hover = rgb(220, 227, 233)
127 | $background-button-link-primary = "transparent"
128 | $background-button-white-bordered-hover = rgba(255, 255, 255, 0.2)
129 | $padding-tag-with-icon = 6px 8px 6px 6px
130 | $color-text-button-facebook = rgb(255, 255, 255)
131 | $border-width-input-focus = 2px
132 | $color-text-badge-dark = rgb(255, 255, 255)
133 | $border-color-input-hover = rgb(166, 182, 200)
134 | $padding-tag = 6px 8px
135 | $color-text-badge-warning = rgb(233, 131, 5)
136 | $background-button-white = rgb(255, 255, 255)
137 | $space-x-large = 32px
138 | $z-index-default = "1"
139 | $background-button-success-active = rgb(29, 114, 40)
140 | $box-shadow-fixed = 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 2px 4px 0px rgba(37, 42, 49, 0.12)
141 | $width-checkbox = 20px
142 | $color-text-button-facebook-bordered-hover = rgb(56, 84, 144)
143 | $border-color-button-critical-bordered-hover = rgb(185, 25, 25)
144 | $space-xxx-large = 52px
145 | $font-size-button-normal = 14px
146 | /* use for smaller elements like tags */
147 | $border-radius-small = 2px
148 | $palette-ink-normal-hover = rgb(24, 27, 32)
149 | $font-size-text-small = 12px
150 | $color-text-link-secondary = rgb(37, 42, 49)
151 | $color-icon-info = rgb(1, 114, 203)
152 | $padding-button-normal = 0 16px
153 | $opacity-checkbox-disabled = "0.5"
154 | $height-input-normal = 44px
155 | $height-checkbox = 20px
156 | $border-color-button-primary-bordered-active = rgb(0, 143, 123)
157 | $padding-button-small-with-left-icon = 0 12px 0 8px
158 | $color-text-tag = rgb(37, 42, 49)
159 | $color-text-button-filled-active = rgb(255, 255, 255)
160 | $color-text-button-white-bordered-hover = rgb(255, 255, 255)
161 | $border-width-card = 1px
162 | $padding-alert-with-icon = 12px
163 | $color-text-button-secondary-hover = rgb(24, 27, 32)
164 | $color-alert-icon-warning = rgb(233, 131, 5)
165 | $palette-product-dark = rgb(0, 127, 109)
166 | $padding-button-normal-with-icons = 0 12px
167 | $background-badge-dark = rgb(37, 42, 49)
168 | $palette-ink-light = rgb(95, 115, 140)
169 | $padding-button-small-with-right-icon = 0 8px 0 12px
170 | $modifier-scale-button-active = 0.95
171 | $color-text-button-warning-bordered-active = rgb(205, 115, 4)
172 | $palette-green-darker = rgb(35, 92, 43)
173 | $border-color-button-success-bordered-active = rgb(29, 114, 40)
174 | $font-size-heading-title1 = 28px
175 | $palette-blue-dark = rgb(0, 90, 163)
176 | $border-color-button-white-bordered = rgb(255, 255, 255)
177 | $color-text-button-primary-bordered = rgb(0, 169, 145)
178 | $modifier-scale-checkbox-radio-active = 0.95
179 | $color-text-alert-critical = rgb(151, 12, 12)
180 | $padding-alert = 16px
181 | $padding-loading = 12px
182 | $background-button-bordered = "transparent"
183 | $color-text-button-success-bordered = rgb(40, 161, 56)
184 | $palette-orange-normal-hover = rgb(220, 124, 5)
185 | $palette-orange-darker = rgb(128, 63, 0)
186 | $palette-red-dark = rgb(151, 12, 12)
187 | $color-text-button-info-hover = rgb(255, 255, 255)
188 | $text-decoration-text-link-secondary-hover = "none"
189 | $color-text-button-google-bordered-active = rgb(11, 12, 15)
190 | $color-text-button-critical-bordered = rgb(210, 28, 28)
191 | $color-text-input-prefix = rgb(95, 115, 140)
192 | $color-text-warning = rgb(233, 131, 5)
193 | $height-illustration-medium = 200px
194 | $font-size-heading-title2 = 22px
195 | $font-weight-bold = "700"
196 | $color-text-button-link-primary-active = rgb(0, 143, 123)
197 | $background-tag = rgb(245, 247, 249)
198 | $background-button-facebook-active = rgb(53, 79, 136)
199 | $color-text-loading = rgb(186, 199, 213)
200 | $height-stopover-arrow = 7px
201 | $border-color-button-google-bordered = rgb(37, 42, 49)
202 | $background-tag-selected-active = rgb(11, 12, 15)
203 | $font-size-input-small = 14px
204 | $color-form-label = rgb(37, 42, 49)
205 | $color-icon-radio-button-disabled = rgb(186, 199, 213)
206 | $color-text-button-white-active = rgb(11, 12, 15)
207 | $width-stopover-arrow = 36px
208 | $palette-orange-light = rgb(253, 240, 227)
209 | $palette-green-normal-hover = rgb(35, 139, 49)
210 | $font-size-heading-title3 = 16px
211 | $background-alert-critical = rgb(250, 234, 234)
212 | $width-modal-normal = 740px
213 | $width-breakpoint-medium-mobile = 414
214 | $color-text-button-facebook-active = rgb(255, 255, 255)
215 | $palette-green-light = rgb(235, 244, 236)
216 | $palette-social-facebook = rgb(59, 89, 152)
217 | $margin-badge-icon = 0 4px 0 0
218 | $palette-social-facebook-hover = rgb(56, 84, 144)
219 | $palette-green-light-hover = rgb(215, 234, 217)
220 | $height-button-small = 32px
221 | $margin-button-icon-small = 8px
222 | $height-service-logo-small = 12px
223 | $padding-input-small = 0 12px
224 | /* use only for square */
225 | $border-radius-circle = 50%
226 | $palette-white = rgb(255, 255, 255)
227 | $font-size-heading-title4 = 14px
228 | $color-placeholder-input-error = rgb(210, 28, 28)
229 | $color-icon-input = rgb(186, 199, 213)
230 | $background-button-info = rgb(1, 114, 203)
231 | $background-alert-warning = rgb(253, 240, 227)
232 | $color-icon-tertiary = rgb(186, 199, 213)
233 | $background-button-info-hover = rgb(1, 97, 172)
234 | $background-badge-success = rgb(235, 244, 236)
235 | $height-service-logo-medium = 24px
236 | $palette-white-hover = rgb(245, 247, 249)
237 | $font-weight-normal = "400"
238 | $background-button-link-primary-active = rgb(214, 222, 230)
239 | $color-form-label-filled = rgb(95, 115, 140)
240 | $palette-green-normal = rgb(40, 161, 56)
241 | $line-height-text-normal = 20px
242 | $border-color-button-google-bordered-hover = rgb(24, 27, 32)
243 | $font-size-heading-title5 = 12px
244 | $background-button-white-active = rgb(229, 234, 239)
245 | $color-text-critical = rgb(210, 28, 28)
246 | $palette-orange-light-hover = rgb(250, 226, 199)
247 | $duration-fast = "0.15s"
248 | $color-text-button-success-bordered-hover = rgb(35, 139, 49)
249 | $background-tag-hover = rgb(229, 234, 239)
250 | $font-size-heading-display = 40px
251 | $color-text-alert-warning = rgb(162, 81, 0)
252 | $text-decoration-text-link-secondary = "underline"
253 | $padding-button-small-with-icons = 0 8px
254 | $color-text-badge-success = rgb(40, 161, 56)
255 | $color-text-button-info = rgb(255, 255, 255)
256 | $padding-button-normal-with-left-icon = 0 16px 0 12px
257 | $margin-top-form-feedback = 2px
258 | $palette-orange-normal = rgb(233, 131, 5)
259 | $border-width-input = 1px
260 | $palette-cloud-dark = rgb(232, 237, 241)
261 | $palette-product-dark-active = rgb(0, 102, 87)
262 | $height-illustration-small = 90px
263 | $color-stopover-arrow = rgb(95, 115, 140)
264 | $height-input-group-separator-normal = 24px
265 | $color-text-button-critical-bordered-hover = rgb(185, 25, 25)
266 | $palette-red-dark-hover = rgb(137, 11, 11)
267 | $background-body = rgb(245, 247, 249)
268 | $background-button-bordered-hover = rgb(245, 247, 249)
269 | $color-text-button-primary-bordered-hover = rgb(0, 152, 130)
270 | $border-color-button-white-bordered-hover = rgb(255, 255, 255)
271 | $palette-blue-dark-hover = rgb(0, 79, 143)
272 | $palette-blue-dark-active = rgb(0, 62, 112)
273 | $color-alert-icon-critical = rgb(210, 28, 28)
274 | $padding-tag-removable-with-icon = 6px
275 | $border-color-button-white-bordered-active = rgb(255, 255, 255)
276 | $color-text-button-primary-bordered-active = rgb(0, 143, 123)
277 | $background-button-bordered-active = rgb(245, 247, 249)
278 | $color-icon-radio-button = rgb(0, 169, 145)
279 | $palette-ink-light-active = rgb(70, 85, 103)
280 | $palette-ink-light-hover = rgb(82, 100, 122)
281 | $color-alert-icon-success = rgb(40, 161, 56)
282 | $palette-ink-normal = rgb(37, 42, 49)
283 | $font-weight-links = "500"
284 | $color-text-primary = rgb(37, 42, 49)
285 | $background-badge-neutral = rgb(245, 247, 249)
286 | $padding-tag-removable = 6px 6px 6px 8px
287 | $color-text-button-secondary = rgb(37, 42, 49)
288 | $color-text-button-white-bordered = rgb(255, 255, 255)
289 | $background-tag-active = rgb(214, 222, 230)
290 | $padding-badge = 0 8px
291 | $color-text-link-secondary-hover = rgb(0, 169, 145)
292 | $color-text-button-success-bordered-active = rgb(29, 114, 40)
293 | $palette-red-dark-active = rgb(109, 9, 9)
294 | $color-text-badge-critical = rgb(210, 28, 28)
295 | $padding-textarea-normal = 12px
296 | $color-text-button-critical-bordered-active = rgb(157, 21, 21)
297 | $padding-button-without-text = "0"
298 | $color-placeholder-input-file-error = rgb(210, 28, 28)
299 | $palette-product-dark-hover = rgb(0, 112, 96)
300 | $background-service-logo = "transparent"
301 | $font-family = "'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif"
302 | $line-height-heading-display-subtitle = 28px
303 | $background-button-white-hover = rgb(245, 247, 249)
304 | $border-color-button-critical-bordered = rgb(210, 28, 28)
305 | $color-text-button-facebook-bordered = rgb(59, 89, 152)
306 | $border-color-button-google-bordered-active = rgb(11, 12, 15)
307 | $line-height-text-large = 22px
308 | $color-text-success = rgb(40, 161, 56)
309 | $border-color-input = rgb(186, 199, 213)
310 | $palette-orange-light-active = rgb(248, 211, 171)
311 | $font-weight-heading-title1 = "700"
312 | $color-heading-inverted = rgb(255, 255, 255)
313 | $palette-green-light-active = rgb(195, 223, 199)
314 | $palette-social-facebook-active = rgb(53, 79, 136)
315 | $background-badge-critical = rgb(250, 234, 234)
316 | $background-badge-white = rgb(255, 255, 255)
317 | $background-country-flag = "transparent"
318 | $color-text-button-facebook-hover = rgb(255, 255, 255)
319 | $background-button-white-bordered = "transparent"
320 | $width-modal-large = 1280px
321 | $palette-white-active = rgb(229, 234, 239)
322 | $background-button-secondary = rgb(232, 237, 241)
323 | $background-button-info-active = rgb(1, 80, 142)
324 | $background-button-link-primary-hover = rgb(229, 234, 239)
325 | $width-icon-medium = 24px
326 | $color-text-badge-neutral = rgb(37, 42, 49)
327 | $space-x-small = 8px
328 | $palette-green-normal-active = rgb(29, 114, 40)
329 | $space-xx-large = 40px
330 | $font-weight-heading-title2 = "500"
331 | $z-index-modal = "825"
332 | $border-color-tag-focus = rgb(1, 114, 203)
333 | $border-style-card = "solid"
334 | $space-xxx-small = 2px
335 | $duration-slow = "0.4s"
336 | $space-large = 24px
337 | $height-icon-medium = 24px
338 | $border-color-input-error = rgb(210, 28, 28)
339 | $background-carrier-logo = "transparent"
340 | $color-text-button-white-hover = rgb(24, 27, 32)
341 | $background-tooltip = rgb(255, 255, 255)
342 | $background-tag-selected-hover = rgb(24, 27, 32)
343 | $background-alert-success = rgb(235, 244, 236)
344 | $padding-input-file = 0 0 0 6px
345 | $color-text-button-link-primary-hover = rgb(0, 152, 130)
346 | $color-placeholder-input-file = rgb(95, 115, 140)
347 | $font-weight-heading-title3 = "500"
348 | $color-text-button-info-active = rgb(255, 255, 255)
349 | $color-text-badge-white = rgb(37, 42, 49)
350 | $border-color-button-secondary-bordered = rgb(37, 42, 49)
351 | $palette-orange-normal-active = rgb(205, 115, 4)
352 | $border-color-modal = rgb(239, 242, 245)
353 | $color-text-button-google-bordered-hover = rgb(24, 27, 32)
354 | $color-text-input-disabled = rgb(186, 199, 213)
355 | $background-button-facebook-hover = rgb(56, 84, 144)
356 | $border-color-checkbox-radio-focus = rgb(1, 114, 203)
357 | $font-size-message = 14px
358 | $font-weight-heading-title4 = "500"
359 | $border-color-button-success-bordered-hover = rgb(35, 139, 49)
360 | $width-badge-circled = 24px
361 | $background-separator = rgb(239, 242, 245)
362 | $color-text-button-warning-bordered-hover = rgb(220, 124, 5)
363 | $palette-product-darker = rgb(0, 92, 78)
364 | $border-color-table-head = rgb(186, 199, 213)
365 | $color-text-alert-success = rgb(43, 115, 54)
366 | $padding-button-large-with-right-icon = 0 16px 0 28px
367 | $border-color-table = rgb(239, 242, 245)
368 | $width-breakpoint-large-desktop = 1200
369 | $palette-blue-darker = rgb(0, 70, 128)
370 | $color-text-error = rgb(210, 28, 28)
371 | $font-weight-heading-title5 = "700"
372 | $color-text-button-filled-hover = rgb(255, 255, 255)
373 | $border-color-button-primary-bordered-hover = rgb(0, 152, 130)
374 | $background-input-disabled = rgb(239, 242, 245)
375 | $palette-ink-normal-active = rgb(11, 12, 15)
376 | $height-input-large = 52px
377 | $palette-ink-lighter = rgb(186, 199, 213)
378 | $color-icon-secondary = rgb(95, 115, 140)
379 | $padding-button-large = 0 28px
380 | $color-text-button-secondary-active = rgb(11, 12, 15)
381 | $color-text-button-link-secondary = rgb(37, 42, 49)
382 | $color-text-link-primary = rgb(0, 127, 109)
383 | $color-text-button-white-bordered-active = rgb(255, 255, 255)
384 | $color-icon-checkbox-radio-disabled = rgb(186, 199, 213)
385 | $font-size-button-large = 16px
386 | $background-button-google = rgb(245, 247, 249)
387 | $border-color-input-active = rgb(148, 168, 190)
388 | $opacity-button-disabled = "0.3"
389 | $background-button-success-hover = rgb(35, 139, 49)
390 | $border-color-table-cell = rgb(186, 199, 213)
391 | $font-size-form-feedback = 12px
392 | $border-color-button-critical-bordered-active = rgb(157, 21, 21)
393 | $color-text-button-facebook-bordered-active = rgb(53, 79, 136)
394 | $palette-red-darker = rgb(118, 9, 9)
395 | $color-text-white = rgb(255, 255, 255)
396 | $box-shadow-fixed-reverse = 0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px -2px 4px 0px rgba(37, 42, 49, 0.12)
397 | $background-table-even = rgb(245, 247, 249)
398 | $background-button-link-secondary = "transparent"
399 | $border-color-button-facebook-bordered = rgb(59, 89, 152)
400 | $background-button-primary-hover = rgb(0, 152, 130)
401 | $color-text-input = rgb(37, 42, 49)
402 | $border-color-button-info-bordered-hover = rgb(1, 97, 172)
403 | $color-text-button-warning = rgb(255, 255, 255)
404 | $color-text-alert-info = rgb(0, 90, 163)
405 | $palette-product-light-hover = rgb(214, 240, 238)
406 | $background-button-white-bordered-active = rgba(255, 255, 255, 0.2)
407 | $background-button-secondary-active = rgb(202, 212, 222)
408 | $color-placeholder-input = rgb(186, 199, 213)
409 | $space-medium = 16px
410 | $color-text-button-info-bordered = rgb(1, 114, 203)
411 | $height-country-flag = "auto"
412 | $height-icon-large = 32px
413 | $box-shadow-button-focus = 0 0 4px 1px rgba(1, 114, 203, 0.3)
414 | $palette-blue-light-hover = rgb(208, 233, 251)
415 | $border-color-checkbox-radio-hover = rgb(95, 115, 140)
416 | $color-text-button-critical-hover = rgb(255, 255, 255)
417 | $z-index-modal-overlay = "800"
418 | $color-icon-critical = rgb(210, 28, 28)
419 | $z-index-on-the-top = "900"
420 | $color-text-button-success-hover = rgb(255, 255, 255)
421 | $color-text-button-google = rgb(37, 42, 49)
422 | $line-height-heading-display = 44px
423 | $duration-normal = "0.3s"
424 | $palette-cloud-normal-hover = rgb(220, 227, 233)
425 | $palette-product-normal = rgb(0, 169, 145)
426 | $border-color-button-secondary-bordered-active = rgb(11, 12, 15)
427 | $palette-cloud-light = rgb(245, 247, 249)
428 | $color-icon-checkbox-radio = rgb(0, 169, 145)
429 | $padding-textarea-small = 8px 12px
430 | $background-table-shadow-right = "linear-gradient(to right, transparent, rgba(186, 199, 213, 0.23))"
431 | $background-button-warning = rgb(233, 131, 5)
432 | $background-table-hover = rgb(239, 242, 245)
433 | $font-weight-medium = "500"
434 | $padding-button-large-with-icons = 0 16px
435 | $width-country-flag = 24px
436 | $palette-red-light-hover = rgb(244, 210, 210)
437 | $background-alert-info = rgb(232, 244, 253)
438 | $palette-blue-normal = rgb(1, 114, 203)
439 | $height-badge = 24px
440 | $width-icon-large = 32px
441 | $background-input = rgb(255, 255, 255)
442 | $color-text-button-primary-hover = rgb(255, 255, 255)
443 | $palette-red-normal = rgb(210, 28, 28)
444 | $palette-orange-dark-hover = rgb(143, 71, 0)
445 | $color-text-button-secondary-bordered = rgb(37, 42, 49)
446 | /* use for big elements like modal and large buttons */
447 | $border-radius-large = 6px
448 | $padding-table = 12px 16px
449 | $background-button-critical-hover = rgb(185, 25, 25)
450 | $width-breakpoint-tablet = 768
451 | $color-text-button-link-secondary-active = rgb(11, 12, 15)
452 | $palette-green-dark = rgb(43, 115, 54)
453 | $background-card = rgb(255, 255, 255)
454 | $height-separator = 1px
455 | $border-color-button-warning-bordered = rgb(233, 131, 5)
456 | $background-illustration = "transparent"
457 | $height-input-group-separator-small = 16px
458 | $text-decoration-text-link-primary = "underline"
459 | $text-decoration-text-link-primary-hover = "none"
460 | $border-color-button-warning-bordered-hover = rgb(220, 124, 5)
461 | $padding-button-large-with-left-icon = 0 28px 0 16px
462 | $color-text-table = rgb(95, 115, 140)
463 | $opacity-radio-button-disabled = "0.5"
464 | $palette-green-dark-hover = rgb(37, 100, 47)
465 | $font-size-text-large = 16px
466 | $palette-ink-lighter-active = rgb(148, 168, 190)
467 | $color-text-info = rgb(1, 114, 203)
468 | $background-button-google-active = rgb(214, 222, 230)
469 | $box-shadow-raised-reverse = 0px -4px 8px 0px rgba(37, 42, 49, 0.16), 0px -8px 24px 0px rgba(37, 42, 49, 0.24)
470 | $font-weight-heading-display-subtitle = "400"
471 | $color-heading = rgb(37, 42, 49)
472 | $background-button-critical = rgb(210, 28, 28)
473 | $background-modal = rgb(255, 255, 255)
474 | $color-text-button-secondary-bordered-hover = rgb(24, 27, 32)
475 | $palette-red-normal-hover = rgb(185, 25, 25)
476 | $palette-orange-dark = rgb(162, 81, 0)
477 | $line-height-text-small = 16px
478 | $margin-button-group = 0 1px 0 0
479 | 


--------------------------------------------------------------------------------
/output/theo-spec.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "backgroundButtonLinkSecondaryActive": "rgb(214, 222, 230)",
  3 |   "paddingInputNormal": "0 12px",
  4 |   "widthModalSmall": "540px",
  5 |   "backgroundButtonWarningHover": "rgb(220, 124, 5)",
  6 |   "colorTextButtonPrimary": "rgb(255, 255, 255)",
  7 |   "borderColorButtonFacebookBorderedActive": "rgb(53, 79, 136)",
  8 |   "marginButtonIconNormal": "8px",
  9 |   "heightButtonNormal": "44px",
 10 |   "colorIconWarning": "rgb(233, 131, 5)",
 11 |   "fontSizeFormLabel": "14px",
 12 |   "paletteCloudLightHover": "rgb(229, 234, 239)",
 13 |   "colorTextButtonWarningActive": "rgb(255, 255, 255)",
 14 |   "paletteRedLight": "rgb(250, 234, 234)",
 15 |   "lineHeightHeadingTitle1": "36px",
 16 |   "backgroundTable": "rgb(255, 255, 255)",
 17 |   "colorAlertIconInfo": "rgb(1, 114, 203)",
 18 |   "paletteBlueNormalHover": "rgb(1, 97, 172)",
 19 |   "colorTextButtonCritical": "rgb(255, 255, 255)",
 20 |   "zIndexSticky": "100",
 21 |   "borderColorCheckboxRadio": "rgb(186, 199, 213)",
 22 |   "paletteBlueLight": "rgb(232, 244, 253)",
 23 |   "boxShadowAction": "0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 1px 4px 0px rgba(37, 42, 49, 0.12)",
 24 |   "colorTextBadgeInfo": "rgb(1, 114, 203)",
 25 |   "colorTextButtonInfoBorderedHover": "rgb(1, 97, 172)",
 26 |   "paletteCloudNormal": "rgb(239, 242, 245)",
 27 |   "paletteProductNormalHover": "rgb(0, 152, 130)",
 28 |   "spaceXXSmall": "4px",
 29 |   "colorTextButtonGoogleActive": "rgb(11, 12, 15)",
 30 |   "fontSizeInputNormal": "14px",
 31 |   "colorTextButtonGoogleHover": "rgb(24, 27, 32)",
 32 |   "paletteProductNormalActive": "rgb(0, 143, 123)",
 33 |   "lineHeightHeadingTitle2": "28px",
 34 |   "colorTextButtonInfoBorderedActive": "rgb(1, 80, 142)",
 35 |   "colorTextButtonSuccess": "rgb(255, 255, 255)",
 36 |   "spaceSmall": "12px",
 37 |   "heightServiceLogoLarge": "48px",
 38 |   "backgroundButtonLinkSecondaryHover": "rgb(229, 234, 239)",
 39 |   "paletteBlueNormalActive": "rgb(1, 80, 142)",
 40 |   "colorTextButtonWarningHover": "rgb(255, 255, 255)",
 41 |   "paletteCloudLightActive": "rgb(214, 222, 230)",
 42 |   "lineHeightHeadingTitle3": "24px",
 43 |   "paletteProductLight": "rgb(236, 248, 247)",
 44 |   "heightButtonLarge": "52px",
 45 |   "backgroundButtonWarningActive": "rgb(205, 115, 4)",
 46 |   "marginButtonIconLarge": "12px",
 47 |   "borderColorButtonInfoBordered": "rgb(1, 114, 203)",
 48 |   "backgroundButtonPrimary": "rgb(0, 169, 145)",
 49 |   "borderColorButtonFacebookBorderedHover": "rgb(56, 84, 144)",
 50 |   "backgroundButtonGoogleHover": "rgb(229, 234, 239)",
 51 |   "boxShadowRaised": "0px 4px 8px 0px rgba(37, 42, 49, 0.16), 0px 8px 24px 0px rgba(37, 42, 49, 0.24)",
 52 |   "backgroundBadgeInfo": "rgb(232, 244, 253)",
 53 |   "borderColorTag": "rgb(239, 242, 245)",
 54 |   "backgroundButtonSuccess": "rgb(40, 161, 56)",
 55 |   "paletteRedNormalActive": "rgb(157, 21, 21)",
 56 |   "colorTextButtonSecondaryBorderedActive": "rgb(11, 12, 15)",
 57 |   "lineHeightHeadingTitle4": "20px",
 58 |   "borderColorInputErrorFocus": "rgb(210, 28, 28)",
 59 |   "paddingButtonSmall": "0 12px",
 60 |   "colorTextSecondary": "rgb(95, 115, 140)",
 61 |   "colorTextLinkPrimaryHover": "rgb(0, 169, 145)",
 62 |   "colorTextButtonLinkSecondaryHover": "rgb(24, 27, 32)",
 63 |   "fontSizeTextNormal": "14px",
 64 |   "paletteGreenDarkActive": "rgb(31, 81, 38)",
 65 |   "paletteInkLighterHover": "rgb(166, 182, 200)",
 66 |   "borderColorButtonPrimaryBordered": "rgb(0, 169, 145)",
 67 |   "borderColorButtonWarningBorderedActive": "rgb(205, 115, 4)",
 68 |   "colorTextButtonFilled": "rgb(255, 255, 255)",
 69 |   "lineHeightHeadingTitle5": "20px",
 70 |   "heightInputSmall": "32px",
 71 |   "borderColorInputFocus": "rgb(1, 114, 203)",
 72 |   "paddingButtonNormalWithRightIcon": "0 12px 0 16px",
 73 |   "backgroundButtonCriticalActive": "rgb(157, 21, 21)",
 74 |   "opacityOverlay": "0.8",
 75 |   "widthBreakpointDesktop": 992,
 76 |   "borderStyleInput": "solid",
 77 |   "fontSizeButtonSmall": "12px",
 78 |   "borderRadiusNormal": "3px",
 79 |   "borderRadiusBadge": "12px",
 80 |   "colorTextButtonWarningBordered": "rgb(233, 131, 5)",
 81 |   "boxShadowOverlay": "0px 12px 24px -4px rgba(37, 42, 49, 0.24), 0px 8px 60px 0px rgba(37, 42, 49, 0.32)",
 82 |   "colorTextTagSelected": "rgb(239, 242, 245)",
 83 |   "borderColorButtonSuccessBordered": "rgb(40, 161, 56)",
 84 |   "paletteOrangeDarkActive": "rgb(117, 58, 0)",
 85 |   "colorTextButtonPrimaryActive": "rgb(255, 255, 255)",
 86 |   "colorTextButtonLinkPrimary": "rgb(0, 169, 145)",
 87 |   "backgroundButtonFacebook": "rgb(59, 89, 152)",
 88 |   "widthBreakpointLargeMobile": 576,
 89 |   "borderColorButtonSecondaryBorderedHover": "rgb(24, 27, 32)",
 90 |   "paletteRedLightActive": "rgb(238, 185, 185)",
 91 |   "paddingTableCompact": "8px 12px",
 92 |   "colorTextAlertLink": "rgb(37, 42, 49)",
 93 |   "colorTextButtonGoogleBordered": "rgb(37, 42, 49)",
 94 |   "paddingLeftSelectPrefix": "48px",
 95 |   "heightRadioButton": "20px",
 96 |   "marginBottomSelectSuffix": "2px",
 97 |   "colorIconPrimary": "rgb(37, 42, 49)",
 98 |   "paletteCloudNormalActive": "rgb(202, 212, 222)",
 99 |   "backgroundTableShadowLeft": "linear-gradient(to left, transparent, rgba(186, 199, 213, 0.23))",
100 |   "widthRadioButton": "20px",
101 |   "colorTextButtonSuccessActive": "rgb(255, 255, 255)",
102 |   "borderColorCheckboxRadioError": "rgb(210, 28, 28)",
103 |   "colorIconSuccess": "rgb(40, 161, 56)",
104 |   "backgroundTagSelected": "rgb(37, 42, 49)",
105 |   "borderColorCard": "rgb(239, 242, 245)",
106 |   "colorTextButtonCriticalActive": "rgb(255, 255, 255)",
107 |   "heightIconSmall": "16px",
108 |   "colorTextButtonWhite": "rgb(37, 42, 49)",
109 |   "backgroundBadgeWarning": "rgb(253, 240, 227)",
110 |   "colorInfoCheckBoxRadio": "rgb(95, 115, 140)",
111 |   "fontWeightTableHead": "700",
112 |   "paletteBlueLightActive": "rgb(180, 219, 248)",
113 |   "borderColorCheckboxRadioActive": "rgb(37, 42, 49)",
114 |   "boxShadowActionActive": "0px 1px 4px 0px rgba(37, 42, 49, 0.16), 0px 4px 8px 0px rgba(37, 42, 49, 0.12)",
115 |   "lineHeightHeading": "1.2",
116 |   "fontWeightHeadingDisplay": "700",
117 |   "borderColorInputErrorHover": "rgb(185, 25, 25)",
118 |   "widthIconSmall": "16px",
119 |   "paletteProductLightActive": "rgb(192, 232, 228)",
120 |   "borderColorButtonInfoBorderedActive": "rgb(1, 80, 142)",
121 |   "backgroundButtonPrimaryActive": "rgb(0, 143, 123)",
122 |   "backgroundTooltipLargeMobile": "rgb(0, 90, 163)",
123 |   "fontSizeHeadingDisplaySubtitle": "22px",
124 |   "lineHeightText": "1.4",
125 |   "backgroundButtonSecondaryHover": "rgb(220, 227, 233)",
126 |   "backgroundButtonLinkPrimary": "transparent",
127 |   "backgroundButtonWhiteBorderedHover": "rgba(255, 255, 255, 0.2)",
128 |   "paddingTagWithIcon": "6px 8px 6px 6px",
129 |   "colorTextButtonFacebook": "rgb(255, 255, 255)",
130 |   "borderWidthInputFocus": "2px",
131 |   "colorTextBadgeDark": "rgb(255, 255, 255)",
132 |   "borderColorInputHover": "rgb(166, 182, 200)",
133 |   "paddingTag": "6px 8px",
134 |   "colorTextBadgeWarning": "rgb(233, 131, 5)",
135 |   "backgroundButtonWhite": "rgb(255, 255, 255)",
136 |   "spaceXLarge": "32px",
137 |   "zIndexDefault": "1",
138 |   "backgroundButtonSuccessActive": "rgb(29, 114, 40)",
139 |   "boxShadowFixed": "0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px 2px 4px 0px rgba(37, 42, 49, 0.12)",
140 |   "widthCheckbox": "20px",
141 |   "colorTextButtonFacebookBorderedHover": "rgb(56, 84, 144)",
142 |   "borderColorButtonCriticalBorderedHover": "rgb(185, 25, 25)",
143 |   "spaceXXXLarge": "52px",
144 |   "fontSizeButtonNormal": "14px",
145 |   "borderRadiusSmall": "2px",
146 |   "paletteInkNormalHover": "rgb(24, 27, 32)",
147 |   "fontSizeTextSmall": "12px",
148 |   "colorTextLinkSecondary": "rgb(37, 42, 49)",
149 |   "colorIconInfo": "rgb(1, 114, 203)",
150 |   "paddingButtonNormal": "0 16px",
151 |   "opacityCheckboxDisabled": "0.5",
152 |   "heightInputNormal": "44px",
153 |   "heightCheckbox": "20px",
154 |   "borderColorButtonPrimaryBorderedActive": "rgb(0, 143, 123)",
155 |   "paddingButtonSmallWithLeftIcon": "0 12px 0 8px",
156 |   "colorTextTag": "rgb(37, 42, 49)",
157 |   "colorTextButtonFilledActive": "rgb(255, 255, 255)",
158 |   "colorTextButtonWhiteBorderedHover": "rgb(255, 255, 255)",
159 |   "borderWidthCard": "1px",
160 |   "paddingAlertWithIcon": "12px",
161 |   "colorTextButtonSecondaryHover": "rgb(24, 27, 32)",
162 |   "colorAlertIconWarning": "rgb(233, 131, 5)",
163 |   "paletteProductDark": "rgb(0, 127, 109)",
164 |   "paddingButtonNormalWithIcons": "0 12px",
165 |   "backgroundBadgeDark": "rgb(37, 42, 49)",
166 |   "paletteInkLight": "rgb(95, 115, 140)",
167 |   "paddingButtonSmallWithRightIcon": "0 8px 0 12px",
168 |   "modifierScaleButtonActive": 0.95,
169 |   "colorTextButtonWarningBorderedActive": "rgb(205, 115, 4)",
170 |   "paletteGreenDarker": "rgb(35, 92, 43)",
171 |   "borderColorButtonSuccessBorderedActive": "rgb(29, 114, 40)",
172 |   "fontSizeHeadingTitle1": "28px",
173 |   "paletteBlueDark": "rgb(0, 90, 163)",
174 |   "borderColorButtonWhiteBordered": "rgb(255, 255, 255)",
175 |   "colorTextButtonPrimaryBordered": "rgb(0, 169, 145)",
176 |   "modifierScaleCheckboxRadioActive": 0.95,
177 |   "colorTextAlertCritical": "rgb(151, 12, 12)",
178 |   "paddingAlert": "16px",
179 |   "paddingLoading": "12px",
180 |   "backgroundButtonBordered": "transparent",
181 |   "colorTextButtonSuccessBordered": "rgb(40, 161, 56)",
182 |   "paletteOrangeNormalHover": "rgb(220, 124, 5)",
183 |   "paletteOrangeDarker": "rgb(128, 63, 0)",
184 |   "paletteRedDark": "rgb(151, 12, 12)",
185 |   "colorTextButtonInfoHover": "rgb(255, 255, 255)",
186 |   "textDecorationTextLinkSecondaryHover": "none",
187 |   "colorTextButtonGoogleBorderedActive": "rgb(11, 12, 15)",
188 |   "colorTextButtonCriticalBordered": "rgb(210, 28, 28)",
189 |   "colorTextInputPrefix": "rgb(95, 115, 140)",
190 |   "colorTextWarning": "rgb(233, 131, 5)",
191 |   "heightIllustrationMedium": "200px",
192 |   "fontSizeHeadingTitle2": "22px",
193 |   "fontWeightBold": "700",
194 |   "colorTextButtonLinkPrimaryActive": "rgb(0, 143, 123)",
195 |   "backgroundTag": "rgb(245, 247, 249)",
196 |   "backgroundButtonFacebookActive": "rgb(53, 79, 136)",
197 |   "colorTextLoading": "rgb(186, 199, 213)",
198 |   "heightStopoverArrow": "7px",
199 |   "borderColorButtonGoogleBordered": "rgb(37, 42, 49)",
200 |   "backgroundTagSelectedActive": "rgb(11, 12, 15)",
201 |   "fontSizeInputSmall": "14px",
202 |   "colorFormLabel": "rgb(37, 42, 49)",
203 |   "colorIconRadioButtonDisabled": "rgb(186, 199, 213)",
204 |   "colorTextButtonWhiteActive": "rgb(11, 12, 15)",
205 |   "widthStopoverArrow": "36px",
206 |   "paletteOrangeLight": "rgb(253, 240, 227)",
207 |   "paletteGreenNormalHover": "rgb(35, 139, 49)",
208 |   "fontSizeHeadingTitle3": "16px",
209 |   "backgroundAlertCritical": "rgb(250, 234, 234)",
210 |   "widthModalNormal": "740px",
211 |   "widthBreakpointMediumMobile": 414,
212 |   "colorTextButtonFacebookActive": "rgb(255, 255, 255)",
213 |   "paletteGreenLight": "rgb(235, 244, 236)",
214 |   "paletteSocialFacebook": "rgb(59, 89, 152)",
215 |   "marginBadgeIcon": "0 4px 0 0",
216 |   "paletteSocialFacebookHover": "rgb(56, 84, 144)",
217 |   "paletteGreenLightHover": "rgb(215, 234, 217)",
218 |   "heightButtonSmall": "32px",
219 |   "marginButtonIconSmall": "8px",
220 |   "heightServiceLogoSmall": "12px",
221 |   "paddingInputSmall": "0 12px",
222 |   "borderRadiusCircle": "50%",
223 |   "paletteWhite": "rgb(255, 255, 255)",
224 |   "fontSizeHeadingTitle4": "14px",
225 |   "colorPlaceholderInputError": "rgb(210, 28, 28)",
226 |   "colorIconInput": "rgb(186, 199, 213)",
227 |   "backgroundButtonInfo": "rgb(1, 114, 203)",
228 |   "backgroundAlertWarning": "rgb(253, 240, 227)",
229 |   "colorIconTertiary": "rgb(186, 199, 213)",
230 |   "backgroundButtonInfoHover": "rgb(1, 97, 172)",
231 |   "backgroundBadgeSuccess": "rgb(235, 244, 236)",
232 |   "heightServiceLogoMedium": "24px",
233 |   "paletteWhiteHover": "rgb(245, 247, 249)",
234 |   "fontWeightNormal": "400",
235 |   "backgroundButtonLinkPrimaryActive": "rgb(214, 222, 230)",
236 |   "colorFormLabelFilled": "rgb(95, 115, 140)",
237 |   "paletteGreenNormal": "rgb(40, 161, 56)",
238 |   "lineHeightTextNormal": "20px",
239 |   "borderColorButtonGoogleBorderedHover": "rgb(24, 27, 32)",
240 |   "fontSizeHeadingTitle5": "12px",
241 |   "backgroundButtonWhiteActive": "rgb(229, 234, 239)",
242 |   "colorTextCritical": "rgb(210, 28, 28)",
243 |   "paletteOrangeLightHover": "rgb(250, 226, 199)",
244 |   "durationFast": "0.15s",
245 |   "colorTextButtonSuccessBorderedHover": "rgb(35, 139, 49)",
246 |   "backgroundTagHover": "rgb(229, 234, 239)",
247 |   "fontSizeHeadingDisplay": "40px",
248 |   "colorTextAlertWarning": "rgb(162, 81, 0)",
249 |   "textDecorationTextLinkSecondary": "underline",
250 |   "paddingButtonSmallWithIcons": "0 8px",
251 |   "colorTextBadgeSuccess": "rgb(40, 161, 56)",
252 |   "colorTextButtonInfo": "rgb(255, 255, 255)",
253 |   "paddingButtonNormalWithLeftIcon": "0 16px 0 12px",
254 |   "marginTopFormFeedback": "2px",
255 |   "paletteOrangeNormal": "rgb(233, 131, 5)",
256 |   "borderWidthInput": "1px",
257 |   "paletteCloudDark": "rgb(232, 237, 241)",
258 |   "paletteProductDarkActive": "rgb(0, 102, 87)",
259 |   "heightIllustrationSmall": "90px",
260 |   "colorStopoverArrow": "rgb(95, 115, 140)",
261 |   "heightInputGroupSeparatorNormal": "24px",
262 |   "colorTextButtonCriticalBorderedHover": "rgb(185, 25, 25)",
263 |   "paletteRedDarkHover": "rgb(137, 11, 11)",
264 |   "backgroundBody": "rgb(245, 247, 249)",
265 |   "backgroundButtonBorderedHover": "rgb(245, 247, 249)",
266 |   "colorTextButtonPrimaryBorderedHover": "rgb(0, 152, 130)",
267 |   "borderColorButtonWhiteBorderedHover": "rgb(255, 255, 255)",
268 |   "paletteBlueDarkHover": "rgb(0, 79, 143)",
269 |   "paletteBlueDarkActive": "rgb(0, 62, 112)",
270 |   "colorAlertIconCritical": "rgb(210, 28, 28)",
271 |   "paddingTagRemovableWithIcon": "6px",
272 |   "borderColorButtonWhiteBorderedActive": "rgb(255, 255, 255)",
273 |   "colorTextButtonPrimaryBorderedActive": "rgb(0, 143, 123)",
274 |   "backgroundButtonBorderedActive": "rgb(245, 247, 249)",
275 |   "colorIconRadioButton": "rgb(0, 169, 145)",
276 |   "paletteInkLightActive": "rgb(70, 85, 103)",
277 |   "paletteInkLightHover": "rgb(82, 100, 122)",
278 |   "colorAlertIconSuccess": "rgb(40, 161, 56)",
279 |   "paletteInkNormal": "rgb(37, 42, 49)",
280 |   "fontWeightLinks": "500",
281 |   "colorTextPrimary": "rgb(37, 42, 49)",
282 |   "backgroundBadgeNeutral": "rgb(245, 247, 249)",
283 |   "paddingTagRemovable": "6px 6px 6px 8px",
284 |   "colorTextButtonSecondary": "rgb(37, 42, 49)",
285 |   "colorTextButtonWhiteBordered": "rgb(255, 255, 255)",
286 |   "backgroundTagActive": "rgb(214, 222, 230)",
287 |   "paddingBadge": "0 8px",
288 |   "colorTextLinkSecondaryHover": "rgb(0, 169, 145)",
289 |   "colorTextButtonSuccessBorderedActive": "rgb(29, 114, 40)",
290 |   "paletteRedDarkActive": "rgb(109, 9, 9)",
291 |   "colorTextBadgeCritical": "rgb(210, 28, 28)",
292 |   "paddingTextareaNormal": "12px",
293 |   "colorTextButtonCriticalBorderedActive": "rgb(157, 21, 21)",
294 |   "paddingButtonWithoutText": "0",
295 |   "colorPlaceholderInputFileError": "rgb(210, 28, 28)",
296 |   "paletteProductDarkHover": "rgb(0, 112, 96)",
297 |   "backgroundServiceLogo": "transparent",
298 |   "fontFamily": "'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
299 |   "lineHeightHeadingDisplaySubtitle": "28px",
300 |   "backgroundButtonWhiteHover": "rgb(245, 247, 249)",
301 |   "borderColorButtonCriticalBordered": "rgb(210, 28, 28)",
302 |   "colorTextButtonFacebookBordered": "rgb(59, 89, 152)",
303 |   "borderColorButtonGoogleBorderedActive": "rgb(11, 12, 15)",
304 |   "lineHeightTextLarge": "22px",
305 |   "colorTextSuccess": "rgb(40, 161, 56)",
306 |   "borderColorInput": "rgb(186, 199, 213)",
307 |   "paletteOrangeLightActive": "rgb(248, 211, 171)",
308 |   "fontWeightHeadingTitle1": "700",
309 |   "colorHeadingInverted": "rgb(255, 255, 255)",
310 |   "paletteGreenLightActive": "rgb(195, 223, 199)",
311 |   "paletteSocialFacebookActive": "rgb(53, 79, 136)",
312 |   "backgroundBadgeCritical": "rgb(250, 234, 234)",
313 |   "backgroundBadgeWhite": "rgb(255, 255, 255)",
314 |   "backgroundCountryFlag": "transparent",
315 |   "colorTextButtonFacebookHover": "rgb(255, 255, 255)",
316 |   "backgroundButtonWhiteBordered": "transparent",
317 |   "widthModalLarge": "1280px",
318 |   "paletteWhiteActive": "rgb(229, 234, 239)",
319 |   "backgroundButtonSecondary": "rgb(232, 237, 241)",
320 |   "backgroundButtonInfoActive": "rgb(1, 80, 142)",
321 |   "backgroundButtonLinkPrimaryHover": "rgb(229, 234, 239)",
322 |   "widthIconMedium": "24px",
323 |   "colorTextBadgeNeutral": "rgb(37, 42, 49)",
324 |   "spaceXSmall": "8px",
325 |   "paletteGreenNormalActive": "rgb(29, 114, 40)",
326 |   "spaceXXLarge": "40px",
327 |   "fontWeightHeadingTitle2": "500",
328 |   "zIndexModal": "825",
329 |   "borderColorTagFocus": "rgb(1, 114, 203)",
330 |   "borderStyleCard": "solid",
331 |   "spaceXXXSmall": "2px",
332 |   "durationSlow": "0.4s",
333 |   "spaceLarge": "24px",
334 |   "heightIconMedium": "24px",
335 |   "borderColorInputError": "rgb(210, 28, 28)",
336 |   "backgroundCarrierLogo": "transparent",
337 |   "colorTextButtonWhiteHover": "rgb(24, 27, 32)",
338 |   "backgroundTooltip": "rgb(255, 255, 255)",
339 |   "backgroundTagSelectedHover": "rgb(24, 27, 32)",
340 |   "backgroundAlertSuccess": "rgb(235, 244, 236)",
341 |   "paddingInputFile": "0 0 0 6px",
342 |   "colorTextButtonLinkPrimaryHover": "rgb(0, 152, 130)",
343 |   "colorPlaceholderInputFile": "rgb(95, 115, 140)",
344 |   "fontWeightHeadingTitle3": "500",
345 |   "colorTextButtonInfoActive": "rgb(255, 255, 255)",
346 |   "colorTextBadgeWhite": "rgb(37, 42, 49)",
347 |   "borderColorButtonSecondaryBordered": "rgb(37, 42, 49)",
348 |   "paletteOrangeNormalActive": "rgb(205, 115, 4)",
349 |   "borderColorModal": "rgb(239, 242, 245)",
350 |   "colorTextButtonGoogleBorderedHover": "rgb(24, 27, 32)",
351 |   "colorTextInputDisabled": "rgb(186, 199, 213)",
352 |   "backgroundButtonFacebookHover": "rgb(56, 84, 144)",
353 |   "borderColorCheckboxRadioFocus": "rgb(1, 114, 203)",
354 |   "fontSizeMessage": "14px",
355 |   "fontWeightHeadingTitle4": "500",
356 |   "borderColorButtonSuccessBorderedHover": "rgb(35, 139, 49)",
357 |   "widthBadgeCircled": "24px",
358 |   "backgroundSeparator": "rgb(239, 242, 245)",
359 |   "colorTextButtonWarningBorderedHover": "rgb(220, 124, 5)",
360 |   "paletteProductDarker": "rgb(0, 92, 78)",
361 |   "borderColorTableHead": "rgb(186, 199, 213)",
362 |   "colorTextAlertSuccess": "rgb(43, 115, 54)",
363 |   "paddingButtonLargeWithRightIcon": "0 16px 0 28px",
364 |   "borderColorTable": "rgb(239, 242, 245)",
365 |   "widthBreakpointLargeDesktop": 1200,
366 |   "paletteBlueDarker": "rgb(0, 70, 128)",
367 |   "colorTextError": "rgb(210, 28, 28)",
368 |   "fontWeightHeadingTitle5": "700",
369 |   "colorTextButtonFilledHover": "rgb(255, 255, 255)",
370 |   "borderColorButtonPrimaryBorderedHover": "rgb(0, 152, 130)",
371 |   "backgroundInputDisabled": "rgb(239, 242, 245)",
372 |   "paletteInkNormalActive": "rgb(11, 12, 15)",
373 |   "heightInputLarge": "52px",
374 |   "paletteInkLighter": "rgb(186, 199, 213)",
375 |   "colorIconSecondary": "rgb(95, 115, 140)",
376 |   "paddingButtonLarge": "0 28px",
377 |   "colorTextButtonSecondaryActive": "rgb(11, 12, 15)",
378 |   "colorTextButtonLinkSecondary": "rgb(37, 42, 49)",
379 |   "colorTextLinkPrimary": "rgb(0, 127, 109)",
380 |   "colorTextButtonWhiteBorderedActive": "rgb(255, 255, 255)",
381 |   "colorIconCheckboxRadioDisabled": "rgb(186, 199, 213)",
382 |   "fontSizeButtonLarge": "16px",
383 |   "backgroundButtonGoogle": "rgb(245, 247, 249)",
384 |   "borderColorInputActive": "rgb(148, 168, 190)",
385 |   "opacityButtonDisabled": "0.3",
386 |   "backgroundButtonSuccessHover": "rgb(35, 139, 49)",
387 |   "borderColorTableCell": "rgb(186, 199, 213)",
388 |   "fontSizeFormFeedback": "12px",
389 |   "borderColorButtonCriticalBorderedActive": "rgb(157, 21, 21)",
390 |   "colorTextButtonFacebookBorderedActive": "rgb(53, 79, 136)",
391 |   "paletteRedDarker": "rgb(118, 9, 9)",
392 |   "colorTextWhite": "rgb(255, 255, 255)",
393 |   "boxShadowFixedReverse": "0px 0px 2px 0px rgba(37, 42, 49, 0.16), 0px -2px 4px 0px rgba(37, 42, 49, 0.12)",
394 |   "backgroundTableEven": "rgb(245, 247, 249)",
395 |   "backgroundButtonLinkSecondary": "transparent",
396 |   "borderColorButtonFacebookBordered": "rgb(59, 89, 152)",
397 |   "backgroundButtonPrimaryHover": "rgb(0, 152, 130)",
398 |   "colorTextInput": "rgb(37, 42, 49)",
399 |   "borderColorButtonInfoBorderedHover": "rgb(1, 97, 172)",
400 |   "colorTextButtonWarning": "rgb(255, 255, 255)",
401 |   "colorTextAlertInfo": "rgb(0, 90, 163)",
402 |   "paletteProductLightHover": "rgb(214, 240, 238)",
403 |   "backgroundButtonWhiteBorderedActive": "rgba(255, 255, 255, 0.2)",
404 |   "backgroundButtonSecondaryActive": "rgb(202, 212, 222)",
405 |   "colorPlaceholderInput": "rgb(186, 199, 213)",
406 |   "spaceMedium": "16px",
407 |   "colorTextButtonInfoBordered": "rgb(1, 114, 203)",
408 |   "heightCountryFlag": "auto",
409 |   "heightIconLarge": "32px",
410 |   "boxShadowButtonFocus": "0 0 4px 1px rgba(1, 114, 203, 0.3)",
411 |   "paletteBlueLightHover": "rgb(208, 233, 251)",
412 |   "borderColorCheckboxRadioHover": "rgb(95, 115, 140)",
413 |   "colorTextButtonCriticalHover": "rgb(255, 255, 255)",
414 |   "zIndexModalOverlay": "800",
415 |   "colorIconCritical": "rgb(210, 28, 28)",
416 |   "zIndexOnTheTop": "900",
417 |   "colorTextButtonSuccessHover": "rgb(255, 255, 255)",
418 |   "colorTextButtonGoogle": "rgb(37, 42, 49)",
419 |   "lineHeightHeadingDisplay": "44px",
420 |   "durationNormal": "0.3s",
421 |   "paletteCloudNormalHover": "rgb(220, 227, 233)",
422 |   "paletteProductNormal": "rgb(0, 169, 145)",
423 |   "borderColorButtonSecondaryBorderedActive": "rgb(11, 12, 15)",
424 |   "paletteCloudLight": "rgb(245, 247, 249)",
425 |   "colorIconCheckboxRadio": "rgb(0, 169, 145)",
426 |   "paddingTextareaSmall": "8px 12px",
427 |   "backgroundTableShadowRight": "linear-gradient(to right, transparent, rgba(186, 199, 213, 0.23))",
428 |   "backgroundButtonWarning": "rgb(233, 131, 5)",
429 |   "backgroundTableHover": "rgb(239, 242, 245)",
430 |   "fontWeightMedium": "500",
431 |   "paddingButtonLargeWithIcons": "0 16px",
432 |   "widthCountryFlag": "24px",
433 |   "paletteRedLightHover": "rgb(244, 210, 210)",
434 |   "backgroundAlertInfo": "rgb(232, 244, 253)",
435 |   "paletteBlueNormal": "rgb(1, 114, 203)",
436 |   "heightBadge": "24px",
437 |   "widthIconLarge": "32px",
438 |   "backgroundInput": "rgb(255, 255, 255)",
439 |   "colorTextButtonPrimaryHover": "rgb(255, 255, 255)",
440 |   "paletteRedNormal": "rgb(210, 28, 28)",
441 |   "paletteOrangeDarkHover": "rgb(143, 71, 0)",
442 |   "colorTextButtonSecondaryBordered": "rgb(37, 42, 49)",
443 |   "borderRadiusLarge": "6px",
444 |   "paddingTable": "12px 16px",
445 |   "backgroundButtonCriticalHover": "rgb(185, 25, 25)",
446 |   "widthBreakpointTablet": 768,
447 |   "colorTextButtonLinkSecondaryActive": "rgb(11, 12, 15)",
448 |   "paletteGreenDark": "rgb(43, 115, 54)",
449 |   "backgroundCard": "rgb(255, 255, 255)",
450 |   "heightSeparator": "1px",
451 |   "borderColorButtonWarningBordered": "rgb(233, 131, 5)",
452 |   "backgroundIllustration": "transparent",
453 |   "heightInputGroupSeparatorSmall": "16px",
454 |   "textDecorationTextLinkPrimary": "underline",
455 |   "textDecorationTextLinkPrimaryHover": "none",
456 |   "borderColorButtonWarningBorderedHover": "rgb(220, 124, 5)",
457 |   "paddingButtonLargeWithLeftIcon": "0 28px 0 16px",
458 |   "colorTextTable": "rgb(95, 115, 140)",
459 |   "opacityRadioButtonDisabled": "0.5",
460 |   "paletteGreenDarkHover": "rgb(37, 100, 47)",
461 |   "fontSizeTextLarge": "16px",
462 |   "paletteInkLighterActive": "rgb(148, 168, 190)",
463 |   "colorTextInfo": "rgb(1, 114, 203)",
464 |   "backgroundButtonGoogleActive": "rgb(214, 222, 230)",
465 |   "boxShadowRaisedReverse": "0px -4px 8px 0px rgba(37, 42, 49, 0.16), 0px -8px 24px 0px rgba(37, 42, 49, 0.24)",
466 |   "fontWeightHeadingDisplaySubtitle": "400",
467 |   "colorHeading": "rgb(37, 42, 49)",
468 |   "backgroundButtonCritical": "rgb(210, 28, 28)",
469 |   "backgroundModal": "rgb(255, 255, 255)",
470 |   "colorTextButtonSecondaryBorderedHover": "rgb(24, 27, 32)",
471 |   "paletteRedNormalHover": "rgb(185, 25, 25)",
472 |   "paletteOrangeDark": "rgb(162, 81, 0)",
473 |   "lineHeightTextSmall": "16px",
474 |   "marginButtonGroup": "0 1px 0 0"
475 | }


--------------------------------------------------------------------------------