hakumi_components 0.1.3.pre

data/app/javascript/stylesheets/components/_avatar.scss

@@ -0,0 +1,99 @@
+// Hakumi Avatar Component
+@use '../variables' as *;
+
+.hakumi-avatar {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--color-text-inverse);
+    font-size: $font-size-sm;
+    font-variant: tabular-nums;
+    line-height: 1.5715;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    vertical-align: middle;
+    background: var(--color-disabled);
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+
+    &-image {
+        background: transparent;
+    }
+
+    &-string {
+        position: absolute;
+        left: 50%;
+        transform-origin: 0 center;
+    }
+
+    &>img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: cover;
+    }
+
+    &-lg {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        font-size: 24px;
+
+        &.hakumi-avatar-square {
+            border-radius: $border-radius-base;
+        }
+    }
+
+    &-sm {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        font-size: 14px;
+
+        &.hakumi-avatar-square {
+            border-radius: $border-radius-sm;
+        }
+    }
+
+    &-square {
+        border-radius: $border-radius-base;
+    }
+
+    &-icon {
+        font-size: 18px;
+
+        &.hakumi-avatar-lg {
+            font-size: 24px;
+        }
+
+        &.hakumi-avatar-sm {
+            font-size: 14px;
+        }
+
+        >.anticon {
+            margin: 0;
+        }
+    }
+}
+
+.hakumi-avatar-group {
+    display: inline-flex;
+
+    .hakumi-avatar {
+        border: 1px solid var(--color-bg-container);
+
+        &:not(:first-child) {
+            margin-left: -8px;
+        }
+    }
+}

data/app/javascript/stylesheets/components/_badge.scss

@@ -0,0 +1,121 @@
+// Hakumi Badge Component
+@use '../variables' as *;
+
+.hakumi-badge {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--color-text);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5715;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    position: relative;
+    display: inline-block;
+    color: unset;
+    line-height: 1;
+    overflow: visible;
+
+    &-count {
+        z-index: 10;
+        min-width: 20px;
+        height: 20px;
+        padding: 0 6px;
+        color: var(--color-text-inverse);
+        font-weight: normal;
+        font-size: 12px;
+        line-height: 20px;
+        white-space: nowrap;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: var(--color-error);
+        border-radius: 10px;
+        box-shadow: 0 0 0 1px var(--color-bg-container);
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%, -50%);
+        transform-origin: 100% 0%;
+    }
+
+    &-custom-component {
+        background: transparent;
+        border-radius: 0;
+        box-shadow: none;
+        padding: 0;
+        min-width: auto;
+        height: auto;
+        line-height: 1;
+        color: var(--color-error);
+    }
+
+    &-dot {
+        z-index: 10;
+        width: 6px;
+        height: 6px;
+        background: var(--color-error);
+        border-radius: 100%;
+        box-shadow: 0 0 0 1px var(--color-bg-container);
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%, -50%);
+        transform-origin: 100% 0%;
+    }
+
+    &-not-a-wrapper .hakumi-badge-count {
+        top: auto;
+        display: block;
+        position: relative;
+        transform: none;
+    }
+
+    &-status {
+        line-height: inherit;
+        vertical-align: baseline;
+
+        &-dot {
+            position: relative;
+            top: -1px;
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            vertical-align: middle;
+            border-radius: 50%;
+        }
+
+        &-success {
+            background-color: var(--color-success);
+        }
+
+        &-processing {
+            background-color: var(--color-primary);
+        }
+
+        &-default {
+            background-color: var(--color-text-tertiary);
+        }
+
+        &-error {
+            background-color: var(--color-error);
+        }
+
+        &-warning {
+            background-color: var(--color-warning);
+        }
+    }
+
+    &-status-text {
+        margin-left: 8px;
+        color: var(--color-text);
+        font-size: 14px;
+    }
+}
+
+.hakumi-scroll-number {
+    overflow: hidden;
+    direction: ltr;
+}

data/app/javascript/stylesheets/components/_breadcrumb.scss

