410 lines
9.2 KiB
JSON
410 lines
9.2 KiB
JSON
{
|
|
"version": "1.1.0",
|
|
"tokens": [
|
|
{
|
|
"path": "typography.fontFamily",
|
|
"css": "--kbx-font-family",
|
|
"type": "fontFamily",
|
|
"role": "primitive",
|
|
"value": "Pretendard, \"Apple SD Gothic Neo\", \"Noto Sans KR\", Arial, sans-serif",
|
|
"description": "업무 기본 Font Stack"
|
|
},
|
|
{
|
|
"path": "typography.size.xs",
|
|
"css": "--kbx-font-xs",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "12px"
|
|
},
|
|
{
|
|
"path": "typography.size.sm",
|
|
"css": "--kbx-font-sm",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "13px"
|
|
},
|
|
{
|
|
"path": "typography.size.md",
|
|
"css": "--kbx-font-md",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "14px"
|
|
},
|
|
{
|
|
"path": "typography.size.lg",
|
|
"css": "--kbx-font-lg",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "16px"
|
|
},
|
|
{
|
|
"path": "typography.size.xl",
|
|
"css": "--kbx-font-xl",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "18px"
|
|
},
|
|
{
|
|
"path": "typography.size.2xl",
|
|
"css": "--kbx-font-2xl",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "20px"
|
|
},
|
|
{
|
|
"path": "color.white",
|
|
"css": "--kbx-white",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#ffffff"
|
|
},
|
|
{
|
|
"path": "color.gray.25",
|
|
"css": "--kbx-gray-25",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#fcfcfd"
|
|
},
|
|
{
|
|
"path": "color.gray.50",
|
|
"css": "--kbx-gray-50",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#f9fafb"
|
|
},
|
|
{
|
|
"path": "color.gray.100",
|
|
"css": "--kbx-gray-100",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#f2f4f7"
|
|
},
|
|
{
|
|
"path": "color.gray.200",
|
|
"css": "--kbx-gray-200",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#e4e7ec"
|
|
},
|
|
{
|
|
"path": "color.gray.300",
|
|
"css": "--kbx-gray-300",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#d0d5dd"
|
|
},
|
|
{
|
|
"path": "color.gray.400",
|
|
"css": "--kbx-gray-400",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#98a2b3"
|
|
},
|
|
{
|
|
"path": "color.gray.500",
|
|
"css": "--kbx-gray-500",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#667085"
|
|
},
|
|
{
|
|
"path": "color.gray.700",
|
|
"css": "--kbx-gray-700",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#344054"
|
|
},
|
|
{
|
|
"path": "color.gray.900",
|
|
"css": "--kbx-gray-900",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#101828"
|
|
},
|
|
{
|
|
"path": "color.blue.600",
|
|
"css": "--kbx-blue-600",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#175cd3"
|
|
},
|
|
{
|
|
"path": "color.green.600",
|
|
"css": "--kbx-green-600",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#039855"
|
|
},
|
|
{
|
|
"path": "color.orange.500",
|
|
"css": "--kbx-orange-500",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#f79009"
|
|
},
|
|
{
|
|
"path": "color.red.600",
|
|
"css": "--kbx-red-600",
|
|
"type": "color",
|
|
"role": "primitive",
|
|
"value": "#d92d20"
|
|
},
|
|
{
|
|
"path": "semantic.surface.default",
|
|
"css": "--kbx-color-surface",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "{color.white}"
|
|
},
|
|
{
|
|
"path": "semantic.surface.muted",
|
|
"css": "--kbx-color-surface-muted",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "{color.gray.50}"
|
|
},
|
|
{
|
|
"path": "semantic.surface.subtle",
|
|
"css": "--kbx-color-surface-subtle",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "{color.gray.100}"
|
|
},
|
|
{
|
|
"path": "semantic.surface.hover",
|
|
"css": "--kbx-color-surface-hover",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "#f3f7fd"
|
|
},
|
|
{
|
|
"path": "semantic.text.default",
|
|
"css": "--kbx-color-text",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "#1d2939"
|
|
},
|
|
{
|
|
"path": "semantic.text.muted",
|
|
"css": "--kbx-color-text-muted",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "{color.gray.500}"
|
|
},
|
|
{
|
|
"path": "semantic.border.default",
|
|
"css": "--kbx-color-border",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "{color.gray.200}"
|
|
},
|
|
{
|
|
"path": "semantic.border.strong",
|
|
"css": "--kbx-color-border-strong",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "{color.gray.400}"
|
|
},
|
|
{
|
|
"path": "semantic.action.primary",
|
|
"css": "--kbx-color-primary",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "{color.blue.600}"
|
|
},
|
|
{
|
|
"path": "semantic.status.success",
|
|
"css": "--kbx-color-success",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "{color.green.600}"
|
|
},
|
|
{
|
|
"path": "semantic.status.warning",
|
|
"css": "--kbx-color-warning",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "{color.orange.500}"
|
|
},
|
|
{
|
|
"path": "semantic.status.danger",
|
|
"css": "--kbx-color-danger",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "{color.red.600}"
|
|
},
|
|
{
|
|
"path": "semantic.focus",
|
|
"css": "--kbx-color-focus",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "#1570ef"
|
|
},
|
|
{
|
|
"path": "semantic.overlay",
|
|
"css": "--kbx-color-overlay",
|
|
"type": "color",
|
|
"role": "semantic",
|
|
"value": "rgba(16, 24, 40, .38)"
|
|
},
|
|
{
|
|
"path": "spacing.0",
|
|
"css": "--kbx-space-0",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "0"
|
|
},
|
|
{
|
|
"path": "spacing.1",
|
|
"css": "--kbx-space-1",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "4px"
|
|
},
|
|
{
|
|
"path": "spacing.2",
|
|
"css": "--kbx-space-2",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "8px"
|
|
},
|
|
{
|
|
"path": "spacing.3",
|
|
"css": "--kbx-space-3",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "12px"
|
|
},
|
|
{
|
|
"path": "spacing.4",
|
|
"css": "--kbx-space-4",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "16px"
|
|
},
|
|
{
|
|
"path": "spacing.5",
|
|
"css": "--kbx-space-5",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "20px"
|
|
},
|
|
{
|
|
"path": "spacing.6",
|
|
"css": "--kbx-space-6",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "24px"
|
|
},
|
|
{
|
|
"path": "spacing.8",
|
|
"css": "--kbx-space-8",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "32px"
|
|
},
|
|
{
|
|
"path": "spacing.10",
|
|
"css": "--kbx-space-10",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "40px"
|
|
},
|
|
{
|
|
"path": "spacing.12",
|
|
"css": "--kbx-space-12",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "48px"
|
|
},
|
|
{
|
|
"path": "radius.sm",
|
|
"css": "--kbx-radius-sm",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "4px"
|
|
},
|
|
{
|
|
"path": "radius.md",
|
|
"css": "--kbx-radius-md",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "6px"
|
|
},
|
|
{
|
|
"path": "radius.lg",
|
|
"css": "--kbx-radius-lg",
|
|
"type": "dimension",
|
|
"role": "primitive",
|
|
"value": "8px"
|
|
},
|
|
{
|
|
"path": "component.control.height",
|
|
"css": "--kbx-control-height",
|
|
"type": "dimension",
|
|
"role": "component",
|
|
"value": "34px",
|
|
"description": "Desktop compact input/button baseline"
|
|
},
|
|
{
|
|
"path": "component.grid.rowHeight",
|
|
"css": "--kbx-grid-row-height",
|
|
"type": "dimension",
|
|
"role": "component",
|
|
"value": "34px"
|
|
},
|
|
{
|
|
"path": "component.grid.headerHeight",
|
|
"css": "--kbx-grid-header-height",
|
|
"type": "dimension",
|
|
"role": "component",
|
|
"value": "36px"
|
|
},
|
|
{
|
|
"path": "component.pageHeader.height",
|
|
"css": "--kbx-page-header-height",
|
|
"type": "dimension",
|
|
"role": "component",
|
|
"value": "48px"
|
|
},
|
|
{
|
|
"path": "component.commandBar.height",
|
|
"css": "--kbx-command-bar-height",
|
|
"type": "dimension",
|
|
"role": "component",
|
|
"value": "44px"
|
|
},
|
|
{
|
|
"path": "component.form.labelWidth",
|
|
"css": "--kbx-label-width",
|
|
"type": "dimension",
|
|
"role": "component",
|
|
"value": "96px"
|
|
},
|
|
{
|
|
"path": "component.touch.controlHeight",
|
|
"css": "--kbx-control-touch",
|
|
"type": "dimension",
|
|
"role": "component",
|
|
"value": "52px"
|
|
}
|
|
],
|
|
"modes": {
|
|
"compact": {
|
|
"component.control.height": "34px",
|
|
"component.grid.rowHeight": "34px",
|
|
"component.grid.headerHeight": "36px"
|
|
},
|
|
"comfortable": {
|
|
"component.control.height": "38px",
|
|
"component.grid.rowHeight": "40px",
|
|
"component.grid.headerHeight": "40px"
|
|
},
|
|
"touch": {
|
|
"component.control.height": "52px",
|
|
"component.grid.rowHeight": "52px",
|
|
"component.grid.headerHeight": "48px"
|
|
}
|
|
}
|
|
}
|