@s_and_a/arrow-ui-design-remix 0.0.0-stage → 0.1.1

package/dist/covers.generated.d.ts

@@ -0,0 +1,146 @@
+/** このデザインが見た目を用意した部品と、その契約の版（parts/*.css の @covers から）。 */
+export declare const covers: {
+    readonly ArAffix: "1.0.0";
+    readonly ArAlert: "1.1.0";
+    readonly ArAnchor: "1.0.0";
+    readonly ArAppFooter: "1.0.0";
+    readonly ArAppHeader: "1.1.0";
+    readonly ArApprovalFlow: "1.0.0";
+    readonly ArAuthPanel: "1.0.0";
+    readonly ArAutoComplete: "1.0.0";
+    readonly ArAvatar: "1.1.1";
+    readonly ArAvatarGroup: "1.0.0";
+    readonly ArBadge: "1.1.0";
+    readonly ArBalloon: "1.0.0";
+    readonly ArBorderBeam: "1.0.0";
+    readonly ArBottomNav: "1.1.0";
+    readonly ArBreadcrumb: "1.0.0";
+    readonly ArButton: "1.0.0";
+    readonly ArCalendar: "1.1.0";
+    readonly ArCard: "1.1.0";
+    readonly ArCarousel: "1.0.0";
+    readonly ArCascader: "1.0.0";
+    readonly ArChangedValue: "1.2.0";
+    readonly ArCheckbox: "1.1.0";
+    readonly ArCheckboxGroup: "1.1.0";
+    readonly ArChip: "1.0.0";
+    readonly ArChoiceCard: "1.1.0";
+    readonly ArCollapse: "1.1.0";
+    readonly ArColorPicker: "1.1.0";
+    readonly ArColorSwatches: "1.0.0";
+    readonly ArCompact: "1.0.0";
+    readonly ArDateInput: "1.1.0";
+    readonly ArDatePicker: "1.1.0";
+    readonly ArDateRange: "1.1.0";
+    readonly ArDateTimeInput: "1.1.0";
+    readonly ArDateView: "1.0.0";
+    readonly ArDaySummary: "1.0.0";
+    readonly ArDescriptions: "1.0.0";
+    readonly ArDivider: "1.0.0";
+    readonly ArDocumentBlock: "1.0.0";
+    readonly ArDrawer: "1.1.0";
+    readonly ArDropdown: "1.1.0";
+    readonly ArDurationInput: "1.1.0";
+    readonly ArEllipsis: "1.0.0";
+    readonly ArEmpty: "1.0.0";
+    readonly ArExample: "1.0.0";
+    readonly ArField: "1.0.0";
+    readonly ArFlagGroup: "1.1.0";
+    readonly ArFlagView: "1.0.0";
+    readonly ArFloatButton: "1.0.0";
+    readonly ArForm: "1.0.0";
+    readonly ArIcon: "1.0.0";
+    readonly ArImage: "1.0.0";
+    readonly ArInfo: "1.0.0";
+    readonly ArInputNumber: "1.0.0";
+    readonly ArItem: "1.1.0";
+    readonly ArKanaInput: "1.0.0";
+    readonly ArKanaText: "1.0.0";
+    readonly ArLayout: "1.0.0";
+    readonly ArLink: "1.0.0";
+    readonly ArList: "1.0.0";
+    readonly ArLogoSpin: "1.0.0";
+    readonly ArMapPreview: "1.0.0";
+    readonly ArMentions: "1.0.0";
+    readonly ArMenu: "1.0.0";
+    readonly ArMenuTile: "1.0.0";
+    readonly ArMessage: "1.0.0";
+    readonly ArMessageHost: "1.0.0";
+    readonly ArMobileHeader: "1.1.0";
+    readonly ArModal: "1.1.0";
+    readonly ArMonthDayInput: "1.1.0";
+    readonly ArNotification: "1.0.0";
+    readonly ArNotificationHost: "1.0.0";
+    readonly ArOrgChart: "1.0.0";
+    readonly ArOtpInput: "1.0.0";
+    readonly ArPageHeading: "1.0.0";
+    readonly ArPagination: "1.0.0";
+    readonly ArParagraph: "1.0.0";
+    readonly ArPayslip: "1.0.0";
+    readonly ArPdfViewer: "1.0.0";
+    readonly ArPeriodBox: "1.0.0";
+    readonly ArPeriodNav: "1.1.0";
+    readonly ArPills: "1.0.0";
+    readonly ArPointerBadge: "1.0.0";
+    readonly ArPopconfirm: "1.0.0";
+    readonly ArPopover: "1.0.0";
+    readonly ArProgress: "1.0.0";
+    readonly ArPunchButton: "1.0.0";
+    readonly ArQRCode: "1.0.0";
+    readonly ArRadio: "1.1.0";
+    readonly ArRadioGroup: "1.2.0";
+    readonly ArRate: "1.0.0";
+    readonly ArResult: "1.0.0";
+    readonly ArRibbon: "1.0.0";
+    readonly ArRichTextEditor: "1.0.0";
+    readonly ArSaveBar: "1.0.0";
+    readonly ArSectionHead: "1.0.0";
+    readonly ArSectionMenu: "1.0.0";
+    readonly ArSegmented: "1.2.0";
+    readonly ArSelect: "1.3.0";
+    readonly ArShiftChart: "1.0.0";
+    readonly ArShiftDaySheet: "1.0.0";
+    readonly ArShiftGrid: "1.1.0";
+    readonly ArShiftViewTable: "1.0.0";
+    readonly ArSkeleton: "1.0.0";
+    readonly ArSlider: "1.0.0";
+    readonly ArSpin: "1.1.0";
+    readonly ArSplitter: "1.0.0";
+    readonly ArStatistic: "1.0.0";
+    readonly ArStepper: "1.1.0";
+    readonly ArSteps: "1.1.0";
+    readonly ArStepSelect: "1.0.0";
+    readonly ArSubItem: "1.0.0";
+    readonly ArSwitch: "1.1.0";
+    readonly ArTable: "1.4.0";
+    readonly ArTableHeader: "1.0.0";
+    readonly ArTabs: "1.1.0";
+    readonly ArTag: "1.0.0";
+    readonly ArText: "1.0.0";
+    readonly ArTextarea: "1.1.0";
+    readonly ArTextInput: "1.1.0";
+    readonly ArThumbnail: "1.1.0";
+    readonly ArTimeChart: "1.0.0";
+    readonly ArTimeInput: "1.1.0";
+    readonly ArTimeline: "1.0.0";
+    readonly ArTimePicker: "1.0.0";
+    readonly ArTimeRange: "1.0.0";
+    readonly ArTitle: "1.0.0";
+    readonly ArToast: "1.0.0";
+    readonly ArTooltip: "1.1.0";
+    readonly ArTour: "1.0.0";
+    readonly ArTransfer: "1.0.0";
+    readonly ArTree: "1.0.0";
+    readonly ArTreeSelect: "1.1.0";
+    readonly ArTreeTable: "1.1.0";
+    readonly ArUpload: "1.2.0";
+    readonly ArVariablePanel: "1.0.0";
+    readonly ArViewOptions: "1.1.0";
+    readonly ArWatermark: "1.0.0";
+    readonly ArWeekdayPicker: "1.1.0";
+    readonly ArWizard: "1.0.0";
+    readonly ArYearInput: "1.1.0";
+    readonly ArYearMonthInput: "1.1.0";
+    readonly ArZipInput: "1.2.0";
+    readonly ArZoomControl: "1.0.0";
+};

