apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Chore: Generate JSON theme files (#48762)

Browse Source
pull/48768/head
Josh Hunt 3 years ago committed by GitHub
parent af57804513
commit 32a26d87a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 1905 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 946
      public/sass/theme.dark.generated.json
  2. 946
      public/sass/theme.light.generated.json
  3. 13
      scripts/cli/generateSassVariableFiles.ts

946
public/sass/theme.dark.generated.json
Unescape View File

@ -0,0 +1,946 @@
{
"name": "Dark",
"isDark": true,
"isLight": false,
"colors": {
"mode": "dark",
"whiteBase": "204, 204, 220",
"border": {
"weak": "rgba(204, 204, 220, 0.07)",
"medium": "rgba(204, 204, 220, 0.15)",
"strong": "rgba(204, 204, 220, 0.25)"
},
"text": {
"primary": "rgb(204, 204, 220)",
"secondary": "rgba(204, 204, 220, 0.65)",
"disabled": "rgba(204, 204, 220, 0.6)",
"link": "#6E9FFF",
"maxContrast": "#FFFFFF"
},
"primary": {
"main": "#3D71D9",
"text": "#6E9FFF",
"border": "#6E9FFF",
"name": "primary",
"shade": "rgb(90, 134, 222)",
"transparent": "#3D71D926",
"contrastText": "#FFFFFF"
},
"secondary": {
"main": "rgba(204, 204, 220, 0.16)",
"shade": "rgba(204, 204, 220, 0.20)",
"text": "rgb(204, 204, 220)",
"contrastText": "rgb(204, 204, 220)",
"border": "rgba(204, 204, 220, 0.25)",
"name": "secondary",
"transparent": "rgba(204, 204, 220, 0.15)"
},
"info": {
"main": "#3D71D9",
"text": "#6E9FFF",
"border": "#6E9FFF",
"name": "info",
"shade": "rgb(90, 134, 222)",
"transparent": "#3D71D926",
"contrastText": "#FFFFFF"
},
"error": {
"main": "#D10E5C",
"text": "#FF5286",
"name": "error",
"border": "#FF5286",
"shade": "rgb(215, 50, 116)",
"transparent": "#D10E5C26",
"contrastText": "#FFFFFF"
},
"success": {
"main": "#1A7F4B",
"text": "#6CCF8E",
"name": "success",
"border": "#6CCF8E",
"shade": "rgb(60, 146, 102)",
"transparent": "#1A7F4B26",
"contrastText": "#FFFFFF"
},
"warning": {
"main": "#F5B73D",
"text": "#F8D06B",
"name": "warning",
"border": "#F8D06B",
"shade": "rgb(246, 193, 90)",
"transparent": "#F5B73D26",
"contrastText": "#000000"
},
"background": {
"canvas": "#111217",
"primary": "#181b1f",
"secondary": "#22252b"
},
"action": {
"hover": "rgba(204, 204, 220, 0.16)",
"selected": "rgba(204, 204, 220, 0.12)",
"focus": "rgba(204, 204, 220, 0.16)",
"hoverOpacity": 0.08,
"disabledText": "rgba(204, 204, 220, 0.6)",
"disabledBackground": "rgba(204, 204, 220, 0.04)",
"disabledOpacity": 0.38
},
"gradients": {
"brandHorizontal": " linear-gradient(270deg, #F55F3E 0%, #FF8833 100%);",
"brandVertical": "linear-gradient(0.01deg, #F55F3E 0.01%, #FF8833 99.99%);"
},
"contrastThreshold": 3,
"hoverFactor": 0.03,
"tonalOffset": 0.15
},
"breakpoints": {
"values": {
"xs": 0,
"sm": 544,
"md": 769,
"lg": 992,
"xl": 1200,
"xxl": 1440
},
"keys": ["xs", "sm", "md", "lg", "xl", "xxl"],
"unit": "px"
},
"shape": {},
"components": {
"height": {
"sm": 3,
"md": 4,
"lg": 6
},
"input": {
"borderColor": "rgba(204, 204, 220, 0.15)",
"borderHover": "rgba(204, 204, 220, 0.25)",
"text": "rgb(204, 204, 220)",
"background": "#111217"
},
"panel": {
"padding": 1,
"headerHeight": 4,
"background": "#181b1f",
"borderColor": "rgba(204, 204, 220, 0.07)",
"boxShadow": "none"
},
"dropdown": {
"background": "#111217"
},
"tooltip": {
"background": "#35383e",
"text": "rgb(204, 204, 220)"
},
"dashboard": {
"background": "#111217",
"padding": 1
},
"overlay": {
"background": "rgba(63, 62, 62, 0.45)"
},
"sidemenu": {
"width": 48
}
},
"typography": {
"htmlFontSize": 14,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontFamilyMonospace": "'Roboto Mono', monospace",
"fontSize": 14,
"fontWeightLight": 300,
"fontWeightRegular": 400,
"fontWeightMedium": 500,
"fontWeightBold": 500,
"size": {
"base": "14px",
"xs": "10px",
"sm": "12px",
"md": "14px",
"lg": "18px"
},
"h1": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 300,
"fontSize": "2rem",
"lineHeight": 1.167,
"letterSpacing": "-0.00893em"
},
"h2": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 300,
"fontSize": "1.7142857142857142rem",
"lineHeight": 1.2,
"letterSpacing": "0em"
},
"h3": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 400,
"fontSize": "1.5rem",
"lineHeight": 1.167,
"letterSpacing": "0em"
},
"h4": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 400,
"fontSize": "1.2857142857142858rem",
"lineHeight": 1.235,
"letterSpacing": "0.01389em"
},
"h5": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 400,
"fontSize": "1.1428571428571428rem",
"lineHeight": 1.334,
"letterSpacing": "0em"
},
"h6": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 500,
"fontSize": "1rem",
"lineHeight": 1.6,
"letterSpacing": "0.01071em"
},
"body": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 400,
"fontSize": "1rem",
"lineHeight": 1.5,
"letterSpacing": "0.01071em"
},
"bodySmall": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 400,
"fontSize": "0.8571428571428571rem",
"lineHeight": 1.5,
"letterSpacing": "0.0125em"
}
},
"shadows": {
"z1": "0px 1px 2px rgba(24, 26, 27, 0.75)",
"z2": "0px 4px 8px rgba(24, 26, 27, 0.75)",
"z3": "0px 8px 24px rgb(1,4,9)"
},
"transitions": {
"duration": {
"shortest": 150,
"shorter": 200,
"short": 250,
"standard": 300,
"complex": 375,
"enteringScreen": 225,
"leavingScreen": 195
},
"easing": {
"easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
"easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
"easeIn": "cubic-bezier(0.4, 0, 1, 1)",
"sharp": "cubic-bezier(0.4, 0, 0.6, 1)"
}
},
"visualization": {
"hues": [
{
"name": "red",
"shades": [
{
"color": "#FFA6B0",
"name": "super-light-red"
},
{
"color": "#FF7383",
"name": "light-red"
},
{
"color": "#F2495C",
"name": "red",
"primary": true
},
{
"color": "#E02F44",
"name": "semi-dark-red"
},
{
"color": "#C4162A",
"name": "dark-red"
}
]
},
{
"name": "orange",
"shades": [
{
"color": "#FFCB7D",
"name": "super-light-orange",
"aliases": []
},
{
"color": "#FFB357",
"name": "light-orange",
"aliases": []
},
{
"color": "#FF9830",
"name": "orange",
"aliases": [],
"primary": true
},
{
"color": "#FF780A",
"name": "semi-dark-orange",
"aliases": []
},
{
"color": "#FA6400",
"name": "dark-orange",
"aliases": []
}
]
},
{
"name": "yellow",
"shades": [
{
"color": "#FFF899",
"name": "super-light-yellow",
"aliases": []
},
{
"color": "#FFEE52",
"name": "light-yellow",
"aliases": []
},
{
"color": "#FADE2A",
"name": "yellow",
"aliases": [],
"primary": true
},
{
"color": "#F2CC0C",
"name": "semi-dark-yellow",
"aliases": []
},
{
"color": "#E0B400",
"name": "dark-yellow",
"aliases": []
}
]
},
{
"name": "green",
"shades": [
{
"color": "#C8F2C2",
"name": "super-light-green",
"aliases": []
},
{
"color": "#96D98D",
"name": "light-green",
"aliases": []
},
{
"color": "#73BF69",
"name": "green",
"aliases": [],
"primary": true
},
{
"color": "#56A64B",
"name": "semi-dark-green",
"aliases": []
},
{
"color": "#37872D",
"name": "dark-green",
"aliases": []
}
]
},
{
"name": "blue",
"shades": [
{
"color": "#C0D8FF",
"name": "super-light-blue",
"aliases": []
},
{
"color": "#8AB8FF",
"name": "light-blue",
"aliases": []
},
{
"color": "#5794F2",
"name": "blue",
"aliases": [],
"primary": true
},
{
"color": "#3274D9",
"name": "semi-dark-blue",
"aliases": []
},
{
"color": "#1F60C4",
"name": "dark-blue",
"aliases": []
}
]
},
{
"name": "purple",
"shades": [
{
"color": "#DEB6F2",
"name": "super-light-purple",
"aliases": []
},
{
"color": "#CA95E5",
"name": "light-purple",
"aliases": []
},
{
"color": "#B877D9",
"name": "purple",
"aliases": [],
"primary": true
},
{
"color": "#A352CC",
"name": "semi-dark-purple",
"aliases": []
},
{
"color": "#8F3BB8",
"name": "dark-purple",
"aliases": []
}
]
}
],
"palette": [
"green",
"semi-dark-yellow",
"light-blue",
"semi-dark-orange",
"red",
"blue",
"purple",
"#705DA0",
"dark-green",
"yellow",
"#447EBC",
"#C15C17",
"#890F02",
"#0A437C",
"#6D1F62",
"#584477",
"#B7DBAB",
"#F4D598",
"#70DBED",
"#F9BA8F",
"#F29191",
"#82B5D8",
"#E5A8E2",
"#AEA2E0",
"#629E51",
"#E5AC0E",
"#64B0C8",
"#E0752D",
"#BF1B00",
"#0A50A1",
"#962D82",
"#614D93",
"#9AC48A",
"#F2C96D",
"#65C5DB",
"#F9934E",
"#EA6460",
"#5195CE",
"#D683CE",
"#806EB7",
"#3F6833",
"#967302",
"#2F575E",
"#99440A",
"#58140C",
"#052B51",
"#511749",
"#3F2B5B",
"#E0F9D7",
"#FCEACA",
"#CFFAFF",
"#F9E2D2",
"#FCE2DE",
"#BADFF4",
"#F9D9F9",
"#DEDAF7"
]
},
"zIndex": {
"navbarFixed": 1000,
"sidemenu": 1020,
"dropdown": 1030,
"typeahead": 1030,
"tooltip": 1040,
"modalBackdrop": 1050,
"modal": 1060,
"portal": 1061
},
"v1": {
"name": "Dark",
"typography": {
"fontFamily": {
"sansSerif": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"monospace": "'Roboto Mono', monospace"
},
"size": {
"base": "14px",
"xs": "10px",
"sm": "12px",
"md": "14px",
"lg": "18px"
},
"heading": {
"h1": "2rem",
"h2": "1.7142857142857142rem",
"h3": "1.5rem",
"h4": "1.2857142857142858rem",
"h5": "1.1428571428571428rem",
"h6": "1rem"
},
"weight": {
"light": 300,
"regular": 400,
"semibold": 500,
"bold": 500
},
"lineHeight": {
"xs": 1.5,
"sm": 1.5,
"md": 1.5,
"lg": 1.2
},
"link": {
"decoration": "none",
"hoverDecoration": "none"
}
},
"breakpoints": {
"xs": "0px",
"sm": "544px",
"md": "769px",
"lg": "992px",
"xl": "1200px",
"xxl": "1440px"
},
"spacing": {
"base": 8,
"insetSquishMd": "4px 8px",
"d": "16px",
"xxs": "2px",
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"gutter": "32px",
"formSpacingBase": 8,
"formMargin": "32px",
"formFieldsetMargin": "16px",
"formInputHeight": 32,
"formButtonHeight": 32,
"formInputPaddingHorizontal": "8px",
"formInputAffixPaddingHorizontal": "4px",
"formInputMargin": "16px",
"formLabelPadding": "0 0 0 2px",
"formLabelMargin": "0 0 4px 0",
"formValidationMessagePadding": "4px 8px",
"formValidationMessageMargin": "4px 0 0 0",
"inlineFormMargin": "4px"
},
"border": {
"radius": {
"sm": "2px",
"md": "4px",
"lg": "6px"
},
"width": {
"sm": "1px"
}
},
"height": {
"sm": 24,
"md": 32,
"lg": 48
},
"panelPadding": 8,
"panelHeaderHeight": 32,
"zIndex": {
"navbarFixed": 1000,
"sidemenu": 1020,
"dropdown": 1030,
"typeahead": 1030,
"tooltip": 1040,
"modalBackdrop": 1050,
"modal": 1060,
"portal": 1061
},
"type": "dark",
"isDark": true,
"isLight": false,
"palette": {
"gray98": "#f7f8fa",
"gray97": "#f1f5f9",
"gray95": "#e9edf2",
"gray90": "#dce1e6",
"gray85": "#c7d0d9",
"gray70": "#9fa7b3",
"gray60": "#7b8087",
"gray33": "#464c54",
"gray25": "#2c3235",
"gray15": "#202226",
"gray10": "#141619",
"gray05": "#0b0c0e",
"blue95": "#5794f2",
"blue85": "#33a2e5",
"blue80": "#3274d9",
"blue77": "#1f60c4",
"red88": "#e02f44",
"black": "#000000",
"white": "#ffffff",
"dark1": "#141414",
"dark2": "#161719",
"dark3": "#1f1f20",
"dark4": "#212124",
"dark5": "#222426",
"dark6": "#262628",
"dark7": "#292a2d",
"dark8": "#2f2f32",
"dark9": "#343436",
"dark10": "#424345",
"gray1": "#555555",
"gray2": "#8e8e8e",
"gray3": "#b3b3b3",
"gray4": "#d8d9da",
"gray5": "#ececec",
"gray6": "#f4f5f8",
"gray7": "#fbfbfb",
"redBase": "#e02f44",
"redShade": "#c4162a",
"greenBase": "#299c46",
"greenShade": "#23843b",
"red": "#d44a3a",
"yellow": "#ecbb13",
"purple": "#9933cc",
"variable": "#32d1df",
"orange": "#eb7b18",
"orangeDark": "#ff780a",
"brandPrimary": "#eb7b18",
"brandSuccess": "#1A7F4B",
"brandWarning": "#F5B73D",
"brandDanger": "#D10E5C",
"queryRed": "#FF5286",
"queryGreen": "#6CCF8E",
"queryPurple": "#fe85fc",
"queryOrange": "#eb7b18",
"online": "#1A7F4B",
"warn": "#1A7F4B",
"critical": "#1A7F4B"
},
"colors": {
"bg1": "#181b1f",
"bg2": "#22252b",
"bg3": "rgba(204, 204, 220, 0.16)",
"dashboardBg": "#111217",
"bgBlue1": "#3D71D9",
"bgBlue2": "rgb(90, 134, 222)",
"border1": "rgba(204, 204, 220, 0.07)",
"border2": "rgba(204, 204, 220, 0.15)",
"border3": "rgba(204, 204, 220, 0.25)",
"formLabel": "rgb(204, 204, 220)",
"formDescription": "rgba(204, 204, 220, 0.65)",
"formInputBg": "#111217",
"formInputBgDisabled": "rgba(204, 204, 220, 0.04)",
"formInputBorder": "rgba(204, 204, 220, 0.15)",
"formInputBorderHover": "rgba(204, 204, 220, 0.25)",
"formInputBorderActive": "#6E9FFF",
"formInputBorderInvalid": "#FF5286",
"formInputPlaceholderText": "rgba(204, 204, 220, 0.6)",
"formInputText": "rgb(204, 204, 220)",
"formInputDisabledText": "rgba(204, 204, 220, 0.6)",
"formFocusOutline": "#3D71D9",
"formValidationMessageText": "#FFFFFF",
"formValidationMessageBg": "#D10E5C",
"textStrong": "#FFFFFF",
"textHeading": "rgb(204, 204, 220)",
"text": "rgb(204, 204, 220)",
"textSemiWeak": "rgba(204, 204, 220, 0.65)",
"textWeak": "rgba(204, 204, 220, 0.65)",
"textFaint": "rgba(204, 204, 220, 0.6)",
"textBlue": "#6E9FFF",
"bodyBg": "#111217",
"panelBg": "#181b1f",
"panelBorder": "rgba(204, 204, 220, 0.07)",
"pageHeaderBg": "#111217",
"pageHeaderBorder": "#111217",
"dropdownBg": "#111217",
"dropdownShadow": "#000000",
"dropdownOptionHoverBg": "#22252b",
"link": "rgb(204, 204, 220)",
"linkDisabled": "rgba(204, 204, 220, 0.6)",
"linkHover": "#FFFFFF",
"linkExternal": "#6E9FFF"
},
"shadows": {
"listItem": "none"
},
"visualization": {
"hues": [
{
"name": "red",
"shades": [
{
"color": "#FFA6B0",
"name": "super-light-red"
},
{
"color": "#FF7383",
"name": "light-red"
},
{
"color": "#F2495C",
"name": "red",
"primary": true
},
{
"color": "#E02F44",
"name": "semi-dark-red"
},
{
"color": "#C4162A",
"name": "dark-red"
}
]
},
{
"name": "orange",
"shades": [
{
"color": "#FFCB7D",
"name": "super-light-orange",
"aliases": []
},
{
"color": "#FFB357",
"name": "light-orange",
"aliases": []
},
{
"color": "#FF9830",
"name": "orange",
"aliases": [],
"primary": true
},
{
"color": "#FF780A",
"name": "semi-dark-orange",
"aliases": []
},
{
"color": "#FA6400",
"name": "dark-orange",
"aliases": []
}
]
},
{
"name": "yellow",
"shades": [
{
"color": "#FFF899",
"name": "super-light-yellow",
"aliases": []
},
{
"color": "#FFEE52",
"name": "light-yellow",
"aliases": []
},
{
"color": "#FADE2A",
"name": "yellow",
"aliases": [],
"primary": true
},
{
"color": "#F2CC0C",
"name": "semi-dark-yellow",
"aliases": []
},
{
"color": "#E0B400",
"name": "dark-yellow",
"aliases": []
}
]
},
{
"name": "green",
"shades": [
{
"color": "#C8F2C2",
"name": "super-light-green",
"aliases": []
},
{
"color": "#96D98D",
"name": "light-green",
"aliases": []
},
{
"color": "#73BF69",
"name": "green",
"aliases": [],
"primary": true
},
{
"color": "#56A64B",
"name": "semi-dark-green",
"aliases": []
},
{
"color": "#37872D",
"name": "dark-green",
"aliases": []
}
]
},
{
"name": "blue",
"shades": [
{
"color": "#C0D8FF",
"name": "super-light-blue",
"aliases": []
},
{
"color": "#8AB8FF",
"name": "light-blue",
"aliases": []
},
{
"color": "#5794F2",
"name": "blue",
"aliases": [],
"primary": true
},
{
"color": "#3274D9",
"name": "semi-dark-blue",
"aliases": []
},
{
"color": "#1F60C4",
"name": "dark-blue",
"aliases": []
}
]
},
{
"name": "purple",
"shades": [
{
"color": "#DEB6F2",
"name": "super-light-purple",
"aliases": []
},
{
"color": "#CA95E5",
"name": "light-purple",
"aliases": []
},
{
"color": "#B877D9",
"name": "purple",
"aliases": [],
"primary": true
},
{
"color": "#A352CC",
"name": "semi-dark-purple",
"aliases": []
},
{
"color": "#8F3BB8",
"name": "dark-purple",
"aliases": []
}
]
}
],
"palette": [
"green",
"semi-dark-yellow",
"light-blue",
"semi-dark-orange",
"red",
"blue",
"purple",
"#705DA0",
"dark-green",
"yellow",
"#447EBC",
"#C15C17",
"#890F02",
"#0A437C",
"#6D1F62",
"#584477",
"#B7DBAB",
"#F4D598",
"#70DBED",
"#F9BA8F",
"#F29191",
"#82B5D8",
"#E5A8E2",
"#AEA2E0",
"#629E51",
"#E5AC0E",
"#64B0C8",
"#E0752D",
"#BF1B00",
"#0A50A1",
"#962D82",
"#614D93",
"#9AC48A",
"#F2C96D",
"#65C5DB",
"#F9934E",
"#EA6460",
"#5195CE",
"#D683CE",
"#806EB7",
"#3F6833",
"#967302",
"#2F575E",
"#99440A",
"#58140C",
"#052B51",
"#511749",
"#3F2B5B",
"#E0F9D7",
"#FCEACA",
"#CFFAFF",
"#F9E2D2",
"#FCE2DE",
"#BADFF4",
"#F9D9F9",
"#DEDAF7"
]
}
}
}

