@serendie/ui 0.1.12 → 0.1.13

package/dist/design-tokens/dist/tokens.js

@@ -0,0 +1,792 @@
+const e = {
+  sd: {
+    reference: {
+      color: {
+        scale: {
+          white: {
+            1e3: "#FFFFFF"
+          },
+          black: {
+            1e3: "#000000"
+          },
+          transparency: {
+            5: "#0000000D",
+            20: "#00000033",
+            60: "#FFFFFF99"
+          },
+          gray: {
+            100: "#EFEEEB",
+            200: "#D9D8D3",
+            300: "#C8C7C2",
+            400: "#AFAEAA",
+            500: "#8C8B87",
+            600: "#696966",
+            700: "#525250",
+            800: "#3F3F3D",
+            900: "#31312F",
+            1e3: "#232322"
+          },
+          red: {
+            100: "#FCEBEA",
+            200: "#FCD6D3",
+            300: "#FDB9B4",
+            400: "#FF8F8F",
+            500: "#F84258",
+            600: "#CE0037",
+            700: "#A4002A",
+            800: "#81001F",
+            900: "#650417",
+            1e3: "#49060E"
+          },
+          chestnut: {
+            100: "#FAECE6",
+            200: "#F7D8C9",
+            300: "#F7C6B0",
+            400: "#F49567",
+            500: "#E26324",
+            600: "#AB4919",
+            700: "#803510",
+            800: "#692C0D",
+            900: "#50230D",
+            1e3: "#371B0B"
+          },
+          beige: {
+            100: "#F7EDE2",
+            200: "#F2DBC0",
+            300: "#EDC18A",
+            400: "#DAA358",
+            500: "#AF8245",
+            600: "#846132",
+            700: "#684C26",
+            800: "#503A1C",
+            900: "#3E2D17",
+            1e3: "#2B2013"
+          },
+          yellow: {
+            100: "#FEEDBE",
+            200: "#FFE885",
+            300: "#FFE600",
+            400: "#EDD202",
+            500: "#AC9301",
+            600: "#857100",
+            700: "#5F5100",
+            800: "#4A3E00",
+            900: "#3A3000",
+            1e3: "#292200"
+          },
+          green: {
+            100: "#CAF9E6",
+            200: "#AEEAD5",
+            300: "#98E1C8",
+            400: "#6ED0AE",
+            500: "#40A683",
+            600: "#2C755C",
+            700: "#266751",
+            800: "#184737",
+            900: "#12372B",
+            1e3: "#0D271E"
+          },
+          skyBlue: {
+            100: "#D9F6FC",
+            200: "#C3EFF4",
+            300: "#9CE6EC",
+            400: "#64CCD3",
+            500: "#00A3AF",
+            600: "#00757E",
+            700: "#015C63",
+            800: "#01474C",
+            900: "#02373C",
+            1e3: "#04272A"
+          },
+          blue: {
+            100: "#EFF2FC",
+            200: "#D7DEFB",
+            300: "#BFCEFC",
+            400: "#8FAEFE",
+            500: "#428CFE",
+            600: "#0A69CF",
+            700: "#0650A0",
+            800: "#043F81",
+            900: "#073165",
+            1e3: "#081E3F"
+          },
+          purple: {
+            100: "#F4ECF6",
+            200: "#EADAEE",
+            300: "#DCBDE4",
+            400: "#CC9FD9",
+            500: "#AA61C2",
+            600: "#914DA9",
+            700: "#733B85",
+            800: "#592D68",
+            900: "#462352",
+            1e3: "#32183A"
+          },
+          pink: {
+            100: "#F9EBF0",
+            200: "#F6D7E0",
+            300: "#F5C1D1",
+            400: "#F190B4",
+            500: "#EB4F8E",
+            600: "#B9336B",
+            700: "#932653",
+            800: "#711D41",
+            900: "#591734",
+            1e3: "#401026"
+          }
+        }
+      },
+      dimension: {
+        scale: {
+          0: "0px",
+          1: "1px",
+          2: "2px",
+          3: "4px",
+          4: "8px",
+          5: "12px",
+          6: "16px",
+          7: "20px",
+          8: "24px",
+          9: "28px",
+          10: "32px",
+          11: "36px",
+          12: "40px",
+          13: "48px",
+          14: "56px",
+          15: "64px",
+          16: "72px",
+          17: "80px",
+          18: "96px"
+        },
+        breakpoint: {
+          small: "640px",
+          medium: "768px",
+          large: "1024px",
+          extraLarge: "1280px"
+        }
+      },
+      elevation: {
+        opacity: {
+          scale: {
+            0: 0,
+            1: 0.1,
+            2: 0.2,
+            3: 0.3,
+            4: 0.4,
+            5: 0.5,
+            6: 0.6,
+            7: 0.7,
+            8: 0.8,
+            9: 0.9,
+            10: 1
+          }
+        }
+      },
+      typography: {
+        fontFamily: {
+          primary: "inherit",
+          monospace: "Noto Sans Mono"
+        },
+        fontWeight: {
+          regular: 400,
+          bold: 700
+        },
+        lineHeight: {
+          none: 1,
+          tight: 1.4,
+          normal: 1.6,
+          relaxed: 1.8
+        },
+        scale: {
+          expanded: {
+            fourExtraSmall: "10px",
+            threeExtraSmall: "11px",
+            twoExtraSmall: "12px",
+            extraSmall: "13px",
+            small: "14px",
+            medium: "16px",
+            large: "18px",
+            extraLarge: "21px",
+            twoExtraLarge: "26px",
+            threeExtraLarge: "32px",
+            fourExtraLarge: "43px",
+            fiveExtraLarge: "64px"
+          },
+          compact: {
+            twoExtraSmall: "10px",
+            extraSmall: "11px",
+            small: "12px",
+            medium: "14px",
+            large: "16px",
+            extraLarge: "19px",
+            twoExtraLarge: "22px",
+            threeExtraLarge: "28px",
+            fourExtraLarge: "37px",
+            fiveExtraLarge: "56px"
+          }
+        }
+      }
+    },
+    system: {
+      color: {
+        impression: {
+          primary: "#0650A0",
+          onPrimary: "#FFFFFF",
+          primaryContainer: "#0650A0",
+          onPrimaryContainer: "#FFFFFF",
+          secondary: "#BFCEFC",
+          onSecondary: "#000000",
+          secondaryContainer: "#BFCEFC",
+          onSecondaryContainer: "#000000",
+          tertiary: "#EFF2FC",
+          onTertiary: "#000000",
+          tertiaryContainer: "#EFF2FC",
+          onTertiaryContainer: "#000000",
+          notice: "#FFE600",
+          onNotice: "#000000",
+          noticeContainer: "#FFE600",
+          onNoticeContainer: "#000000",
+          negative: "#CE0037",
+          onNegative: "#FFFFFF",
+          negativeContainer: "#FCD6D3",
+          onNegativeContainer: "#000000",
+          positive: "#40A683",
+          onPositive: "#FFFFFF",
+          positiveContainer: "#40A683",
+          onPositiveContainer: "#FFFFFF"
+        },
+        component: {
+          surface: "#FFFFFF",
+          onSurface: "#000000",
+          onSurfaceVariant: "#696966",
+          inverseSurface: "#232322",
+          inverseOnSurface: "#FFFFFF",
+          outline: "#C8C7C2",
+          outlineVariant: "#8C8B87",
+          scrim: "#00000033"
+        },
+        interaction: {
+          disabled: "#EFEEEB",
+          disabledOnSurface: "#AFAEAA",
+          selectedSurface: "#BFCEFC",
+          hovered: "#00000033",
+          hoveredVariant: "#0000000D",
+          hoveredOnPrimary: "#FFFFFF99"
+        }
+      },
+      dimension: {
+        spacing: {
+          none: "0px",
+          twoExtraSmall: "4px",
+          extraSmall: "8px",
+          small: "12px",
+          medium: "16px",
+          large: "20px",
+          extraLarge: "24px",
+          twoExtraLarge: "32px",
+          threeExtraLarge: "40px",
+          fourExtraLarge: "48px",
+          fiveExtraLarge: "64px",
+          sixExtraLarge: "80px"
+        },
+        border: {
+          medium: "1px",
+          thick: "2px",
+          extraThick: "4px"
+        },
+        radius: {
+          extraSmall: "2px",
+          small: "4px",
+          medium: "8px",
+          large: "12px",
+          extraLarge: "16px",
+          full: "9999px"
+        },
+        breakpoint: {
+          compact: "0px",
+          expanded: "768px"
+        }
+      },
+      elevation: {
+        shadow: {
+          level1: {
+            color: "#0000004D",
+            offsetX: "0px",
+            offsetY: "1px",
+            blur: "2px",
+            spread: "0px"
+          },
+          level2: {
+            color: "#00000033",
+            offsetX: "0px",
+            offsetY: "1px",
+            blur: "4px",
+            spread: "0px"
+          },
+          level3: {
+            color: "#00000033",
+            offsetX: "0px",
+            offsetY: "2px",
+            blur: "8px",
+            spread: "0px"
+          },
+          level4: {
+            color: "#00000033",
+            offsetX: "0px",
+            offsetY: "4px",
+            blur: "12px",
+            spread: "0px"
+          },
+          level5: {
+            color: "#00000033",
+            offsetX: "0px",
+            offsetY: "8px",
+            blur: "24px",
+            spread: "0px"
+          }
+        },
+        zIndex: {
+          deepDive: -1e3,
+          base: 0,
+          docked: 10,
+          dropdown: 500,
+          modal: 1e3,
+          toast: 2e3
+        }
+      },
+      typography: {
+        display: {
+          small_compact: {
+            fontSize: "37px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          medium_compact: {
+            fontSize: "56px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          small_expanded: {
+            fontSize: "43px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          medium_expanded: {
+            fontSize: "64px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          }
+        },
+        headline: {
+          small_compact: {
+            fontSize: "28px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          medium_compact: {
+            fontSize: "37px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          large_compact: {
+            fontSize: "56px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          small_expanded: {
+            fontSize: "21px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          medium_expanded: {
+            fontSize: "26px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          large_expanded: {
+            fontSize: "32px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          }
+        },
+        title: {
+          small_compact: {
+            fontSize: "16px",
+            fontWeight: 700,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          medium_compact: {
+            fontSize: "19px",
+            fontWeight: 700,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          large_compact: {
+            fontSize: "22px",
+            fontWeight: 700,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          small_expanded: {
+            fontSize: "14px",
+            fontWeight: 700,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          medium_expanded: {
+            fontSize: "16px",
+            fontWeight: 700,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          large_expanded: {
+            fontSize: "18px",
+            fontWeight: 700,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          }
+        },
+        body: {
+          extraSmall_compact: {
+            fontSize: "12px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.4
+          },
+          small_compact: {
+            fontSize: "14px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          medium_compact: {
+            fontSize: "16px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          large_compact: {
+            fontSize: "19px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          extraSmall_expanded: {
+            fontSize: "12px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.4
+          },
+          small_expanded: {
+            fontSize: "13px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          medium_expanded: {
+            fontSize: "14px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          },
+          large_expanded: {
+            fontSize: "16px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1.6
+          }
+        },
+        label: {
+          small_compact: {
+            fontSize: "11px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1
+          },
+          medium_compact: {
+            fontSize: "12px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1
+          },
+          large_compact: {
+            fontSize: "14px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1
+          },
+          extraLarge_compact: {
+            fontSize: "16px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1
+          },
+          small_expanded: {
+            fontSize: "11px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1
+          },
+          medium_expanded: {
+            fontSize: "12px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1
+          },
+          large_expanded: {
+            fontSize: "13px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1
+          },
+          extraLarge_expanded: {
+            fontSize: "14px",
+            fontWeight: 400,
+            fontFamily: "inherit",
+            lineHeight: 1
+          }
+        }
+      }
+    }
+  },
+  themes: {
+    asagi: {
+      tokens: {
+        colors: {
+          sd: {
+            system: {
+              color: {
+                impression: {
+                  primary: "#00757E",
+                  onPrimary: "#FFFFFF",
+                  primaryContainer: "#00757E",
+                  onPrimaryContainer: "#FFFFFF",
+                  secondary: "#AEEAD5",
+                  onSecondary: "#000000",
+                  secondaryContainer: "#AEEAD5",
+                  onSecondaryContainer: "#000000",
+                  tertiary: "#EFEEEB",
+                  onTertiary: "#000000",
+                  tertiaryContainer: "#EFEEEB",
+                  onTertiaryContainer: "#000000",
+                  notice: "#FFE600",
+                  onNotice: "#000000",
+                  noticeContainer: "#FFE600",
+                  onNoticeContainer: "#000000",
+                  negative: "#CE0037",
+                  onNegative: "#FFFFFF",
+                  negativeContainer: "#FCD6D3",
+                  onNegativeContainer: "#000000",
+                  positive: "#40A683",
+                  onPositive: "#FFFFFF",
+                  positiveContainer: "#40A683",
+                  onPositiveContainer: "#FFFFFF"
+                },
+                component: {
+                  surface: "#FFFFFF",
+                  onSurface: "#000000",
+                  onSurfaceVariant: "#696966",
+                  inverseSurface: "#232322",
+                  inverseOnSurface: "#FFFFFF",
+                  outline: "#C8C7C2",
+                  outlineVariant: "#8C8B87",
+                  scrim: "#00000033"
+                },
+                interaction: {
+                  disabled: "#EFEEEB",
+                  disabledOnSurface: "#AFAEAA",
+                  selectedSurface: "#AEEAD5",
+                  hovered: "#00000033",
+                  hoveredVariant: "#0000000D",
+                  hoveredOnPrimary: "#FFFFFF99"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    kurikawa: {
+      tokens: {
+        colors: {
+          sd: {
+            system: {
+              color: {
+                impression: {
+                  primary: "#803510",
+                  onPrimary: "#FFFFFF",
+                  primaryContainer: "#803510",
+                  onPrimaryContainer: "#FFFFFF",
+                  secondary: "#F7C6B0",
+                  onSecondary: "#000000",
+                  secondaryContainer: "#F7C6B0",
+                  onSecondaryContainer: "#000000",
+                  tertiary: "#F7EDE2",
+                  onTertiary: "#000000",
+                  tertiaryContainer: "#F7EDE2",
+                  onTertiaryContainer: "#000000",
+                  notice: "#FFE600",
+                  onNotice: "#000000",
+                  noticeContainer: "#FFE600",
+                  onNoticeContainer: "#000000",
+                  negative: "#CE0037",
+                  onNegative: "#FFFFFF",
+                  negativeContainer: "#FCD6D3",
+                  onNegativeContainer: "#000000",
+                  positive: "#40A683",
+                  onPositive: "#FFFFFF",
+                  positiveContainer: "#40A683",
+                  onPositiveContainer: "#FFFFFF"
+                },
+                component: {
+                  surface: "#FFFFFF",
+                  onSurface: "#000000",
+                  onSurfaceVariant: "#696966",
+                  inverseSurface: "#232322",
+                  inverseOnSurface: "#FFFFFF",
+                  outline: "#C8C7C2",
+                  outlineVariant: "#8C8B87",
+                  scrim: "#00000033"
+                },
+                interaction: {
+                  disabled: "#EFEEEB",
+                  disabledOnSurface: "#AFAEAA",
+                  selectedSurface: "#F7C6B0",
+                  hovered: "#00000033",
+                  hoveredVariant: "#0000000D",
+                  hoveredOnPrimary: "#FFFFFF99"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    sumire: {
+      tokens: {
+        colors: {
+          sd: {
+            system: {
+              color: {
+                impression: {
+                  primary: "#733B85",
+                  onPrimary: "#FFFFFF",
+                  primaryContainer: "#733B85",
+                  onPrimaryContainer: "#FFFFFF",
+                  secondary: "#DCBDE4",
+                  onSecondary: "#000000",
+                  secondaryContainer: "#DCBDE4",
+                  onSecondaryContainer: "#000000",
+                  tertiary: "#073165",
+                  onTertiary: "#FFFFFF",
+                  tertiaryContainer: "#073165",
+                  onTertiaryContainer: "#FFFFFF",
+                  notice: "#FFE600",
+                  onNotice: "#000000",
+                  noticeContainer: "#FFE600",
+                  onNoticeContainer: "#000000",
+                  negative: "#CE0037",
+                  onNegative: "#FFFFFF",
+                  negativeContainer: "#FCD6D3",
+                  onNegativeContainer: "#000000",
+                  positive: "#40A683",
+                  onPositive: "#FFFFFF",
+                  positiveContainer: "#40A683",
+                  onPositiveContainer: "#FFFFFF"
+                },
+                component: {
+                  surface: "#FFFFFF",
+                  onSurface: "#000000",
+                  onSurfaceVariant: "#696966",
+                  inverseSurface: "#232322",
+                  inverseOnSurface: "#FFFFFF",
+                  outline: "#C8C7C2",
+                  outlineVariant: "#8C8B87",
+                  scrim: "#00000033"
+                },
+                interaction: {
+                  disabled: "#EFEEEB",
+                  disabledOnSurface: "#AFAEAA",
+                  selectedSurface: "#DCBDE4",
+                  hovered: "#00000033",
+                  hoveredVariant: "#0000000D",
+                  hoveredOnPrimary: "#FFFFFF99"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    tsutsuji: {
+      tokens: {
+        colors: {
+          sd: {
+            system: {
+              color: {
+                impression: {
+                  primary: "#B9336B",
+                  onPrimary: "#FFFFFF",
+                  primaryContainer: "#F5C1D1",
+                  onPrimaryContainer: "#000000",
+                  secondary: "#F6D7E0",
+                  onSecondary: "#000000",
+                  secondaryContainer: "#F6D7E0",
+                  onSecondaryContainer: "#000000",
+                  tertiary: "#401026",
+                  onTertiary: "#FFFFFF",
+                  tertiaryContainer: "#401026",
+                  onTertiaryContainer: "#FFFFFF",
+                  notice: "#FFE600",
+                  onNotice: "#000000",
+                  noticeContainer: "#FFE600",
+                  onNoticeContainer: "#000000",
+                  negative: "#CE0037",
+                  onNegative: "#FFFFFF",
+                  negativeContainer: "#FCD6D3",
+                  onNegativeContainer: "#000000",
+                  positive: "#40A683",
+                  onPositive: "#FFFFFF",
+                  positiveContainer: "#40A683",
+                  onPositiveContainer: "#FFFFFF"
+                },
+                component: {
+                  surface: "#FFFFFF",
+                  onSurface: "#000000",
+                  onSurfaceVariant: "#696966",
+                  inverseSurface: "#232322",
+                  inverseOnSurface: "#FFFFFF",
+                  outline: "#C8C7C2",
+                  outlineVariant: "#8C8B87",
+                  scrim: "#00000033"
+                },
+                interaction: {
+                  disabled: "#EFEEEB",
+                  disabledOnSurface: "#AFAEAA",
+                  selectedSurface: "#F6D7E0",
+                  hovered: "#00000033",
+                  hoveredVariant: "#0000000D",
+                  hoveredOnPrimary: "#FFFFFF99"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
+export {
+  e as default
+};