@@ -0,0 +1,77 @@
+// Hakumi Breadcrumb Component
+@use '../variables' as *;
+
+.hakumi-breadcrumb {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--color-text);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+}
+
+.hakumi-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.hakumi-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.hakumi-breadcrumb-link {
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+a.hakumi-breadcrumb-link {
+  padding: 2px 6px;
+  border-radius: var(--border-radius-sm);
+  
+  &:hover {
+    color: var(--color-text);
+    background-color: var(--color-bg-spot);
+  }
+}
+
+.hakumi-breadcrumb-item:last-child {
+  .hakumi-breadcrumb-link {
+    color: var(--color-text);
+    font-weight: 600;
+  }
+  
+  a.hakumi-breadcrumb-link:hover {
+    background-color: transparent;
+  }
+}
+
+.hakumi-breadcrumb-separator {
+  margin-inline: 8px;
+  color: var(--color-text-tertiary);
+}
+
+.hakumi-breadcrumb-link-dropdown {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    color: var(--color-text);
+    background-color: var(--color-bg-spot);
+  }
+
+  .hakumi-icon {
+    font-size: 10px;
+    color: var(--color-text-tertiary);
+  }
+}

data/app/javascript/stylesheets/components/_button.scss

@@ -0,0 +1,354 @@
+// Hakumi Button Component
+@use '../variables' as *;
+
+.hakumi-button {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: $font-weight-normal;
+  white-space: nowrap;
+  text-align: center;
+  background-image: none;
+  border: 1px solid transparent;
+  box-shadow: var(--shadow-button);
+  cursor: pointer;
+  transition: all $transition-duration-base $ease-in-out;
+  user-select: none;
+  touch-action: manipulation;
+  height: 32px;
+  padding: 4px 15px;
+  font-size: var(--font-size-base);
+  border-radius: var(--border-radius-base);
+  color: var(--color-text);
+  background-color: var(--color-component-bg);
+  border-color: var(--color-border);
+  gap: 8px;
+
+  &:hover {
+    color: var(--color-primary-hover);
+    border-color: var(--color-primary-hover);
+    background-color: var(--color-component-bg);
+  }
+
+  &:focus {
+    color: var(--color-primary-hover);
+    border-color: var(--color-primary-hover);
+    background-color: var(--color-component-bg);
+    outline: 0;
+  }
+
+  &:active {
+    color: var(--color-primary-active);
+    border-color: var(--color-primary-active);
+    background-color: var(--color-component-bg);
+  }
+
+  &[disabled] {
+    color: var(--color-disabled);
+    background-color: var(--color-disabled-bg);
+    border-color: var(--color-disabled-border);
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+
+  &-primary {
+    color: var(--color-text-inverse);
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    box-shadow: var(--shadow-button-primary);
+
+    &:hover {
+      color: var(--color-text-inverse);
+      background-color: var(--color-primary-hover);
+      border-color: var(--color-primary-hover);
+    }
+
+    &:focus {
+      color: var(--color-text-inverse);
+      background-color: var(--color-primary-hover);
+      border-color: var(--color-primary-hover);
+      outline: 0;
+    }
+
+    &:active {
+      color: var(--color-text-inverse);
+      background-color: var(--color-primary-active);
+      border-color: var(--color-primary-active);
+    }
+
+    &[disabled] {
+      color: var(--color-disabled);
+      background-color: var(--color-disabled-bg);
+      border-color: var(--color-disabled-border);
+    }
+  }
+
+
+  &-dashed {
+    border-style: dashed;
+    background-color: var(--color-component-bg);
+    border-color: var(--color-border);
+
+    &:hover {
+      color: var(--color-primary-hover);
+      border-color: var(--color-primary-hover);
+    }
+
+    &:focus {
+      color: var(--color-primary-hover);
+      border-color: var(--color-primary-hover);
+      outline: 0;
+    }
+
+    &:active {
+      color: var(--color-primary-active);
+      border-color: var(--color-primary-active);
+    }
+  }
+
+
+  &-text {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+
+    &:hover {
+      color: var(--color-text);
+      background-color: var(--color-control-item-bg-hover);
+      border-color: transparent;
+    }
+
+    &:focus {
+      color: var(--color-text);
+      background-color: var(--color-control-item-bg-hover);
+      border-color: transparent;
+      outline: 0;
+    }
+
+    &:active {
+      color: var(--color-text);
+      background-color: rgba(0, 0, 0, 0.15);
+      border-color: transparent;
+    }
+
+    &[disabled] {
+      color: var(--color-disabled);
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+
+  &-link {
+    color: var(--color-link);
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+
+    &:hover {
+      color: var(--color-link-hover);
+      border-color: transparent;
+      background: transparent;
+    }
+
+    &:focus {
+      color: var(--color-link-hover);
+      border-color: transparent;
+      background: transparent;
+      outline: 0;
+    }
+
+    &:active {
+      color: var(--color-link-active);
+      border-color: transparent;
+      background: transparent;
+    }
+
+    &[disabled] {
+      color: var(--color-disabled);
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+
+  &-danger {
+    color: var(--color-error);
+    background-color: var(--color-component-bg);
+    border-color: var(--color-error);
+
+    &:hover {
+      color: var(--color-error-hover);
+      background-color: var(--color-component-bg);
+      border-color: var(--color-error-hover);
+    }
+
+    &:focus {
+      color: var(--color-error-hover);
+      background-color: var(--color-component-bg);
+      border-color: var(--color-error-hover);
+      outline: 0;
+    }
+
+    &:active {
+      color: var(--color-error-active);
+      background-color: var(--color-component-bg);
+      border-color: var(--color-error-active);
+    }
+
+    &.hakumi-button-primary {
+      color: var(--color-text-inverse);
+      background-color: var(--color-error);
+      border-color: var(--color-error);
+
+      &:hover {
+        color: var(--color-text-inverse);
+        background-color: var(--color-error-hover);
+        border-color: var(--color-error-hover);
+      }
+
+      &:focus {
+        color: var(--color-text-inverse);
+        background-color: var(--color-error-hover);
+        border-color: var(--color-error-hover);
+        outline: 0;
+      }
+
+      &:active {
+        color: var(--color-text-inverse);
+        background-color: var(--color-error-active);
+        border-color: var(--color-error-active);
+      }
+    }
+
+    &.hakumi-button-text {
+      color: var(--color-error);
+      background-color: transparent;
+      border-color: transparent;
+
+      &:hover {
+        color: var(--color-error-hover);
+        background-color: var(--color-error-outline);
+      }
+
+      &:active {
+        color: var(--color-error-active);
+        background-color: rgba(255, 77, 79, 0.15);
+      }
+    }
+
+    &.hakumi-button-link {
+      color: var(--color-error);
+      background-color: transparent;
+      border-color: transparent;
+
+      &:hover {
+        color: var(--color-error-hover);
+        background-color: transparent;
+        border-color: transparent;
+      }
+
+      &:focus {
+        color: var(--color-error-hover);
+        background-color: transparent;
+        border-color: transparent;
+      }
+
+      &:active {
+        color: var(--color-error-active);
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+  }
+
+
+  &-large {
+    height: 40px;
+    padding: 6.4px 15px;
+    font-size: var(--font-size-lg);
+    border-radius: var(--border-radius-base);
+  }
+
+  &-small {
+    height: 24px;
+    padding: 0 7px;
+    font-size: var(--font-size-base);
+    border-radius: var(--border-radius-sm);
+  }
+
+
+  &-block {
+    width: 100%;
+  }
+
+
+  &-loading {
+    position: relative;
+    pointer-events: none;
+    opacity: 0.65;
+  }
+
+
+  &-icon-only {
+    padding-left: 0;
+    padding-right: 0;
+    width: $height-base;
+
+    &.hakumi-button-large {
+      width: $height-lg;
+    }
+
+    &.hakumi-button-small {
+      width: $height-sm;
+    }
+  }
+
+
+  &-circle {
+    min-width: 32px;
+    padding-left: 0;
+    padding-right: 0;
+    border-radius: 50%;
+
+    &.hakumi-button-large {
+      min-width: 40px;
+    }
+
+    &.hakumi-button-small {
+      min-width: 24px;
+    }
+  }
+
+  &-round {
+    border-radius: 16px;
+
+    &.hakumi-button-large {
+      border-radius: 20px;
+    }
+
+    &.hakumi-button-small {
+      border-radius: 12px;
+    }
+  }
+
+
+  &-ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: antRipple 0.6s linear;
+    background-color: var(--color-ripple);
+    pointer-events: none;
+  }
+}
+
+@keyframes antRipple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}