package/dist/covers.generated.js

@@ -0,0 +1,147 @@
+// このファイルは scripts/gen-registry.mjs が作る。手で直さない。
+/** このデザインが見た目を用意した部品と、その契約の版（parts/*.css の @covers から）。 */
+export const covers = {
+    ArAffix: "1.0.0",
+    ArAlert: "1.1.0",
+    ArAnchor: "1.0.0",
+    ArAppFooter: "1.0.0",
+    ArAppHeader: "1.1.0",
+    ArApprovalFlow: "1.0.0",
+    ArAuthPanel: "1.0.0",
+    ArAutoComplete: "1.0.0",
+    ArAvatar: "1.1.1",
+    ArAvatarGroup: "1.0.0",
+    ArBadge: "1.1.0",
+    ArBalloon: "1.0.0",
+    ArBorderBeam: "1.0.0",
+    ArBottomNav: "1.1.0",
+    ArBreadcrumb: "1.0.0",
+    ArButton: "1.0.0",
+    ArCalendar: "1.1.0",
+    ArCard: "1.1.0",
+    ArCarousel: "1.0.0",
+    ArCascader: "1.0.0",
+    ArChangedValue: "1.2.0",
+    ArCheckbox: "1.1.0",
+    ArCheckboxGroup: "1.1.0",
+    ArChip: "1.0.0",
+    ArChoiceCard: "1.1.0",
+    ArCollapse: "1.1.0",
+    ArColorPicker: "1.1.0",
+    ArColorSwatches: "1.0.0",
+    ArCompact: "1.0.0",
+    ArDateInput: "1.1.0",
+    ArDatePicker: "1.1.0",
+    ArDateRange: "1.1.0",
+    ArDateTimeInput: "1.1.0",
+    ArDateView: "1.0.0",
+    ArDaySummary: "1.0.0",
+    ArDescriptions: "1.0.0",
+    ArDivider: "1.0.0",
+    ArDocumentBlock: "1.0.0",
+    ArDrawer: "1.1.0",
+    ArDropdown: "1.1.0",
+    ArDurationInput: "1.1.0",
+    ArEllipsis: "1.0.0",
+    ArEmpty: "1.0.0",
+    ArExample: "1.0.0",
+    ArField: "1.0.0",
+    ArFlagGroup: "1.1.0",
+    ArFlagView: "1.0.0",
+    ArFloatButton: "1.0.0",
+    ArForm: "1.0.0",
+    ArIcon: "1.0.0",
+    ArImage: "1.0.0",
+    ArInfo: "1.0.0",
+    ArInputNumber: "1.0.0",
+    ArItem: "1.1.0",
+    ArKanaInput: "1.0.0",
+    ArKanaText: "1.0.0",
+    ArLayout: "1.0.0",
+    ArLink: "1.0.0",
+    ArList: "1.0.0",
+    ArLogoSpin: "1.0.0",
+    ArMapPreview: "1.0.0",
+    ArMentions: "1.0.0",
+    ArMenu: "1.0.0",
+    ArMenuTile: "1.0.0",
+    ArMessage: "1.0.0",
+    ArMessageHost: "1.0.0",
+    ArMobileHeader: "1.1.0",
+    ArModal: "1.1.0",
+    ArMonthDayInput: "1.1.0",
+    ArNotification: "1.0.0",
+    ArNotificationHost: "1.0.0",
+    ArOrgChart: "1.0.0",
+    ArOtpInput: "1.0.0",
+    ArPageHeading: "1.0.0",
+    ArPagination: "1.0.0",
+    ArParagraph: "1.0.0",
+    ArPayslip: "1.0.0",
+    ArPdfViewer: "1.0.0",
+    ArPeriodBox: "1.0.0",
+    ArPeriodNav: "1.1.0",
+    ArPills: "1.0.0",
+    ArPointerBadge: "1.0.0",
+    ArPopconfirm: "1.0.0",
+    ArPopover: "1.0.0",
+    ArProgress: "1.0.0",
+    ArPunchButton: "1.0.0",
+    ArQRCode: "1.0.0",
+    ArRadio: "1.1.0",
+    ArRadioGroup: "1.2.0",
+    ArRate: "1.0.0",
+    ArResult: "1.0.0",
+    ArRibbon: "1.0.0",
+    ArRichTextEditor: "1.0.0",
+    ArSaveBar: "1.0.0",
+    ArSectionHead: "1.0.0",
+    ArSectionMenu: "1.0.0",
+    ArSegmented: "1.2.0",
+    ArSelect: "1.3.0",
+    ArShiftChart: "1.0.0",
+    ArShiftDaySheet: "1.0.0",
+    ArShiftGrid: "1.1.0",
+    ArShiftViewTable: "1.0.0",
+    ArSkeleton: "1.0.0",
+    ArSlider: "1.0.0",
+    ArSpin: "1.1.0",
+    ArSplitter: "1.0.0",
+    ArStatistic: "1.0.0",
+    ArStepper: "1.1.0",
+    ArSteps: "1.1.0",
+    ArStepSelect: "1.0.0",
+    ArSubItem: "1.0.0",
+    ArSwitch: "1.1.0",
+    ArTable: "1.4.0",
+    ArTableHeader: "1.0.0",
+    ArTabs: "1.1.0",
+    ArTag: "1.0.0",
+    ArText: "1.0.0",
+    ArTextarea: "1.1.0",
+    ArTextInput: "1.1.0",
+    ArThumbnail: "1.1.0",
+    ArTimeChart: "1.0.0",
+    ArTimeInput: "1.1.0",
+    ArTimeline: "1.0.0",
+    ArTimePicker: "1.0.0",
+    ArTimeRange: "1.0.0",
+    ArTitle: "1.0.0",
+    ArToast: "1.0.0",
+    ArTooltip: "1.1.0",
+    ArTour: "1.0.0",
+    ArTransfer: "1.0.0",
+    ArTree: "1.0.0",
+    ArTreeSelect: "1.1.0",
+    ArTreeTable: "1.1.0",
+    ArUpload: "1.2.0",
+    ArVariablePanel: "1.0.0",
+    ArViewOptions: "1.1.0",
+    ArWatermark: "1.0.0",
+    ArWeekdayPicker: "1.1.0",
+    ArWizard: "1.0.0",
+    ArYearInput: "1.1.0",
+    ArYearMonthInput: "1.1.0",
+    ArZipInput: "1.2.0",
+    ArZoomControl: "1.0.0",
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export declare const remixDesign: import("@s_and_a/arrow-ui/design").ArDesign;
+export default remixDesign;
+export declare const remixTokens: import("@s_and_a/arrow-ui/product").DesignTokens;

package/dist/index.js

@@ -0,0 +1,82 @@
+/**
+ * remix — ARROW リミックスの見た目。
+ * 落ち着いた青を基本に、ページごとのテーマ色・やわらかい帯・角丸10の部品。テーマ色の上の文字はすべて白。
+ */
+import { defineDesign } from "@s_and_a/arrow-ui/design";
+import { covers } from "./covers.generated.js";
+import { derivePalette } from "@s_and_a/arrow-ui-tokens";
+export const remixDesign = defineDesign({
+    id: "remix",
+    label: "ARROW リミックス",
+    tokens: {
+        "color.text": "#1F2933",
+        "color.text-secondary": "#4A5562",
+        "color.text-muted": "#66727F",
+        "color.text-faint": "#A3AEB9",
+        "color.border": "#E6EBF0",
+        "color.border-subtle": "#F0F3F6",
+        "color.field": "#CBD5DF",
+        "color.surface": "#FFFFFF",
+        "color.surface-alt": "#F8FAFC",
+        "color.bg": "#EEF2F6",
+        "color.hover": "#F2F5F8",
+        "color.overlay": "rgba(31,41,51,.42)",
+        "color.danger": "#C0322B",
+        "color.danger-ink": "#B02D27",
+        "color.danger-subtle": "#FCEBEA",
+        "color.warn": "#8A4F00",
+        "color.warn-subtle": "#FFF1DB",
+        "color.warn-line": "#E8B66B",
+        "color.ok": "#1E7A4C",
+        "color.ok-subtle": "#E3F4EA",
+        "color.sun": "#C8322B",
+        "color.sat": "#2563C9",
+        "color.event": "#8E6BC4",
+        "color.event-subtle": "#F1EBFA",
+        "font.family": "'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif",
+        "font.family-numeric": "'Noto Sans JP','Hiragino Sans',sans-serif",
+        "font.size-caption": "11.5px",
+        "font.size-label": "12.5px",
+        "font.size-body": "13.5px",
+        "font.size-control": "14px",
+        "font.size-heading": "16px",
+        "font.size-title": "18px",
+        "font.weight-regular": "400",
+        "font.weight-strong": "700",
+        "space.1": "4px",
+        "space.2": "8px",
+        "space.3": "12px",
+        "space.4": "16px",
+        "space.5": "20px",
+        "space.6": "24px",
+        "space.7": "28px",
+        "space.8": "32px",
+        "radius.chip": "5px",
+        "radius.control": "10px",
+        "radius.cell": "12px",
+        "radius.card": "18px",
+        "shadow.card": "0 1px 2px rgba(31,41,51,.06),0 10px 30px -12px rgba(31,41,51,.12)",
+        "shadow.pop": "0 18px 44px rgba(31,41,51,.18),0 0 0 1px rgba(31,41,51,.06)",
+        "shadow.modal": "0 24px 60px rgba(31,41,51,.28)",
+        "size.control-sm": "30px",
+        "size.control-md": "36px",
+        "size.control-lg": "42px",
+        "motion.fast": ".15s",
+    },
+    // テーマ色：ARROW デザインシステムの th-shift・th-att・th-pay・th-doc・th-notice・th-admin と同じ値
+    palettes: {
+        blue: { "accent": "#5591CE", "accent-ink": "#2C6AA6", "on-accent": "#fff", "accent-hi": "#7AA9D9", "accent-strong": "#497DB1", "accent-faint": "#F8FBFD", "accent-subtle": "#F0F5FB", "accent-muted": "#DDE9F5", "accent-line": "#BBD3EB", "accent-ring": "rgba(85,145,206,.24)", "on-accent-shadow": "none" },
+        green: { "accent": "#4EB187", "accent-ink": "#387F61", "on-accent": "#fff", "accent-hi": "#75C2A1", "accent-strong": "#439874", "accent-faint": "#F8FCFA", "accent-subtle": "#EFF8F4", "accent-muted": "#DCEFE7", "accent-line": "#B8E0CF", "accent-ring": "rgba(78,177,135,.24)", "on-accent-shadow": "none" },
+        yellow: { "accent": "#D1AA00", "accent-ink": "#8A7000", "on-accent": "#fff", "accent-hi": "#DBBD38", "accent-strong": "#B49200", "accent-faint": "#FDFCF5", "accent-subtle": "#FBF7E8", "accent-muted": "#F6EECC", "accent-line": "#EDDD99", "accent-ring": "rgba(209,170,0,.24)", "on-accent-shadow": "0 1px 2px rgba(80,60,0,.35)" },
+        pink: { "accent": "#E389B7", "accent-ink": "#B83A7B", "on-accent": "#fff", "accent-hi": "#E9A3C7", "accent-strong": "#C3769D", "accent-faint": "#FEFAFC", "accent-subtle": "#FCF4F9", "accent-muted": "#F9E7F1", "accent-line": "#F4D0E2", "accent-ring": "rgba(227,137,183,.24)", "on-accent-shadow": "0 1px 2px rgba(90,20,55,.28)" },
+        orange: { "accent": "#EB9142", "accent-ink": "#B45E13", "on-accent": "#fff", "accent-hi": "#EFA96C", "accent-strong": "#CA7D39", "accent-faint": "#FEFBF7", "accent-subtle": "#FDF5EE", "accent-muted": "#FBE9D9", "accent-line": "#F7D3B3", "accent-ring": "rgba(235,145,66,.24)", "on-accent-shadow": "0 1px 2px rgba(90,40,0,.28)" },
+        teal: { "accent": "#6CB1B7", "accent-ink": "#407D82", "on-accent": "#fff", "accent-hi": "#8CC2C7", "accent-strong": "#5D989D", "accent-faint": "#F9FCFC", "accent-subtle": "#F2F8F9", "accent-muted": "#E2EFF1", "accent-line": "#C4E0E2", "accent-ring": "rgba(108,177,183,.24)", "on-accent-shadow": "0 1px 2px rgba(20,60,62,.3)" },
+        // 集計：仮の色（デザインシステムにまだない。設計書の「決めること」）
+        amber: derivePalette("#E07A2E", "#A9521A", "0 1px 2px rgba(90,40,0,.28)"),
+    },
+    covers,
+    styles: () => import("@s_and_a/arrow-ui-design-remix/styles.css"),
+});
+export default remixDesign;
+import { createProductTokens } from "./productTokens.js";
+export const remixTokens = createProductTokens(remixDesign);

package/dist/productTokens.d.ts

@@ -0,0 +1,3 @@
+import type { DesignTokens } from "@s_and_a/arrow-ui/product";
+import type { ArDesign } from "@s_and_a/arrow-ui/design";
+export declare function createProductTokens(design: ArDesign): DesignTokens;

package/dist/productTokens.js

@@ -0,0 +1,37 @@
+import { classicTokens } from "@s_and_a/arrow-ui/product";
+export function createProductTokens(design) {
+    const { tokens: library, palettes } = design;
+    return {
+        ...classicTokens,
+        "color-primary": palettes.blue.accent,
+        "color-link": palettes.blue["accent-ink"],
+        "color-danger": library["color.danger"],
+        "color-surface": library["color.surface"],
+        "color-header": library["color.bg"],
+        "color-text": library["color.text"],
+        "color-muted": library["color.text-muted"],
+        "color-border": library["color.field"],
+        "section-shift": palettes.blue.accent,
+        "section-attendance": palettes.green.accent,
+        "section-payment": palettes.yellow.accent,
+        "section-aggregation": palettes.amber.accent,
+        "section-document": palettes.pink.accent,
+        "section-notification": palettes.orange.accent,
+        "section-other": palettes.teal.accent,
+        "section-shift-hover": palettes.blue["accent-hi"],
+        "section-attendance-hover": palettes.green["accent-hi"],
+        "section-payment-hover": palettes.yellow["accent-hi"],
+        "section-aggregation-hover": palettes.amber["accent-hi"],
+        "section-document-hover": palettes.pink["accent-hi"],
+        "section-notification-hover": palettes.orange["accent-hi"],
+        "button-add": palettes.blue.accent,
+        "button-edit": library["color.ok"],
+        "button-delete": library["color.danger"],
+        "button-radius": library["radius.control"],
+        "card-border": library["color.border"],
+        "card-radius": library["radius.card"],
+        "title-radius": library["radius.control"],
+        "tab-radius": `${library["radius.control"]} ${library["radius.control"]} 0 0`,
+        "table-border": library["color.border"],
+    };
+}

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@s_and_a/arrow-ui-design-remix",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "ARROW UI の design：remix",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "dist",
+    "src/styles.css",
+    "src/parts"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json"
+  },
+  "peerDependencies": {
+    "@s_and_a/arrow-ui": "0.1.1"
+  },
+  "dependencies": {
+    "@s_and_a/arrow-ui-tokens": "0.1.1"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ArrowKazumaChihaya/arrow-ui.git",
+    "directory": "packages/ui-design-remix"
+  },
+  "homepage": "https://arrowkazumachihaya.github.io/arrow-ui/",
+  "bugs": {
+    "url": "https://github.com/ArrowKazumaChihaya/arrow-ui/issues"
+  }
+}

