@griddo/ax 11.10.11-rc.0 → 11.10.12-rc.0

package/src/themes/theme.json

@@ -1,372 +1,372 @@
 {
-  "id": "cms-theme",
-  "radii": {
-    "xs": "2px",
-    "s": "4px",
-    "m": "8px"
-  },
-  "spacing": {
-    "xxs": "4px",
-    "xs": "8px",
-    "s": "16px",
-    "m": "24px",
-    "l": "48px",
-    "xl": "64px"
-  },
-  "fontWeight": {
-    "regular": "400",
-    "semibold": "600",
-    "bold": "700",
-    "black": "900"
-  },
-  "fontFamily": {
-    "fontFamilies": {
-      "primary": "'Source Sans Pro', sans-serif",
-      "secondary": "Work Sans",
-      "mono": "monospace"
-    }
-  },
-  "color": {
-    "description": "Magma Colors Theme File",
-    "colors": {
-      "uiBackground01": {
-        "description": "",
-        "value": "#F3F3F7"
-      },
-      "uiBackground02": {
-        "description": "",
-        "value": "#FFFFFF"
-      },
-      "uiBackground03": {
-        "description": "",
-        "value": "#E6E7F8"
-      },
-      "uiBackground04": {
-        "description": "",
-        "value": "#20224C"
-      },
-      "uiBarBackground": {
-        "description": "",
-        "value": "#FFFFFF"
-      },
-      "uiSiteMenu": {
-        "description": "",
-        "value": "#5057FF"
-      },
-      "uiSiteMenuDark": {
-        "description": "",
-        "value": "#464DE0"
-      },
-      "uiMainMenuBackground": {
-        "description": "",
-        "value": "#20224C"
-      },
-      "uiMainMenuBackgroundDark": {
-        "description": "",
-        "value": "#1A1B3D"
-      },
-      "uiSnackbarSurface": {
-        "description": "",
-        "type": "RGB",
-        "value": ["80", "87", "255"],
-        "opacity": "0.08"
-      },
-      "textHighEmphasis": {
-        "description": "",
-        "value": "#20224C"
-      },
-      "textMediumEmphasis": {
-        "description": "Text color for paragraphs",
-        "type": "RGB",
-        "value": ["32", "34", "76"],
-        "opacity": "0.6"
-      },
-      "textLowEmphasis": {
-        "description": "Disabled text or placeholders",
-        "type": "RGB",
-        "value": ["32", "34", "76"],
-        "opacity": "0.4"
-      },
-      "textHighEmphasisInverse": {
-        "description": "Text color for headers and high emphasis",
-        "value": "#ffffff"
-      },
-      "textMediumEmphasisInverse": {
-        "description": "Text color for paragraphs",
-        "type": "RGB",
-        "value": ["255", "255", "255"],
-        "opacity": "0.7"
-      },
-      "textLowEmphasisInverse": {
-        "description": "",
-        "type": "RGB",
-        "value": ["255", "255", "255"],
-        "opacity": "0.5"
-      },
-      "iconHighEmphasis": {
-        "description": "Default color for icons",
-        "value": "#20224C"
-      },
-      "iconMediumEmphasis": {
-        "description": "Icon color for non hightlighted concepts",
-        "type": "RGB",
-        "value": ["32", "34", "76"],
-        "opacity": "0.6"
-      },
-      "iconNonActive": {
-        "description": "Icon color for no active concepts",
-        "type": "RGB",
-        "value": ["32", "34", "76"],
-        "opacity": "0.2"
-      },
-      "iconHighEmphasisInverse": {
-        "description": "Icon color inverse",
-        "value": "#ffffff"
-      },
-      "iconMediumEmphasisInverse": {
-        "description": "Icon medium emphasis inverse",
-        "type": "RGB",
-        "value": ["255", "255", "255"],
-        "opacity": "0.7"
-      },
-      "iconLowEmphasisInverse": {
-        "description": "Icon medium emphasis inverse",
-        "type": "RGB",
-        "value": ["255", "255", "255"],
-        "opacity": "0.5"
-      },
-      "uiLine": {
-        "description": "Lines",
-        "value": "#DBDDE9"
-      },
-      "uiLineInverse": {
-        "description": "Lines over dark background",
-        "type": "RGB",
-        "value": ["219", "221", "233"],
-        "opacity": "0.3"
-      },
-      "interactive01": {
-        "description": "Text in text buttons, and background in filled",
-        "value": "#5057FF"
-      },
-      "interactiveInactive": {
-        "description": "Inactive element ",
-        "value": "#20224C"
-      },
-      "interactiveDisabled": {
-        "description": "Disabled components",
-        "value": "#C7C8D0"
-      },
-      "interactive02": {
-        "description": "Focus, hover with interactive",
-        "value": "#FFBB37"
-      },
-      "interactiveBackground": {
-        "description": "Backgrounds",
-        "value": "#FFFFFF"
-      },
-      "interactiveInverse": {
-        "description": "Text in text buttons, and background in filled",
-        "value": "#FFFFFF"
-      },
-      "overlay": {
-        "description": "overlay color over dark color",
-        "type": "RGB",
-        "value": ["32", "34", "76"],
-        "opacity": "0.5"
-      },
-      "overlayFocusDark": {
-        "description": "Focus overlay color over dark color",
-        "type": "RGB",
-        "value": ["0", "0", "0"],
-        "opacity": "0.12"
-      },
-      "overlayHoverDark": {
-        "description": "Hover overlay color over dark color",
-        "type": "RGB",
-        "value": ["0", "0", "0"],
-        "opacity": "0.12"
-      },
-      "overlayPressedDark": {
-        "description": "Pressed overlay color over dark color",
-        "type": "RGB",
-        "value": ["0", "0", "0"],
-        "opacity": "0.2"
-      },
-      "overlayFocusPrimary": {
-        "description": "Focus overlay default over clear backgrounds",
-        "type": "RGB",
-        "value": ["80", "87", "255"],
-        "opacity": "0.12"
-      },
-      "overlayHoverPrimary": {
-        "description": "Hover overlay color. Used default and over clear backgrounds.",
-        "type": "RGB",
-        "value": ["80", "87", "255"],
-        "opacity": "0.06"
-      },
-      "overlayPressedPrimary": {
-        "description": "Pressed overlay color. Used default and over clear backgrounds.",
-        "type": "RGB",
-        "value": ["80", "87", "255"],
-        "opacity": "0.16"
-      },
-      "error": {
-        "description": "Error warnings",
-        "value": "#df6161"
-      },
-      "info": {
-        "description": "Info notifications",
-        "value": "#50abff"
-      },
-      "online": {
-        "description": "Online state",
-        "value": "#afc628"
-      },
-      "warning": {
-        "description": "warning modified",
-        "value": "#ffbb37"
-      }
-    }
-  },
-  "textStyle": {
-    "defaultStyles": {
-      "fontWeight": 400,
-      "lineHeight": "20px",
-      "fontSize": "16px"
-    },
-    "textStyles": [
-      {
-        "name": "headingL",
-        "fontWeight": 700,
-        "fontSize": "35px",
-        "lineHeight": "44px"
-      },
-      {
-        "name": "headingM",
-        "fontWeight": 700,
-        "fontSize": "20px",
-        "lineHeight": "25px"
-      },
-      {
-        "name": "headingS",
-        "fontWeight": 400,
-        "fontSize": "20px",
-        "lineHeight": "25px",
-        "letterSpacing": "0.15px"
-      },
-      {
-        "name": "headingXS",
-        "fontWeight": 600,
-        "fontSize": "14px",
-        "lineHeight": "18px",
-        "textTransform": "uppercase"
-      },
-      {
-        "name": "headingXXS",
-        "fontWeight": 600,
-        "fontSize": "12px",
-        "lineHeight": "15px",
-        "letterSpacing": "2.5px",
-        "textTransform": "uppercase"
-      },
-      {
-        "name": "uiL",
-        "fontWeight": 600,
-        "fontSize": "16px",
-        "lineHeight": "20px"
-      },
-      {
-        "name": "uiM",
-        "fontWeight": 400,
-        "fontSize": "15px",
-        "lineHeight": "19px"
-      },
-      {
-        "name": "uiMSemibold",
-        "fontWeight": 600,
-        "fontSize": "15px",
-        "lineHeight": "19px"
-      },
-      {
-        "name": "uiS",
-        "fontWeight": 600,
-        "fontSize": "14px",
-        "lineHeight": "18px"
-      },
-      {
-        "name": "uiXS",
-        "fontWeight": 500,
-        "fontSize": "12px",
-        "lineHeight": "15px"
-      },
-      {
-        "name": "uiButton",
-        "fontWeight": 700,
-        "fontSize": "13px",
-        "lineHeight": "16px",
-        "letterSpacing": "0.75px",
-        "textTransform": "uppercase"
-      },
-      {
-        "name": "fieldContent",
-        "fontWeight": 400,
-        "fontSize": "16px",
-        "lineHeight": "20px"
-      },
-      {
-        "name": "fieldLabel",
-        "fontWeight": 600,
-        "fontSize": "14px",
-        "lineHeight": "18px"
-      }
-    ]
-  },
-  "shadow": {
-    "description": "",
-    "shadows": {
-      "shadowS": {
-        "x": 2,
-        "y": 2,
-        "blur": 6,
-        "color": "#22224c",
-        "opacity": 0.08
-      },
-      "shadowM": {
-        "x": 0,
-        "y": 6,
-        "blur": 6,
-        "color": "#22224c",
-        "opacity": 0.08
-      },
-      "shadowL": {
-        "x": 6,
-        "y": 6,
-        "blur": 20,
-        "color": "#22224c",
-        "opacity": 0.25
-      },
-      "shadowXL": {
-        "x": 35,
-        "y": 35,
-        "blur": 60,
-        "color": "#22224c",
-        "opacity": 0.19
-      },
-      "leftPanel": {
-        "x": 6,
-        "y": 6,
-        "blur": 20,
-        "color": "#22224c",
-        "opacity": 0.1
-      },
-      "rightPanel": {
-        "x": -6,
-        "y": 6,
-        "blur": 20,
-        "color": "#22224c",
-        "opacity": 0.1
-      }
-    }
-  }
+	"id": "cms-theme",
+	"radii": {
+		"xs": "2px",
+		"s": "4px",
+		"m": "8px"
+	},
+	"spacing": {
+		"xxs": "4px",
+		"xs": "8px",
+		"s": "16px",
+		"m": "24px",
+		"l": "48px",
+		"xl": "64px"
+	},
+	"fontWeight": {
+		"regular": "400",
+		"semibold": "600",
+		"bold": "700",
+		"black": "900"
+	},
+	"fontFamily": {
+		"fontFamilies": {
+			"primary": "'Source Sans Pro', sans-serif",
+			"secondary": "Work Sans",
+			"mono": "monospace"
+		}
+	},
+	"color": {
+		"description": "Magma Colors Theme File",
+		"colors": {
+			"uiBackground01": {
+				"description": "",
+				"value": "#F3F3F7"
+			},
+			"uiBackground02": {
+				"description": "",
+				"value": "#FFFFFF"
+			},
+			"uiBackground03": {
+				"description": "",
+				"value": "#E6E7F8"
+			},
+			"uiBackground04": {
+				"description": "",
+				"value": "#20224C"
+			},
+			"uiBarBackground": {
+				"description": "",
+				"value": "#FFFFFF"
+			},
+			"uiSiteMenu": {
+				"description": "",
+				"value": "#5057FF"
+			},
+			"uiSiteMenuDark": {
+				"description": "",
+				"value": "#464DE0"
+			},
+			"uiMainMenuBackground": {
+				"description": "",
+				"value": "#20224C"
+			},
+			"uiMainMenuBackgroundDark": {
+				"description": "",
+				"value": "#1A1B3D"
+			},
+			"uiSnackbarSurface": {
+				"description": "",
+				"type": "RGB",
+				"value": ["80", "87", "255"],
+				"opacity": "0.08"
+			},
+			"textHighEmphasis": {
+				"description": "",
+				"value": "#20224C"
+			},
+			"textMediumEmphasis": {
+				"description": "Text color for paragraphs",
+				"type": "RGB",
+				"value": ["32", "34", "76"],
+				"opacity": "0.6"
+			},
+			"textLowEmphasis": {
+				"description": "Disabled text or placeholders",
+				"type": "RGB",
+				"value": ["32", "34", "76"],
+				"opacity": "0.4"
+			},
+			"textHighEmphasisInverse": {
+				"description": "Text color for headers and high emphasis",
+				"value": "#ffffff"
+			},
+			"textMediumEmphasisInverse": {
+				"description": "Text color for paragraphs",
+				"type": "RGB",
+				"value": ["255", "255", "255"],
+				"opacity": "0.7"
+			},
+			"textLowEmphasisInverse": {
+				"description": "",
+				"type": "RGB",
+				"value": ["255", "255", "255"],
+				"opacity": "0.5"
+			},
+			"iconHighEmphasis": {
+				"description": "Default color for icons",
+				"value": "#20224C"
+			},
+			"iconMediumEmphasis": {
+				"description": "Icon color for non hightlighted concepts",
+				"type": "RGB",
+				"value": ["32", "34", "76"],
+				"opacity": "0.6"
+			},
+			"iconNonActive": {
+				"description": "Icon color for no active concepts",
+				"type": "RGB",
+				"value": ["32", "34", "76"],
+				"opacity": "0.2"
+			},
+			"iconHighEmphasisInverse": {
+				"description": "Icon color inverse",
+				"value": "#ffffff"
+			},
+			"iconMediumEmphasisInverse": {
+				"description": "Icon medium emphasis inverse",
+				"type": "RGB",
+				"value": ["255", "255", "255"],
+				"opacity": "0.7"
+			},
+			"iconLowEmphasisInverse": {
+				"description": "Icon medium emphasis inverse",
+				"type": "RGB",
+				"value": ["255", "255", "255"],
+				"opacity": "0.5"
+			},
+			"uiLine": {
+				"description": "Lines",
+				"value": "#DBDDE9"
+			},
+			"uiLineInverse": {
+				"description": "Lines over dark background",
+				"type": "RGB",
+				"value": ["219", "221", "233"],
+				"opacity": "0.3"
+			},
+			"interactive01": {
+				"description": "Text in text buttons, and background in filled",
+				"value": "#5057FF"
+			},
+			"interactiveInactive": {
+				"description": "Inactive element ",
+				"value": "#20224C"
+			},
+			"interactiveDisabled": {
+				"description": "Disabled components",
+				"value": "#C7C8D0"
+			},
+			"interactive02": {
+				"description": "Focus, hover with interactive",
+				"value": "#FFBB37"
+			},
+			"interactiveBackground": {
+				"description": "Backgrounds",
+				"value": "#FFFFFF"
+			},
+			"interactiveInverse": {
+				"description": "Text in text buttons, and background in filled",
+				"value": "#FFFFFF"
+			},
+			"overlay": {
+				"description": "overlay color over dark color",
+				"type": "RGB",
+				"value": ["32", "34", "76"],
+				"opacity": "0.5"
+			},
+			"overlayFocusDark": {
+				"description": "Focus overlay color over dark color",
+				"type": "RGB",
+				"value": ["0", "0", "0"],
+				"opacity": "0.12"
+			},
+			"overlayHoverDark": {
+				"description": "Hover overlay color over dark color",
+				"type": "RGB",
+				"value": ["0", "0", "0"],
+				"opacity": "0.12"
+			},
+			"overlayPressedDark": {
+				"description": "Pressed overlay color over dark color",
+				"type": "RGB",
+				"value": ["0", "0", "0"],
+				"opacity": "0.2"
+			},
+			"overlayFocusPrimary": {
+				"description": "Focus overlay default over clear backgrounds",
+				"type": "RGB",
+				"value": ["80", "87", "255"],
+				"opacity": "0.12"
+			},
+			"overlayHoverPrimary": {
+				"description": "Hover overlay color. Used default and over clear backgrounds.",
+				"type": "RGB",
+				"value": ["80", "87", "255"],
+				"opacity": "0.06"
+			},
+			"overlayPressedPrimary": {
+				"description": "Pressed overlay color. Used default and over clear backgrounds.",
+				"type": "RGB",
+				"value": ["80", "87", "255"],
+				"opacity": "0.16"
+			},
+			"error": {
+				"description": "Error warnings",
+				"value": "#df6161"
+			},
+			"info": {
+				"description": "Info notifications",
+				"value": "#50abff"
+			},
+			"online": {
+				"description": "Online state",
+				"value": "#afc628"
+			},
+			"warning": {
+				"description": "warning modified",
+				"value": "#ffbb37"
+			}
+		}
+	},
+	"textStyle": {
+		"defaultStyles": {
+			"fontWeight": 400,
+			"lineHeight": "20px",
+			"fontSize": "16px"
+		},
+		"textStyles": [
+			{
+				"name": "headingL",
+				"fontWeight": 700,
+				"fontSize": "35px",
+				"lineHeight": "44px"
+			},
+			{
+				"name": "headingM",
+				"fontWeight": 700,
+				"fontSize": "20px",
+				"lineHeight": "25px"
+			},
+			{
+				"name": "headingS",
+				"fontWeight": 400,
+				"fontSize": "20px",
+				"lineHeight": "25px",
+				"letterSpacing": "0.15px"
+			},
+			{
+				"name": "headingXS",
+				"fontWeight": 600,
+				"fontSize": "14px",
+				"lineHeight": "18px",
+				"textTransform": "uppercase"
+			},
+			{
+				"name": "headingXXS",
+				"fontWeight": 600,
+				"fontSize": "12px",
+				"lineHeight": "15px",
+				"letterSpacing": "2.5px",
+				"textTransform": "uppercase"
+			},
+			{
+				"name": "uiL",
+				"fontWeight": 600,
+				"fontSize": "16px",
+				"lineHeight": "20px"
+			},
+			{
+				"name": "uiM",
+				"fontWeight": 400,
+				"fontSize": "15px",
+				"lineHeight": "19px"
+			},
+			{
+				"name": "uiMSemibold",
+				"fontWeight": 600,
+				"fontSize": "15px",
+				"lineHeight": "19px"
+			},
+			{
+				"name": "uiS",
+				"fontWeight": 600,
+				"fontSize": "14px",
+				"lineHeight": "18px"
+			},
+			{
+				"name": "uiXS",
+				"fontWeight": 500,
+				"fontSize": "12px",
+				"lineHeight": "15px"
+			},
+			{
+				"name": "uiButton",
+				"fontWeight": 700,
+				"fontSize": "13px",
+				"lineHeight": "16px",
+				"letterSpacing": "0.75px",
+				"textTransform": "uppercase"
+			},
+			{
+				"name": "fieldContent",
+				"fontWeight": 400,
+				"fontSize": "16px",
+				"lineHeight": "20px"
+			},
+			{
+				"name": "fieldLabel",
+				"fontWeight": 600,
+				"fontSize": "14px",
+				"lineHeight": "18px"
+			}
+		]
+	},
+	"shadow": {
+		"description": "",
+		"shadows": {
+			"shadowS": {
+				"x": 2,
+				"y": 2,
+				"blur": 6,
+				"color": "#22224c",
+				"opacity": 0.08
+			},
+			"shadowM": {
+				"x": 0,
+				"y": 6,
+				"blur": 6,
+				"color": "#22224c",
+				"opacity": 0.08
+			},
+			"shadowL": {
+				"x": 6,
+				"y": 6,
+				"blur": 20,
+				"color": "#22224c",
+				"opacity": 0.25
+			},
+			"shadowXL": {
+				"x": 35,
+				"y": 35,
+				"blur": 60,
+				"color": "#22224c",
+				"opacity": 0.19
+			},
+			"leftPanel": {
+				"x": 6,
+				"y": 6,
+				"blur": 20,
+				"color": "#22224c",
+				"opacity": 0.1
+			},
+			"rightPanel": {
+				"x": -6,
+				"y": 6,
+				"blur": 20,
+				"color": "#22224c",
+				"opacity": 0.1
+			}
+		}
+	}
 }