@refineui/tokens 1.0.0

package/dist/refineui-typography.css

@@ -0,0 +1,111 @@
+@utility refineui-typo-heading-1 {
+  font-family: var(--refineui-typography-heading-1-font-family);
+  font-size: var(--refineui-typography-heading-1-font-size);
+  font-weight: var(--refineui-typography-heading-1-font-weight);
+  line-height: var(--refineui-typography-heading-1-line-height);
+}
+
+@utility refineui-typo-heading-2 {
+  font-family: var(--refineui-typography-heading-2-font-family);
+  font-size: var(--refineui-typography-heading-2-font-size);
+  font-weight: var(--refineui-typography-heading-2-font-weight);
+  line-height: var(--refineui-typography-heading-2-line-height);
+}
+
+@utility refineui-typo-heading-3 {
+  font-family: var(--refineui-typography-heading-3-font-family);
+  font-size: var(--refineui-typography-heading-3-font-size);
+  font-weight: var(--refineui-typography-heading-3-font-weight);
+  line-height: var(--refineui-typography-heading-3-line-height);
+}
+
+@utility refineui-typo-heading-4 {
+  font-family: var(--refineui-typography-heading-4-font-family);
+  font-size: var(--refineui-typography-heading-4-font-size);
+  font-weight: var(--refineui-typography-heading-4-font-weight);
+  line-height: var(--refineui-typography-heading-4-line-height);
+}
+
+@utility refineui-typo-title-1 {
+  font-family: var(--refineui-typography-title-1-font-family);
+  font-size: var(--refineui-typography-title-1-font-size);
+  font-weight: var(--refineui-typography-title-1-font-weight);
+  line-height: var(--refineui-typography-title-1-line-height);
+}
+
+@utility refineui-typo-title-2 {
+  font-family: var(--refineui-typography-title-2-font-family);
+  font-size: var(--refineui-typography-title-2-font-size);
+  font-weight: var(--refineui-typography-title-2-font-weight);
+  line-height: var(--refineui-typography-title-2-line-height);
+}
+
+@utility refineui-typo-title-3 {
+  font-family: var(--refineui-typography-title-3-font-family);
+  font-size: var(--refineui-typography-title-3-font-size);
+  font-weight: var(--refineui-typography-title-3-font-weight);
+  line-height: var(--refineui-typography-title-3-line-height);
+}
+
+@utility refineui-typo-sub-title-1 {
+  font-family: var(--refineui-typography-sub-title-1-font-family);
+  font-size: var(--refineui-typography-sub-title-1-font-size);
+  font-weight: var(--refineui-typography-sub-title-1-font-weight);
+  line-height: var(--refineui-typography-sub-title-1-line-height);
+}
+
+@utility refineui-typo-sub-title-2 {
+  font-family: var(--refineui-typography-sub-title-2-font-family);
+  font-size: var(--refineui-typography-sub-title-2-font-size);
+  font-weight: var(--refineui-typography-sub-title-2-font-weight);
+  line-height: var(--refineui-typography-sub-title-2-line-height);
+}
+
+@utility refineui-typo-body-1 {
+  font-family: var(--refineui-typography-body-1-font-family);
+  font-size: var(--refineui-typography-body-1-font-size);
+  font-weight: var(--refineui-typography-body-1-font-weight);
+  line-height: var(--refineui-typography-body-1-line-height);
+}
+
+@utility refineui-typo-body-2 {
+  font-family: var(--refineui-typography-body-2-font-family);
+  font-size: var(--refineui-typography-body-2-font-size);
+  font-weight: var(--refineui-typography-body-2-font-weight);
+  line-height: var(--refineui-typography-body-2-line-height);
+}
+
+@utility refineui-typo-body-3 {
+  font-family: var(--refineui-typography-body-3-font-family);
+  font-size: var(--refineui-typography-body-3-font-size);
+  font-weight: var(--refineui-typography-body-3-font-weight);
+  line-height: var(--refineui-typography-body-3-line-height);
+}
+
+@utility refineui-typo-body-4 {
+  font-family: var(--refineui-typography-body-4-font-family);
+  font-size: var(--refineui-typography-body-4-font-size);
+  font-weight: var(--refineui-typography-body-4-font-weight);
+  line-height: var(--refineui-typography-body-4-line-height);
+}
+
+@utility refineui-typo-caption-1 {
+  font-family: var(--refineui-typography-caption-1-font-family);
+  font-size: var(--refineui-typography-caption-1-font-size);
+  font-weight: var(--refineui-typography-caption-1-font-weight);
+  line-height: var(--refineui-typography-caption-1-line-height);
+}
+
+@utility refineui-typo-caption-2 {
+  font-family: var(--refineui-typography-caption-2-font-family);
+  font-size: var(--refineui-typography-caption-2-font-size);
+  font-weight: var(--refineui-typography-caption-2-font-weight);
+  line-height: var(--refineui-typography-caption-2-line-height);
+}
+
+@utility refineui-typo-caption-3 {
+  font-family: var(--refineui-typography-caption-3-font-family);
+  font-size: var(--refineui-typography-caption-3-font-size);
+  font-weight: var(--refineui-typography-caption-3-font-weight);
+  line-height: var(--refineui-typography-caption-3-line-height);
+}