946
public/sass/theme.light.generated.json
Unescape View File

@ -0,0 +1,946 @@
{
"name": "Dark",
"isDark": false,
"isLight": true,
"colors": {
"mode": "light",
"blackBase": "36, 41, 46",
"primary": {
"main": "#3871DC",
"border": "#1F62E0",
"text": "#1F62E0",
"name": "primary",
"shade": "rgb(44, 90, 176)",
"transparent": "#3871DC14",
"contrastText": "#FFFFFF"
},
"text": {
"primary": "rgba(36, 41, 46, 1)",
"secondary": "rgba(36, 41, 46, 0.75)",
"disabled": "rgba(36, 41, 46, 0.50)",
"link": "#1F62E0",
"maxContrast": "#000000"
},
"border": {
"weak": "rgba(36, 41, 46, 0.12)",
"medium": "rgba(36, 41, 46, 0.30)",
"strong": "rgba(36, 41, 46, 0.40)"
},
"secondary": {
"main": "rgba(36, 41, 46, 0.16)",
"shade": "rgba(36, 41, 46, 0.20)",
"contrastText": "rgba(36, 41, 46, 1)",
"text": "rgba(36, 41, 46, 1)",
"border": "rgba(36, 41, 46, 0.40)",
"name": "secondary",
"transparent": "rgba(36, 41, 46, 0.08)"
},
"info": {
"main": "#3871DC",
"text": "#1F62E0",
"name": "info",
"border": "#1F62E0",
"shade": "rgb(44, 90, 176)",
"transparent": "#3871DC14",
"contrastText": "#FFFFFF"
},
"error": {
"main": "#E0226E",
"text": "#CF0E5B",
"border": "#CF0E5B",
"name": "error",
"shade": "rgb(179, 27, 88)",
"transparent": "#E0226E14",
"contrastText": "#FFFFFF"
},
"success": {
"main": "#1B855E",
"text": "#0A764E",
"name": "success",
"border": "#0A764E",
"shade": "rgb(21, 106, 75)",
"transparent": "#1B855E14",
"contrastText": "#FFFFFF"
},
"warning": {
"main": "#FAD34A",
"text": "#8A6C00",
"name": "warning",
"border": "#8A6C00",
"shade": "rgb(200, 168, 59)",
"transparent": "#FAD34A14",
"contrastText": "#000000"
},
"background": {
"canvas": "#F4F5F5",
"primary": "#FFFFFF",
"secondary": "#F4F5F5"
},
"action": {
"hover": "rgba(36, 41, 46, 0.12)",
"selected": "rgba(36, 41, 46, 0.08)",
"hoverOpacity": 0.08,
"focus": "rgba(36, 41, 46, 0.12)",
"disabledBackground": "rgba(36, 41, 46, 0.04)",
"disabledText": "rgba(36, 41, 46, 0.50)",
"disabledOpacity": 0.38
},
"gradients": {
"brandHorizontal": "linear-gradient(90deg, #FF8833 0%, #F53E4C 100%);",
"brandVertical": "linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.07%);"
},
"contrastThreshold": 3,
"hoverFactor": 0.03,
"tonalOffset": 0.2
},
"breakpoints": {
"values": {
"xs": 0,
"sm": 544,
"md": 769,
"lg": 992,
"xl": 1200,
"xxl": 1440
},
"keys": ["xs", "sm", "md", "lg", "xl", "xxl"],
"unit": "px"
},
"shape": {},
"components": {
"height": {
"sm": 3,
"md": 4,
"lg": 6
},
"input": {
"borderColor": "rgba(36, 41, 46, 0.30)",
"borderHover": "rgba(36, 41, 46, 0.40)",
"text": "rgba(36, 41, 46, 1)",
"background": "#FFFFFF"
},
"panel": {
"padding": 1,
"headerHeight": 4,
"background": "#FFFFFF",
"borderColor": "rgba(36, 41, 46, 0.12)",
"boxShadow": "none"
},
"dropdown": {
"background": "#FFFFFF"
},
"tooltip": {
"background": "#555",
"text": "#FFF"
},
"dashboard": {
"background": "#F4F5F5",
"padding": 1
},
"overlay": {
"background": "rgba(208, 209, 211, 0.24)"
},
"sidemenu": {
"width": 48
}
},
"typography": {
"htmlFontSize": 14,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontFamilyMonospace": "'Roboto Mono', monospace",
"fontSize": 14,
"fontWeightLight": 300,
"fontWeightRegular": 400,
"fontWeightMedium": 500,
"fontWeightBold": 500,
"size": {
"base": "14px",
"xs": "10px",
"sm": "12px",
"md": "14px",
"lg": "18px"
},
"h1": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 300,
"fontSize": "2rem",
"lineHeight": 1.167,
"letterSpacing": "-0.00893em"
},
"h2": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 300,
"fontSize": "1.7142857142857142rem",
"lineHeight": 1.2,
"letterSpacing": "0em"
},
"h3": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 400,
"fontSize": "1.5rem",
"lineHeight": 1.167,
"letterSpacing": "0em"
},
"h4": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 400,
"fontSize": "1.2857142857142858rem",
"lineHeight": 1.235,
"letterSpacing": "0.01389em"
},
"h5": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 400,
"fontSize": "1.1428571428571428rem",
"lineHeight": 1.334,
"letterSpacing": "0em"
},
"h6": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 500,
"fontSize": "1rem",
"lineHeight": 1.6,
"letterSpacing": "0.01071em"
},
"body": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 400,
"fontSize": "1rem",
"lineHeight": 1.5,
"letterSpacing": "0.01071em"
},
"bodySmall": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontWeight": 400,
"fontSize": "0.8571428571428571rem",
"lineHeight": 1.5,
"letterSpacing": "0.0125em"
}
},
"shadows": {
"z1": "0px 1px 2px rgba(24, 26, 27, 0.2)",
"z2": "0px 4px 8px rgba(24, 26, 27, 0.2)",
"z3": "0px 13px 20px 1px rgba(24, 26, 27, 0.18)"
},
"transitions": {
"duration": {
"shortest": 150,
"shorter": 200,
"short": 250,
"standard": 300,
"complex": 375,
"enteringScreen": 225,
"leavingScreen": 195
},
"easing": {
"easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
"easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
"easeIn": "cubic-bezier(0.4, 0, 1, 1)",
"sharp": "cubic-bezier(0.4, 0, 0.6, 1)"
}
},
"visualization": {
"hues": [
{
"name": "red",
"shades": [
{
"color": "#FF7383",
"name": "super-light-red"
},
{
"color": "#F2495C",
"name": "light-red"
},
{
"color": "#E02F44",
"name": "red",
"primary": true
},
{
"color": "#C4162A",
"name": "semi-dark-red"
},
{
"color": "#AD0317",
"name": "dark-red"
}
]
},
{
"name": "orange",
"shades": [
{
"color": "#FFB357",
"name": "super-light-orange",
"aliases": []
},
{
"color": "#FF9830",
"name": "light-orange",
"aliases": []
},
{
"color": "#FF780A",
"name": "orange",
"aliases": [],
"primary": true
},
{
"color": "#FA6400",
"name": "semi-dark-orange",
"aliases": []
},
{
"color": "#E55400",
"name": "dark-orange",
"aliases": []
}
]
},
{
"name": "yellow",
"shades": [
{
"color": "#FFEE52",
"name": "super-light-yellow",
"aliases": []
},
{
"color": "#FADE2A",
"name": "light-yellow",
"aliases": []
},
{
"color": "#F2CC0C",
"name": "yellow",
"aliases": [],
"primary": true
},
{
"color": "#E0B400",
"name": "semi-dark-yellow",
"aliases": []
},
{
"color": "#CC9D00",
"name": "dark-yellow",
"aliases": []
}
]
},
{
"name": "green",
"shades": [
{
"color": "#96D98D",
"name": "super-light-green",
"aliases": []
},
{
"color": "#73BF69",
"name": "light-green",
"aliases": []
},
{
"color": "#56A64B",
"name": "green",
"aliases": [],
"primary": true
},
{
"color": "#37872D",
"name": "semi-dark-green",
"aliases": []
},
{
"color": "#19730E",
"name": "dark-green",
"aliases": []
}
]
},
{
"name": "blue",
"shades": [
{
"color": "#8AB8FF",
"name": "super-light-blue",
"aliases": []
},
{
"color": "#5794F2",
"name": "light-blue",
"aliases": []
},
{
"color": "#3274D9",
"name": "blue",
"aliases": [],
"primary": true
},
{
"color": "#1F60C4",
"name": "semi-dark-blue",
"aliases": []
},
{
"color": "#1250B0",
"name": "dark-blue",
"aliases": []
}
]
},
{
"name": "purple",
"shades": [
{
"color": "#CA95E5",
"name": "super-light-purple",
"aliases": []
},
{
"color": "#B877D9",
"name": "light-purple",
"aliases": []
},
{
"color": "#A352CC",
"name": "purple",
"aliases": [],
"primary": true
},
{
"color": "#8F3BB8",
"name": "semi-dark-purple",
"aliases": []
},
{
"color": "#7C2EA3",
"name": "dark-purple",
"aliases": []
}
]
}
],
"palette": [
"green",
"semi-dark-yellow",
"light-blue",
"semi-dark-orange",
"red",
"blue",
"purple",
"#705DA0",
"dark-green",
"yellow",
"#447EBC",
"#C15C17",
"#890F02",
"#0A437C",
"#6D1F62",
"#584477",
"#B7DBAB",
"#F4D598",
"#70DBED",
"#F9BA8F",
"#F29191",
"#82B5D8",
"#E5A8E2",
"#AEA2E0",
"#629E51",
"#E5AC0E",
"#64B0C8",
"#E0752D",
"#BF1B00",
"#0A50A1",
"#962D82",
"#614D93",
"#9AC48A",
"#F2C96D",
"#65C5DB",
"#F9934E",
"#EA6460",
"#5195CE",
"#D683CE",
"#806EB7",
"#3F6833",
"#967302",
"#2F575E",
"#99440A",
"#58140C",
"#052B51",
"#511749",
"#3F2B5B",
"#E0F9D7",
"#FCEACA",
"#CFFAFF",
"#F9E2D2",
"#FCE2DE",
"#BADFF4",
"#F9D9F9",
"#DEDAF7"
]
},
"zIndex": {
"navbarFixed": 1000,
"sidemenu": 1020,
"dropdown": 1030,
"typeahead": 1030,
"tooltip": 1040,
"modalBackdrop": 1050,
"modal": 1060,
"portal": 1061
},
"v1": {
"name": "Dark",
"typography": {
"fontFamily": {
"sansSerif": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"monospace": "'Roboto Mono', monospace"
},
"size": {
"base": "14px",
"xs": "10px",
"sm": "12px",
"md": "14px",
"lg": "18px"
},
"heading": {
"h1": "2rem",
"h2": "1.7142857142857142rem",
"h3": "1.5rem",
"h4": "1.2857142857142858rem",
"h5": "1.1428571428571428rem",
"h6": "1rem"
},
"weight": {
"light": 300,
"regular": 400,
"semibold": 500,
"bold": 500
},
"lineHeight": {
"xs": 1.5,
"sm": 1.5,
"md": 1.5,
"lg": 1.2
},
"link": {
"decoration": "none",
"hoverDecoration": "none"
}
},
"breakpoints": {
"xs": "0px",
"sm": "544px",
"md": "769px",
"lg": "992px",
"xl": "1200px",
"xxl": "1440px"
},
"spacing": {
"base": 8,
"insetSquishMd": "4px 8px",
"d": "16px",
"xxs": "2px",
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"gutter": "32px",
"formSpacingBase": 8,
"formMargin": "32px",
"formFieldsetMargin": "16px",
"formInputHeight": 32,
"formButtonHeight": 32,
"formInputPaddingHorizontal": "8px",
"formInputAffixPaddingHorizontal": "4px",
"formInputMargin": "16px",
"formLabelPadding": "0 0 0 2px",
"formLabelMargin": "0 0 4px 0",
"formValidationMessagePadding": "4px 8px",
"formValidationMessageMargin": "4px 0 0 0",
"inlineFormMargin": "4px"
},
"border": {
"radius": {
"sm": "2px",
"md": "4px",
"lg": "6px"
},
"width": {
"sm": "1px"
}
},
"height": {
"sm": 24,
"md": 32,
"lg": 48
},
"panelPadding": 8,
"panelHeaderHeight": 32,
"zIndex": {
"navbarFixed": 1000,
"sidemenu": 1020,
"dropdown": 1030,
"typeahead": 1030,
"tooltip": 1040,
"modalBackdrop": 1050,
"modal": 1060,
"portal": 1061
},
"type": "light",
"isDark": false,
"isLight": true,
"palette": {
"gray98": "#f7f8fa",
"gray97": "#f1f5f9",
"gray95": "#e9edf2",
"gray90": "#dce1e6",
"gray85": "#c7d0d9",
"gray70": "#9fa7b3",
"gray60": "#7b8087",
"gray33": "#464c54",
"gray25": "#2c3235",
"gray15": "#202226",
"gray10": "#141619",
"gray05": "#0b0c0e",
"blue95": "#5794f2",
"blue85": "#33a2e5",
"blue80": "#3274d9",
"blue77": "#1f60c4",
"red88": "#e02f44",
"black": "#000000",
"white": "#ffffff",
"dark1": "#141414",
"dark2": "#161719",
"dark3": "#1f1f20",
"dark4": "#212124",
"dark5": "#222426",
"dark6": "#262628",
"dark7": "#292a2d",
"dark8": "#2f2f32",
"dark9": "#343436",
"dark10": "#424345",
"gray1": "#555555",
"gray2": "#8e8e8e",
"gray3": "#b3b3b3",
"gray4": "#d8d9da",
"gray5": "#ececec",
"gray6": "#f4f5f8",
"gray7": "#fbfbfb",
"redBase": "#e02f44",
"redShade": "#c4162a",
"greenBase": "#299c46",
"greenShade": "#23843b",
"red": "#d44a3a",
"yellow": "#ecbb13",
"purple": "#9933cc",
"variable": "#32d1df",
"orange": "#eb7b18",
"orangeDark": "#ff780a",
"brandPrimary": "#eb7b18",
"brandSuccess": "#1B855E",
"brandWarning": "#FAD34A",
"brandDanger": "#E0226E",
"queryRed": "#CF0E5B",
"queryGreen": "#0A764E",
"queryPurple": "#fe85fc",
"queryOrange": "#eb7b18",
"online": "#1B855E",
"warn": "#1B855E",
"critical": "#1B855E"
},
"colors": {
"bg1": "#FFFFFF",
"bg2": "#F4F5F5",
"bg3": "rgba(36, 41, 46, 0.12)",
"dashboardBg": "#F4F5F5",
"bgBlue1": "#3871DC",
"bgBlue2": "rgb(44, 90, 176)",
"border1": "rgba(36, 41, 46, 0.12)",
"border2": "rgba(36, 41, 46, 0.30)",
"border3": "rgba(36, 41, 46, 0.40)",
"formLabel": "rgba(36, 41, 46, 1)",
"formDescription": "rgba(36, 41, 46, 0.75)",
"formInputBg": "#FFFFFF",
"formInputBgDisabled": "rgba(36, 41, 46, 0.04)",
"formInputBorder": "rgba(36, 41, 46, 0.30)",
"formInputBorderHover": "rgba(36, 41, 46, 0.40)",
"formInputBorderActive": "#1F62E0",
"formInputBorderInvalid": "#CF0E5B",
"formInputPlaceholderText": "rgba(36, 41, 46, 0.50)",
"formInputText": "rgba(36, 41, 46, 1)",
"formInputDisabledText": "rgba(36, 41, 46, 0.50)",
"formFocusOutline": "#3871DC",
"formValidationMessageText": "#FFFFFF",
"formValidationMessageBg": "#E0226E",
"textStrong": "#000000",
"textHeading": "rgba(36, 41, 46, 1)",
"text": "rgba(36, 41, 46, 1)",
"textSemiWeak": "rgba(36, 41, 46, 0.75)",
"textWeak": "rgba(36, 41, 46, 0.75)",
"textFaint": "rgba(36, 41, 46, 0.50)",
"textBlue": "#1F62E0",
"bodyBg": "#F4F5F5",
"panelBg": "#FFFFFF",
"panelBorder": "rgba(36, 41, 46, 0.12)",
"pageHeaderBg": "#F4F5F5",
"pageHeaderBorder": "#F4F5F5",
"dropdownBg": "#FFFFFF",
"dropdownShadow": "#000000",
"dropdownOptionHoverBg": "#F4F5F5",
"link": "rgba(36, 41, 46, 1)",
"linkDisabled": "rgba(36, 41, 46, 0.50)",
"linkHover": "#000000",
"linkExternal": "#1F62E0"
},
"shadows": {
"listItem": "none"
},
"visualization": {
"hues": [
{
"name": "red",
"shades": [
{
"color": "#FF7383",
"name": "super-light-red"
},
{
"color": "#F2495C",
"name": "light-red"
},
{
"color": "#E02F44",
"name": "red",
"primary": true
},
{
"color": "#C4162A",
"name": "semi-dark-red"
},
{
"color": "#AD0317",
"name": "dark-red"
}
]
},
{
"name": "orange",
"shades": [
{
"color": "#FFB357",
"name": "super-light-orange",
"aliases": []
},
{
"color": "#FF9830",
"name": "light-orange",
"aliases": []
},
{
"color": "#FF780A",
"name": "orange",
"aliases": [],
"primary": true
},
{
"color": "#FA6400",
"name": "semi-dark-orange",
"aliases": []
},
{
"color": "#E55400",
"name": "dark-orange",
"aliases": []
}
]
},
{
"name": "yellow",
"shades": [
{
"color": "#FFEE52",
"name": "super-light-yellow",
"aliases": []
},
{
"color": "#FADE2A",
"name": "light-yellow",
"aliases": []
},
{
"color": "#F2CC0C",
"name": "yellow",
"aliases": [],
"primary": true
},
{
"color": "#E0B400",
"name": "semi-dark-yellow",
"aliases": []
},
{
"color": "#CC9D00",
"name": "dark-yellow",
"aliases": []
}
]
},
{
"name": "green",
"shades": [
{
"color": "#96D98D",
"name": "super-light-green",
"aliases": []
},
{
"color": "#73BF69",
"name": "light-green",
"aliases": []
},
{
"color": "#56A64B",
"name": "green",
"aliases": [],
"primary": true
},
{
"color": "#37872D",
"name": "semi-dark-green",
"aliases": []
},
{
"color": "#19730E",
"name": "dark-green",
"aliases": []
}
]
},
{
"name": "blue",
"shades": [
{
"color": "#8AB8FF",
"name": "super-light-blue",
"aliases": []
},
{
"color": "#5794F2",
"name": "light-blue",
"aliases": []
},
{
"color": "#3274D9",
"name": "blue",
"aliases": [],
"primary": true
},
{
"color": "#1F60C4",
"name": "semi-dark-blue",
"aliases": []
},
{
"color": "#1250B0",
"name": "dark-blue",
"aliases": []
}
]
},
{
"name": "purple",
"shades": [
{
"color": "#CA95E5",
"name": "super-light-purple",
"aliases": []
},
{
"color": "#B877D9",
"name": "light-purple",
"aliases": []
},
{
"color": "#A352CC",
"name": "purple",
"aliases": [],
"primary": true
},
{
"color": "#8F3BB8",
"name": "semi-dark-purple",
"aliases": []
},
{
"color": "#7C2EA3",
"name": "dark-purple",
"aliases": []
}
]
}
],
"palette": [
"green",
"semi-dark-yellow",
"light-blue",
"semi-dark-orange",
"red",
"blue",
"purple",
"#705DA0",
"dark-green",
"yellow",
"#447EBC",
"#C15C17",
"#890F02",
"#0A437C",
"#6D1F62",
"#584477",
"#B7DBAB",
"#F4D598",
"#70DBED",
"#F9BA8F",
"#F29191",
"#82B5D8",
"#E5A8E2",
"#AEA2E0",
"#629E51",
"#E5AC0E",
"#64B0C8",
"#E0752D",
"#BF1B00",
"#0A50A1",
"#962D82",
"#614D93",
"#9AC48A",
"#F2C96D",
"#65C5DB",
"#F9934E",
"#EA6460",
"#5195CE",
"#D683CE",
"#806EB7",
"#3F6833",
"#967302",
"#2F575E",
"#99440A",
"#58140C",
"#052B51",
"#511749",
"#3F2B5B",
"#E0F9D7",
"#FCEACA",
"#CFFAFF",
"#F9E2D2",
"#FCE2DE",
"#BADFF4",
"#F9D9F9",
"#DEDAF7"
]
}
}
}

13
scripts/cli/generateSassVariableFiles.ts
Unescape View File

@ -9,6 +9,9 @@ const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.g
const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.generated.scss';
const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.generated.scss';
const darkThemeJsonPath = __dirname + '/../../public/sass/theme.dark.generated.json';
const lightThemeJsonPath = __dirname + '/../../public/sass/theme.light.generated.json';
const writeVariablesFile = async (path: string, data: string) => {
return new Promise((resolve, reject) => {
fs.writeFile(path, data, (e) => {
@ -36,6 +39,16 @@ const generateSassVariableFiles = async () => {
console.error('\nWriting SASS variable files failed', error);
process.exit(1);
}
try {
const darkJson = JSON.stringify(darkTheme, null, 2);
const lightJson = JSON.stringify(lightTheme, null, 2);
writeVariablesFile(darkThemeJsonPath, darkJson);
writeVariablesFile(lightThemeJsonPath, lightJson);
} catch (error) {
console.error('\nWriting JSON variable files failed', error);
}
};
generateSassVariableFiles();

Write Preview
Loading…
Cancel
Save