@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
151 lines (150 loc) • 4.37 kB
JavaScript
import { token as t } from "../../styled-system/tokens/index.js";
import r from "../../node_modules/@serendie/design-token/dist/tokens.js";
const o = r.sd.reference.typography, e = r.sd.system.dimension.spacing, n = {
background: t("colors.sd.system.color.chart.component.chartSurface"),
// 軸関連のスタイル
axis: {
domain: {
line: {
stroke: t("colors.sd.system.color.chart.component.scalemark"),
strokeWidth: 1
}
},
ticks: {
line: {
stroke: "transparent",
// 目盛り線を非表示
strokeWidth: 0
},
text: {
fill: t("colors.sd.system.color.chart.component.onChartSurface"),
fontSize: parseInt(o.scale.expanded.extraSmall, 10),
// 13px
fontFamily: o.fontFamily.primary
}
},
legend: {
text: {
fill: t("colors.sd.system.color.chart.component.onChartSurface"),
fontSize: parseInt(o.scale.expanded.small, 10),
// 14px
fontWeight: o.fontWeight.regular,
// 400
fontFamily: o.fontFamily.primary
}
}
},
// グリッド線のスタイル
grid: {
line: {
stroke: t("colors.sd.system.color.chart.component.scalemark"),
strokeWidth: 1
}
},
// 凡例のスタイル
legends: {
text: {
fill: t("colors.sd.system.color.chart.component.onChartSurface"),
fontSize: parseInt(o.scale.expanded.extraSmall, 10),
// 13px
fontFamily: o.fontFamily.primary
},
ticks: {
line: {
strokeWidth: 1
}
},
title: {
text: {
fill: t("colors.sd.system.color.chart.component.onChartSurface"),
fontSize: parseInt(o.scale.expanded.small, 10),
// 14px
fontWeight: o.fontWeight.regular,
// 500
fontFamily: o.fontFamily.primary
}
}
},
// ラベルのスタイル（バー内のテキスト）
labels: {
text: {
fill: t("colors.sd.system.color.chart.component.onChartSurface"),
fontSize: parseInt(o.scale.expanded.extraSmall, 10),
// 13px
fontWeight: o.fontWeight.regular,
// 500
fontFamily: o.fontFamily.primary
}
},
// ツールチップのスタイル
tooltip: {
container: {
background: t("colors.sd.system.color.chart.component.chartSurface"),
color: t("colors.sd.system.color.chart.component.onChartSurface"),
fontSize: parseInt(o.scale.expanded.extraSmall, 10),
// 13px
fontFamily: o.fontFamily.primary,
borderRadius: 6,
boxShadow: "0 3px 14px rgba(0, 0, 0, 0.2)",
border: `1px solid ${t("colors.sd.system.color.chart.component.scalemark")}`,
padding: `${parseInt(e.small, 10)}px ${parseInt(e.medium, 10)}px`
}
},
// 注釈のスタイル
annotations: {
text: {
fill: t("colors.sd.system.color.chart.component.onChartSurface"),
fontSize: parseInt(o.scale.expanded.extraSmall, 10),
// 13px
fontFamily: o.fontFamily.primary
},
link: {
stroke: t("colors.sd.system.color.chart.component.scalemark"),
strokeWidth: 1,
strokeOpacity: 0.3
},
outline: {
stroke: t("colors.sd.system.color.chart.component.scalemark"),
strokeWidth: 2,
strokeOpacity: 0.3,
fill: "transparent"
}
},
// ドットのスタイル（折れ線グラフなど）
dots: {
text: {
fill: t("colors.sd.system.color.chart.component.onChartSurface"),
fontSize: parseInt(o.scale.expanded.extraSmall, 10),
// 13px
fontFamily: o.fontFamily.primary
}
},
// マーカーのスタイル（しきい値線など）
markers: {
lineColor: t("colors.sd.system.color.chart.component.threshold"),
lineStrokeWidth: 1,
text: {
fontFamily: o.fontFamily.primary,
fontSize: parseInt(o.scale.expanded.extraSmall, 10),
// 13px
fill: t("colors.sd.system.color.chart.component.onChartSurface"),
outlineWidth: 2,
outlineColor: t(
"colors.sd.system.color.chart.component.chartSurface"
),
outlineOpacity: 1
}
},
// クロスヘアのスタイル
crosshair: {
line: {
stroke: t("colors.sd.system.color.chart.component.scalemark"),
strokeWidth: 1,
strokeOpacity: 0.5,
strokeDasharray: "3 3"
}
}
};
export {
n as SerendieChartTheme
};