package/dist/spec/component-sizes.json

@@ -0,0 +1,485 @@
+{
+  "schemaVersion": 1,
+  "tokens": [
+    {
+      "name": "avatarStatusXxxlarge",
+      "cssVar": "--refineui-size-avatar-status-xxxlarge",
+      "references": [
+        "foundation.foundationSize140"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "buttonMinHeightSm",
+      "cssVar": "--refineui-size-button-min-height-sm",
+      "references": [
+        "foundation.foundationSize280"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "buttonMinHeightMd",
+      "cssVar": "--refineui-size-button-min-height-md",
+      "references": [
+        "foundation.foundationSize360"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "buttonMinHeightLg",
+      "cssVar": "--refineui-size-button-min-height-lg",
+      "references": [
+        "foundation.foundationSize480"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "chipMinHeightSm",
+      "cssVar": "--refineui-size-chip-min-height-sm",
+      "references": [
+        "foundation.foundationSize200"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "chipMinHeightMd",
+      "cssVar": "--refineui-size-chip-min-height-md",
+      "references": [
+        "foundation.foundationSize240"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "chipMinHeightLg",
+      "cssVar": "--refineui-size-chip-min-height-lg",
+      "references": [
+        "foundation.foundationSize320"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "controlHeightSm",
+      "cssVar": "--refineui-size-control-height-sm",
+      "references": [
+        "foundation.foundationSize360"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "controlHeightMd",
+      "cssVar": "--refineui-size-control-height-md",
+      "references": [
+        "foundation.foundationSize440"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "controlHeightLg",
+      "cssVar": "--refineui-size-control-height-lg",
+      "references": [
+        "foundation.foundationSize520"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "controlTouchMin",
+      "cssVar": "--refineui-size-control-touch-min",
+      "references": [
+        "foundation.foundationSize440"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "controlCheckbox",
+      "cssVar": "--refineui-size-control-checkbox",
+      "references": [
+        "foundation.foundationSize200"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "controlCheckboxRadio",
+      "cssVar": "--refineui-size-control-checkbox-radio",
+      "references": [
+        "foundation.foundationSize200"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "controlTextareaMin",
+      "cssVar": "--refineui-size-control-textarea-min",
+      "references": [
+        "foundation.foundationSize800"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "popoverPanelWidth",
+      "cssVar": "--refineui-size-popover-panel-width",
+      "references": [
+        "foundation.foundationSize3250"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "popoverBeakInsetFromStartEdge",
+      "cssVar": "--refineui-size-popover-beak-inset-from-start-edge",
+      "references": [
+        "foundation.foundationSize340"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "popoverBeakInsetFromEndEdge",
+      "cssVar": "--refineui-size-popover-beak-inset-from-end-edge",
+      "references": [
+        "foundation.foundationSize300"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "menuPanelWidth",
+      "cssVar": "--refineui-size-menu-panel-width",
+      "references": [
+        "foundation.foundationSize2440"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "dropdownMenuWidth",
+      "cssVar": "--refineui-size-dropdown-menu-width",
+      "references": [
+        "foundation.foundationSize2440"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "sidebarWidth",
+      "cssVar": "--refineui-size-sidebar-width",
+      "references": [
+        "foundation.foundationSize2560"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "toastMinWidth",
+      "cssVar": "--refineui-size-toast-min-width",
+      "references": [
+        "foundation.foundationSize3250"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "toastMaxWidth",
+      "cssVar": "--refineui-size-toast-max-width",
+      "references": [
+        "foundation.foundationSize3250"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "dialogMaxWidth",
+      "cssVar": "--refineui-size-dialog-max-width",
+      "references": [
+        "foundation.foundationSize6000"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "dialogWidthSm",
+      "cssVar": "--refineui-size-dialog-width-sm",
+      "references": [
+        "foundation.foundationSize3000"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "drawerWidthSm",
+      "cssVar": "--refineui-size-drawer-width-sm",
+      "references": [
+        "foundation.foundationSize3200"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "drawerWidthMd",
+      "cssVar": "--refineui-size-drawer-width-md",
+      "references": [
+        "foundation.foundationSize5750"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "drawerWidthLg",
+      "cssVar": "--refineui-size-drawer-width-lg",
+      "references": [
+        "foundation.foundationSize8500"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "calendarMinWidth",
+      "cssVar": "--refineui-size-calendar-min-width",
+      "references": [
+        "foundation.foundationSize2560"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "calendarDaySize",
+      "cssVar": "--refineui-size-calendar-day-size",
+      "references": [
+        "foundation.foundationSize320"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "tooltipMaxWidth",
+      "cssVar": "--refineui-size-tooltip-max-width",
+      "references": [
+        "foundation.foundationSize2000"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinStepperWidth",
+      "cssVar": "--refineui-size-spin-stepper-width",
+      "references": [
+        "foundation.foundationSize320"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinFieldPaddingInlineStart",
+      "cssVar": "--refineui-size-spin-field-padding-inline-start",
+      "references": [
+        "foundation.foundationSize120"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "switchWidth",
+      "cssVar": "--refineui-size-switch-width",
+      "references": [
+        "foundation.foundationSize440"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "switchHeight",
+      "cssVar": "--refineui-size-switch-height",
+      "references": [
+        "foundation.foundationSize240"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "switchThumb",
+      "cssVar": "--refineui-size-switch-thumb",
+      "references": [
+        "foundation.foundationSize200"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "switchPadding",
+      "cssVar": "--refineui-size-switch-padding",
+      "references": [
+        "foundation.foundationSize20"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "progressTrackHeightSm",
+      "cssVar": "--refineui-size-progress-track-height-sm",
+      "references": [
+        "foundation.foundationSize20"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "progressTrackHeightLg",
+      "cssVar": "--refineui-size-progress-track-height-lg",
+      "references": [
+        "foundation.foundationSize40"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "sliderTrackHeightSm",
+      "cssVar": "--refineui-size-slider-track-height-sm",
+      "references": [
+        "foundation.foundationSize20"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "sliderTrackHeightMd",
+      "cssVar": "--refineui-size-slider-track-height-md",
+      "references": [
+        "foundation.foundationSize40"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "sliderInteractionHeight",
+      "cssVar": "--refineui-size-slider-interaction-height",
+      "references": [
+        "foundation.foundationSize280"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "paginationButtonMinWidth",
+      "cssVar": "--refineui-size-pagination-button-min-width",
+      "references": [
+        "foundation.foundationSize400"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "skeletonDefaultHeight",
+      "cssVar": "--refineui-size-skeleton-default-height",
+      "references": [
+        "foundation.foundationSize200"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "dividerShortEnd",
+      "cssVar": "--refineui-size-divider-short-end",
+      "references": [
+        "foundation.foundationSize80"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "dividerIconSlot",
+      "cssVar": "--refineui-size-divider-icon-slot",
+      "references": [
+        "foundation.foundationSize200"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "dividerIconCircleDiameter",
+      "cssVar": "--refineui-size-divider-icon-circle-diameter",
+      "references": [
+        "foundation.foundationSize133"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "dividerIconCircleInset",
+      "cssVar": "--refineui-size-divider-icon-circle-inset",
+      "references": [
+        "foundation.foundationSize30"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "accessibleClip",
+      "cssVar": "--refineui-size-accessible-clip",
+      "references": [
+        "foundation.foundationSize10"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerSizeXSmall",
+      "cssVar": "--refineui-size-spinner-size-x-small",
+      "references": [
+        "foundation.foundationSize160"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerSizeSmall",
+      "cssVar": "--refineui-size-spinner-size-small",
+      "references": [
+        "foundation.foundationSize200"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerSizeMedium",
+      "cssVar": "--refineui-size-spinner-size-medium",
+      "references": [
+        "foundation.foundationSize240"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerSizeLarge",
+      "cssVar": "--refineui-size-spinner-size-large",
+      "references": [
+        "foundation.foundationSize280"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerSizeXLarge",
+      "cssVar": "--refineui-size-spinner-size-x-large",
+      "references": [
+        "foundation.foundationSize320"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerSizeXXLarge",
+      "cssVar": "--refineui-size-spinner-size-xx-large",
+      "references": [
+        "foundation.foundationSize480"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerRingWidthXSmall",
+      "cssVar": "--refineui-size-spinner-ring-width-x-small",
+      "references": [
+        "foundation.foundationSize20"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerRingWidthSmall",
+      "cssVar": "--refineui-size-spinner-ring-width-small",
+      "references": [
+        "foundation.foundationSize20"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerRingWidthMedium",
+      "cssVar": "--refineui-size-spinner-ring-width-medium",
+      "references": [
+        "foundation.foundationSize20"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerRingWidthLarge",
+      "cssVar": "--refineui-size-spinner-ring-width-large",
+      "references": [
+        "foundation.foundationSize30"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerRingWidthXLarge",
+      "cssVar": "--refineui-size-spinner-ring-width-x-large",
+      "references": [
+        "foundation.foundationSize30"
+      ],
+      "status": "stable"
+    },
+    {
+      "name": "spinnerRingWidthXXLarge",
+      "cssVar": "--refineui-size-spinner-ring-width-xx-large",
+      "references": [
+        "foundation.foundationSize40"
+      ],
+      "status": "stable"
+    }
+  ]
+}

package/dist/spec/focus.json

@@ -0,0 +1,20 @@
+{
+  "schemaVersion": 1,
+  "ring": {
+    "color": {
+      "light": "var(--refineui-color-neutral-750)",
+      "dark": "var(--refineui-color-neutral-350)"
+    },
+    "width": "2px",
+    "offset": "2px",
+    "style": "solid",
+    "cssVars": {
+      "color": "--refineui-focus-ring-color",
+      "width": "--refineui-focus-ring-width",
+      "offset": "--refineui-focus-ring-offset",
+      "style": "--refineui-focus-ring-style"
+    },
+    "contract": "Use :focus-visible, not :focus, for keyboard focus rings.",
+    "status": "stable"
+  }
+}

package/dist/spec/foundation.json

@@ -0,0 +1,90 @@
+{
+  "schemaVersion": 1,
+  "categories": [
+    "colors",
+    "spacings",
+    "foundationSizes",
+    "motion"
+  ],
+  "spacings": {
+    "sizeNone": "0",
+    "sizeXXXSmall": "2px",
+    "sizeXXSmall": "4px",
+    "sizeXSmall": "6px",
+    "sizeSmall": "8px",
+    "sizeMedium": "10px",
+    "sizeLarge": "16px",
+    "sizeXLarge": "20px",
+    "sizeXXLarge": "24px",
+    "sizeXXXLarge": "32px"
+  },
+  "foundationSizes": {
+    "foundationSize10": "1px",
+    "foundationSize20": "2px",
+    "foundationSize30": "3px",
+    "foundationSize40": "4px",
+    "foundationSize60": "6px",
+    "foundationSize80": "8px",
+    "foundationSize100": "10px",
+    "foundationSize120": "12px",
+    "foundationSize133": "13.33px",
+    "foundationSize140": "14px",
+    "foundationSize160": "16px",
+    "foundationSize200": "20px",
+    "foundationSize240": "24px",
+    "foundationSize280": "28px",
+    "foundationSize300": "30px",
+    "foundationSize320": "32px",
+    "foundationSize340": "34px",
+    "foundationSize360": "36px",
+    "foundationSize400": "40px",
+    "foundationSize440": "44px",
+    "foundationSize480": "48px",
+    "foundationSize520": "52px",
+    "foundationSize540": "54px",
+    "foundationSize600": "60px",
+    "foundationSize800": "80px",
+    "foundationSize2000": "200px",
+    "foundationSize2440": "244px",
+    "foundationSize2560": "256px",
+    "foundationSize3000": "300px",
+    "foundationSize3200": "320px",
+    "foundationSize3250": "325px",
+    "foundationSize4500": "450px",
+    "foundationSize5750": "575px",
+    "foundationSize6000": "600px",
+    "foundationSize8500": "850px"
+  },
+  "motion": {
+    "duration": {
+      "duration0": "0ms",
+      "duration150": "150ms",
+      "duration180": "180ms",
+      "duration200": "200ms",
+      "duration240": "240ms",
+      "duration260": "260ms",
+      "duration280": "280ms",
+      "duration320": "320ms",
+      "duration380": "380ms",
+      "duration800": "800ms",
+      "duration1500": "1500ms"
+    },
+    "easing": {
+      "easingStandard": "cubic-bezier(0.2, 0, 0, 1)",
+      "easingEmphasized": "cubic-bezier(0.16, 1, 0.3, 1)",
+      "easingPanel": "cubic-bezier(0.32, 0.72, 0, 1)",
+      "easingContent": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "easingLinear": "linear",
+      "easingEaseOut": "ease-out",
+      "easingEaseInOut": "ease-in-out"
+    },
+    "scale": {
+      "scale96": "0.96",
+      "scale98": "0.98",
+      "scale115": "1.15"
+    },
+    "distance": {
+      "distance4": "4px"
+    }
+  }
+}