@ionic-internal/ionic-ds
Version:
Ionic Design System
395 lines (393 loc) • 7.41 kB
JavaScript
var fontFamilies = {
display: "IonEina, -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
text: "Inter, -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
system: "apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif",
monospace: "\"SF Mono\", \"Roboto Mono\", Menlo, monospace",
serif: "\"Adobe Caslon\", Georgia, Times, \"Times New Roman\", serif"
};
var fontWeights = {
thin: 100,
extraLight: 200,
light: 300,
regular: 400,
medium: 500,
semiBold: 600,
bold: 700,
extraBold: 800,
black: 900,
extraBlack: 950
};
var fontSizes = {
"10": "0.625rem",
"11": "0.6875rem",
"12": "0.75rem",
"13": "0.8125rem",
"14": "0.875rem",
"16": "1.00rem",
"20": "1.25rem",
"24": "1.50rem",
"28": "1.75rem",
"32": "2.00rem",
"40": "2.50rem",
"48": "3.00rem",
"56": "3.50rem",
"64": "4.00rem",
"72": "4.50rem",
"80": "5.00rem",
"88": "5.50rem",
"96": "6.00rem"
};
var lineHeights = {
solid: 1,
title: 1.12,
body: 1.6,
prose: 1.8
};
var letterSpacings = {
dense: "-0.04em",
tight: "-0.02em",
solid: "0.00em",
wide: "0.04em",
"super": "0.08em",
extra: "0.16em"
};
var space = {
"0": "0rem",
"4": "0.25rem",
"8": "0.50rem",
"12": "0.75rem",
"16": "1.00rem",
"20": "1.25rem",
"24": "1.5rem",
"32": "2.00rem",
"40": "2.50rem",
"48": "3.00rem",
"64": "4.00rem",
"80": "5.00rem",
"96": "6.00rem",
"128": "8.00rem",
"160": "10.00rem",
"192": "12.00rem",
"224": "14.00rem",
"256": "16.00rem"
};
var colors = {
black: "#000000",
white: "#ffffff",
blue: {
"0": "#f0f6ff",
"10": "#e3edff",
"20": "#cddfff",
"30": "#b2ceff",
"40": "#97bdff",
"50": "#7cabff",
"60": "#639bff",
"70": "#4d8dff",
"80": "#3880ff",
"90": "#176BFF",
"100": "#0054e9",
"110": "#004DD6",
"120": "#0046C1",
"130": "#003FAE",
"140": "#00389B",
"150": "#002D7C",
"160": "#002669",
"170": "#001D52",
"180": "#001740",
"190": "#00112F",
"200": "#000B1F"
},
gray: {
"0": "#f3f3f3",
"10": "#e4e4e4",
"20": "#c8c8c8",
"30": "#aeaeae",
"40": "#959595",
"50": "#818181",
"60": "#6d6d6d",
"70": "#5f5f5f",
"80": "#474747",
"90": "#2f2f2f",
"100": "#141414"
},
carbon: {
"0": "#eef1f3",
"10": "#d7dde2",
"20": "#b4bcc6",
"30": "#98a2ad",
"40": "#7d8894",
"50": "#677483",
"60": "#556170",
"70": "#434f5e",
"80": "#35404e",
"90": "#222d3a",
"100": "#03060b"
},
indigo: {
"0": "#fbfbfd",
"10": "#f6f8fc",
"20": "#e9edf3",
"30": "#dee3ea",
"40": "#ced6e0",
"50": "#b2becd",
"60": "#92a0b3",
"70": "#73849a",
"80": "#445b78",
"90": "#2d4665",
"100": "#001a3a"
},
green: {
"0": "#f1fdf5",
"10": "#deffe7",
"20": "#c7fbd5",
"30": "#a7f1bb",
"40": "#80e89d",
"50": "#62e085",
"60": "#4ada71",
"70": "#2dd55b",
"80": "#17c948",
"90": "#00ba33",
"100": "#00a52d",
"110": "#009B2B",
"120": "#009128",
"130": "#008725",
"140": "#007D22",
"150": "#00711F",
"160": "#00661C",
"170": "#00581A",
"180": "#004314",
"190": "#002F0E",
"200": "#001807"
},
lime: {
"0": "#f5fff0",
"10": "#ebfee3",
"20": "#ddfcd0",
"30": "#cffbbc",
"40": "#bbf9a2",
"50": "#a3f581",
"60": "#8bf35f",
"70": "#64ec44",
"80": "#4ddf2b",
"90": "#3ad515",
"100": "#27c100",
"110": "#25B400",
"120": "#22A400",
"130": "#1E9200",
"140": "#1A7E00",
"150": "#176D00",
"160": "#135A00",
"170": "#0F4900",
"180": "#0C3900",
"190": "#092C00",
"200": "#061D00"
},
lavender: {
"0": "#f7f8ff",
"10": "#e6ebff",
"20": "#ced9ff",
"30": "#b6c6ff",
"40": "#9fb5ff",
"50": "#8aa4ff",
"60": "#7493ff",
"70": "#597eff",
"80": "#3c67ff",
"90": "#194bfd",
"100": "#0033e8",
"110": "#002DCC",
"120": "#0028B8",
"130": "#0023A2",
"140": "#002092",
"150": "#001A79",
"160": "#001560",
"170": "#00114E",
"180": "#000E41",
"190": "#000A30",
"200": "#000721"
},
purple: {
"0": "#f4f4ff",
"10": "#e9eaff",
"20": "#d0d2ff",
"30": "#b6b9f9",
"40": "#9a99fc",
"50": "#8482fb",
"60": "#786df9",
"70": "#6e5afd",
"80": "#6030ff",
"90": "#4712fb",
"100": "#3400e6",
"110": "#3000D1",
"120": "#2B00BC",
"130": "#2600A6",
"140": "#20008E",
"150": "#1B0075",
"160": "#15005C",
"170": "#100048",
"180": "#0D0038",
"190": "#0B0030",
"200": "#080022"
},
pink: {
"0": "#ffeff5",
"10": "#ffe3ed",
"20": "#ffd8e5",
"30": "#ffc9db",
"40": "#ffb6d0",
"50": "#ff99bd",
"60": "#ff80ac",
"70": "#ff6098",
"80": "#fb4082",
"90": "#ec216a",
"100": "#da0d56",
"110": "#D0004A",
"120": "#C40046",
"130": "#B30040",
"140": "#A3003B",
"150": "#940035",
"160": "#850030",
"170": "#710029",
"180": "#5F0022",
"190": "#460019",
"200": "#20000B"
},
red: {
"0": "#fff1f3",
"10": "#ffe6e8",
"20": "#ffcfd3",
"30": "#feb7bc",
"40": "#fc9aa2",
"50": "#f9838c",
"60": "#f56570",
"70": "#f24c58",
"80": "#ef3442",
"90": "#e21827",
"100": "#d0000f",
"110": "#C5000F",
"120": "#B3000E",
"130": "#9C000C",
"140": "#89000B",
"150": "#760009",
"160": "#650008",
"170": "#520006",
"180": "#410005",
"190": "#300004",
"200": "#1D0002"
},
orange: {
"0": "#fff5f0",
"10": "#ffede6",
"20": "#ffdfd1",
"30": "#ffd0bc",
"40": "#ffc0a5",
"50": "#ffaf8c",
"60": "#ff9b70",
"70": "#ff8753",
"80": "#ff7336",
"90": "#ff5b13",
"100": "#eb4700",
"110": "#D94200",
"120": "#C93D00",
"130": "#B63700",
"140": "#A53200",
"150": "#8C2A00",
"160": "#772400",
"170": "#5E1C00",
"180": "#481600",
"190": "#341000",
"200": "#1D0900"
},
yellow: {
"0": "#fffbef",
"10": "#fff8e2",
"20": "#fff4d1",
"30": "#ffefbd",
"40": "#ffe9a3",
"50": "#ffe080",
"60": "#ffd75a",
"70": "#ffce31",
"80": "#ffc409",
"90": "#f4b100",
"100": "#eaa100",
"110": "#DD9800",
"120": "#CC8D00",
"130": "#BE8300",
"140": "#B17A00",
"150": "#9C6C00",
"160": "#8A6000",
"170": "#755100",
"180": "#5F4100",
"190": "#452F00",
"200": "#231800"
},
aqua: {
"0": "#f0fff9",
"10": "#e6fff6",
"20": "#ceffed",
"30": "#b7fce3",
"40": "#93f9d5",
"50": "#79f5c9",
"60": "#59f0ba",
"70": "#38e9aa",
"80": "#1ae19a",
"90": "#00d287",
"100": "#00ba78",
"110": "#00AA6D",
"120": "#009B63",
"130": "#00915C",
"140": "#008152",
"150": "#016E46",
"160": "#015D3C",
"170": "#014F32",
"180": "#013E28",
"190": "#012E1E",
"200": "#011E13"
},
teal: {
"0": "#eefeff",
"10": "#dffdff",
"20": "#d0fdff",
"30": "#bbfcff",
"40": "#a2fcff",
"50": "#8bfbff",
"60": "#73f6fb",
"70": "#55ecf2",
"80": "#35e2e9",
"90": "#1bd2d9",
"100": "#00b9c0",
"110": "#01ADB4",
"120": "#019FA5",
"130": "#018F94",
"140": "#017E83",
"150": "#016D71",
"160": "#015D61",
"170": "#014D4F",
"180": "#013C3E",
"190": "#012C2E",
"200": "#011C1D"
},
cyan: {
"0": "#f3faff",
"10": "#e8f5ff",
"20": "#d3ecff",
"30": "#bfe4ff",
"40": "#a7daff",
"50": "#8dcfff",
"60": "#77c6ff",
"70": "#62bdff",
"80": "#46b1ff",
"90": "#24a3ff",
"100": "#0091fa",
"110": "#0189EC",
"120": "#017ED8",
"130": "#0170C0",
"140": "#0163AA",
"150": "#015592",
"160": "#01487B",
"170": "#013A64",
"180": "#012D4D",
"190": "#011E33",
"200": "#01121E"
}
};
export { colors, fontFamilies, fontSizes, fontWeights, letterSpacings, lineHeights, space };