package/src/parts/ArAffix.css

@@ -0,0 +1,6 @@
+/* @covers ArAffix 1.0.0 */
+/* ArAffix：.ad-affix。白の半透明とぼかし、下に線。 */
+[data-ar-design="remix"] [data-ar="affix"]{gap:8px;padding:8px 12px;transition:background var(--ar-motion-fast),box-shadow var(--ar-motion-fast)}
+[data-ar-design="remix"] [data-ar="affix"]:is([data-band="always"],[data-state~="affixed"]){background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
+[data-ar-design="remix"] [data-ar="affix"][data-position="top"]:is([data-band="always"],[data-state~="affixed"]){border-bottom:1px solid var(--ar-color-border)}
+[data-ar-design="remix"] [data-ar="affix"][data-position="bottom"]:is([data-band="always"],[data-state~="affixed"]){border-top:1px solid var(--ar-color-border)}

package/src/parts/ArAlert.css

@@ -0,0 +1,19 @@
+/* @covers ArAlert 1.1.0 */
+/* .alert：info はテーマ色の淡い面、ok・warn・danger は意味の色。neutral はロック中の帯（.v-lock）。banner は角丸なし。 */
+[data-ar-design="remix"] [data-ar="alert"]{gap:10px;padding:10px 12px;border-radius:var(--ar-radius-cell);font-size:13px;line-height:1.6;font-feature-settings:"palt" 1}
+[data-ar-design="remix"] [data-ar="alert"]>[data-part="content"]>[data-part="title"]{font-weight:var(--ar-font-weight-strong)}
+[data-ar-design="remix"] [data-ar="alert"]>[data-part="content"]>[data-part="body"] a{color:inherit;font-weight:var(--ar-font-weight-strong)}
+[data-ar-design="remix"] [data-ar="alert"]>[data-part="action"]{align-self:center;gap:6px;margin:-4px 0}
+[data-ar-design="remix"] [data-ar="alert"]>[data-part="close"]{align-self:flex-start;border:0;background:none;padding:0;color:inherit;opacity:.6;border-radius:4px;transition:opacity var(--ar-motion-fast)}
+[data-ar-design="remix"] [data-ar="alert"]>[data-part="close"]:hover{opacity:1}
+[data-ar-design="remix"] [data-ar="alert"]>[data-part="close"]:focus-visible{outline:0;opacity:1;box-shadow:0 0 0 3px var(--ar-accent-ring)}
+[data-ar-design="remix"] [data-ar="alert"][data-tone="info"]{background:var(--ar-accent-subtle);color:var(--ar-accent-ink)}
+[data-ar-design="remix"] [data-ar="alert"][data-tone="ok"]{background:var(--ar-color-ok-subtle);color:var(--ar-color-ok)}
+[data-ar-design="remix"] [data-ar="alert"][data-tone="warn"]{background:var(--ar-color-warn-subtle);color:#6B4300}
+[data-ar-design="remix"] [data-ar="alert"][data-tone="danger"]{background:var(--ar-color-danger-subtle);color:#8F231E}
+/* ロック中・権限の帯（.v-lock）：灰の面、見出しは ink、説明は小さく */
+[data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"]{gap:8px;padding:8px 12px;border-radius:var(--ar-radius-control);background:#F4F6F9;color:#5B6672;font-size:12.5px;line-height:1.5}
+[data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"]>[data-part="icon"]{margin-top:2px}
+[data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"]>[data-part="content"]>[data-part="title"]{color:var(--ar-color-text)}
+[data-ar-design="remix"] [data-ar="alert"][data-tone="neutral"][data-titled]>[data-part="content"]>[data-part="body"]{font-size:var(--ar-font-size-caption);color:var(--ar-color-text-muted)}
+[data-ar-design="remix"] [data-ar="alert"][data-banner]{border-radius:0}

package/src/parts/ArAnchor.css

@@ -0,0 +1,12 @@
+/* @covers ArAnchor 1.0.0 */
+/* ArAnchor：.ad-anc。左に2pxの線、今いるところはテーマ色の線と文字（太字）。小見出しは一段下げて12.5px。 */
+[data-ar-design="remix"] [data-ar="anchor"]{border-left:2px solid var(--ar-color-border);font-size:13px;line-height:1.5;font-feature-settings:"palt" 1}
+[data-ar-design="remix"] [data-ar="anchor"]>[data-part="link"]{padding:5px 12px;margin-left:-2px;border-left:2px solid transparent;color:var(--ar-color-text-secondary);transition:color var(--ar-motion-fast),border-color var(--ar-motion-fast)}
+[data-ar-design="remix"] [data-ar="anchor"]>[data-part="link"]:hover{color:var(--ar-accent-ink)}
+[data-ar-design="remix"] [data-ar="anchor"]>[data-part="link"][data-level="2"]{padding-left:26px;font-size:12.5px}
+[data-ar-design="remix"] [data-ar="anchor"]>[data-part="link"][data-state~="active"]{color:var(--ar-accent-ink);font-weight:700;border-left-color:var(--ar-accent)}
+[data-ar-design="remix"] [data-ar="anchor"]>[data-part="link"]:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ar-accent-ring);border-radius:4px}
+[data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]{border-left:0;border-bottom:2px solid var(--ar-color-border)}
+[data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]>[data-part="link"]{margin:0 0 -2px;border-left:0;border-bottom:2px solid transparent}
+[data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]>[data-part="link"][data-level="2"]{padding-left:12px}
+[data-ar-design="remix"] [data-ar="anchor"][data-direction="horizontal"]>[data-part="link"][data-state~="active"]{border-bottom-color:var(--ar-accent)}