pentatrion-design 0.0.1

package/src/tailwind/base.css

@@ -0,0 +1,188 @@
+html {
+  font-size: 16px;
+  line-height: 24px;
+  color-scheme: normal;
+}
+body {
+  @apply font-sans bg-gray-0 text-gray-7;
+}
+.light {
+  color-scheme: light;
+}
+.dark {
+  color-scheme: dark;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply relative font-semibold;
+}
+h1 {
+  @apply text-3xl;
+}
+h2 {
+  @apply text-2xl;
+}
+h3 {
+  @apply text-xl;
+}
+h4 {
+  @apply text-lg;
+}
+h5 {
+  @apply text-base;
+}
+h6 {
+  @apply text-base;
+}
+
+a:not(.ghost-link) {
+  @apply decoration-gray-8 underline text-gray-8 visited:text-gray-8 active:text-yellow-5 hover:decoration-2 hover:decoration-yellow-5;
+}
+
+:focus-visible {
+  @apply outline outline-offset-2 outline-2 outline-yellow-5 rounded;
+}
+
+textarea:read-only {
+  @apply bg-gray-1;
+}
+
+mark {
+  @apply text-gray-8 bg-yellow-1;
+}
+
+abbr {
+  @apply underline decoration-dashed cursor-help;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+:root {
+  --color-white: 255 255 255;
+  --color-black: 0 0 0;
+
+  /* bg outlined color */
+  --color-yellow-1: 255 250 199; /* rgb(255, 250, 199); */
+
+  /* bg outlined hovered color */
+  --color-yellow-2: 255 245 142; /* rgb(255, 245, 142); */
+
+  /* button default bgcolor */
+  --color-yellow-3: 255 232 34; /* rgb(255, 232, 34); */
+
+  /* text color, button hover bgcolor */
+  --color-yellow-4: 242 214 62; /* rgb(242, 214, 62); */
+
+  /* text hover color, button active bgcolor */
+  --color-yellow-5: 219 167 38; /* rgb(219, 167, 38); */
+  --color-yellow-text: var(--color-gray-7);
+
+  --color-green-1: 232 245 212; /* rgb(232, 245, 212); */
+  --color-green-2: 209 235 170; /* rgb(209, 235, 170); */
+  --color-green-3: 162 215 87; /* rgb(162, 215, 87); */
+  --color-green-4: 138 200 66; /* rgb(138, 200, 66); */
+  --color-green-5: 79 158 35; /* rgb(79, 158, 35); */
+  --color-green-text: var(--color-gray-7);
+
+  --color-blue-1: 237 247 255; /* rgb(237, 247, 255); */
+  --color-blue-2: 203 232 255; /* rgb(203, 232, 255); */
+  --color-blue-3: 131 203 255; /* rgb(131, 203, 255);*/
+  --color-blue-4: 75 167 230; /* rgb(75, 167, 230);*/
+  --color-blue-5: 37 126 158; /* rgb(37, 126, 158);*/
+  --color-blue-text: var(--color-gray-7);
+
+  --color-orange-1: 255 244 219; /* rgb(255, 244, 219); */
+  --color-orange-2: 255 221 179; /* rgb(255, 221, 179); */
+  --color-orange-3: 255 176 100; /* rgb(255, 176, 100); */
+  --color-orange-4: 230 140 53; /* rgb(230, 140, 53); */
+  --color-orange-5: 179 91 38; /* rgb(179, 91, 38); */
+  --color-orange-text: var(--color-gray-7);
+
+  --color-red-1: 255 219 219; /* rgb(255, 219, 219); */
+  --color-red-2: 255 183 183; /* rgb(255, 183, 183); */
+  --color-red-3: 255 111 111; /* rgb(255, 111, 111); */
+  --color-red-4: 230 62 62; /* rgb(230, 62, 62); */
+  --color-red-5: 179 38 38; /* rgb(179, 38, 38); */
+  --color-red-text: var(--color-gray-7);
+
+  --color-gray-0: 255 255 255; /* rgb(255, 255, 255); */
+  --color-gray-1: 242 242 242; /* rgb(242, 242, 242); */
+  --color-gray-2: 228 228 228; /* rgb(228, 228, 228); */
+  --color-gray-3: 204 204 204; /* rgb(204, 204, 204); */
+  --color-gray-4: 180 180 180; /* rgb(180, 180, 180); */
+  --color-gray-5: 140 140 140; /* rgb(140, 140, 140); */
+  /* text-hint text-disabled */
+  --color-gray-6: 90 90 90; /* rgb(90, 90, 90); */
+  --color-gray-7: 50 50 50; /* rgb(50, 50, 50); */
+  --color-gray-8: 0 0 0; /* rgb(0, 0, 0); */
+  --color-gray-text: var(--color-gray-7);
+
+  --resize-grip: 10px;
+  --resize-indicator: 2px;
+
+  --step-circle-radius: 16px;
+}
+.dark {
+  /* text hover color, button active bgcolor */
+  --color-yellow-5: 255 250 199; /* rgb(255, 250, 199); */
+  /* text color, button hover bgcolor */
+  --color-yellow-4: 255 245 142; /* rgb(255, 245, 142); */
+  /* button default bgcolor */
+  --color-yellow-3: 255 232 34; /* rgb(255, 232, 34); */
+  /* bg outlined hovered color (with generally 50% transparency) */
+  --color-yellow-2: 242 214 62; /* rgb(242, 214, 62); */
+  /* bg outlined color (with generally 50% transparency) */
+  --color-yellow-1: 219 167 38; /* rgb(219, 167, 38); */
+
+  --color-yellow-text: var(--color-gray-0);
+
+  --color-green-5: 232 245 212; /* rgb(232, 245, 212); */
+  --color-green-4: 209 235 170; /* rgb(209, 235, 170); */
+  --color-green-3: 162 215 87; /* rgb(162, 215, 87); */
+  --color-green-2: 138 200 66; /* rgb(138, 200, 66); */
+  --color-green-1: 79 158 35; /* rgb(79, 158, 35); */
+  --color-green-text: var(--color-gray-0);
+
+  --color-blue-5: 237 247 255; /* rgb(237, 247, 255); */
+  --color-blue-4: 203 232 255; /* rgb(203, 232, 255); */
+  --color-blue-3: 131 203 255; /* rgb(131, 203, 255);*/
+  --color-blue-2: 75 167 230; /* rgb(75, 167, 230);*/
+  --color-blue-1: 37 126 158; /* rgb(37, 126, 158);*/
+  --color-blue-text: var(--color-gray-0);
+
+  --color-orange-5: 255 244 219; /* rgb(255, 244, 219); */
+  --color-orange-4: 255 221 179; /* rgb(255, 221, 179); */
+  --color-orange-3: 255 176 100; /* rgb(255, 176, 100); */
+  --color-orange-2: 230 140 53; /* rgb(230, 140, 53); */
+  --color-orange-1: 179 91 38; /* rgb(179, 91, 38); */
+  --color-orange-text: var(--color-gray-0);
+
+  --color-red-5: 255 219 219; /* rgb(255, 219, 219); */
+  --color-red-4: 255 183 183; /* rgb(255, 183, 183); */
+  --color-red-3: 255 111 111; /* rgb(255, 111, 111); */
+  --color-red-2: 230 62 62; /* rgb(230, 62, 62); */
+  --color-red-1: 179 38 38; /* rgb(179, 38, 38); */
+  --color-red-text: var(--color-gray-0);
+
+  --color-gray-8: 255 255 255; /* rgb(255, 255, 255); */
+  --color-gray-7: 220 220 220; /* rgb(220, 220, 220); */
+  /* text-hint text-disabled */
+  --color-gray-6: 180 180 180; /* rgb(180, 180, 180); */
+  --color-gray-5: 140 140 140; /* rgb(140, 140, 140); */
+  --color-gray-4: 100 100 100; /* rgb(100, 100, 100); */
+  --color-gray-3: 75 75 75; /* rgb(75, 75, 75); */
+  --color-gray-2: 50 50 50; /* rgb(50, 50, 50); */
+  --color-gray-1: 35 35 35; /* rgb(35, 35, 35); */
+  --color-gray-0: 21 29 29; /* rgb(21, 29, 29); */
+  --color-gray-text: var(--color-gray-8);
+}

package/src/tailwind/components-input-outline.css

@@ -0,0 +1,62 @@
+:is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text) {
+  @apply outline outline-1 focus-full:outline-2;
+}
+
+/* colored outline for inputs */
+:is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text):where([data-color="yellow"]) {
+  @apply outline-gray-2 hover:outline-gray-3 focus-full:outline-yellow-4;
+}
+:is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text):where([data-color="gray"]) {
+  @apply outline-gray-2 hover:outline-gray-3 focus-full:outline-gray-4;
+}
+:is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text):where([data-color="red"]) {
+  @apply outline-red-2 hover:outline-red-3 focus-full:outline-red-4;
+}
+:is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text):where([data-color="orange"]) {
+  @apply outline-orange-2 hover:outline-orange-3 focus-full:outline-orange-4;
+}
+:is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text):where([data-color="blue"]) {
+  @apply outline-blue-2 hover:outline-blue-3 focus-full:outline-blue-4;
+}
+:is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text):where([data-color="green"]) {
+  @apply outline-green-2 hover:outline-green-3 focus-full:outline-green-4;
+}
+:is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text):where([data-variant="ghost"]) {
+  @apply outline-transparent;
+}
+
+/* bg for checkbox and radio */
+:is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="yellow"]) {
+  @apply text-yellow-3;
+}
+:is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="gray"]) {
+  @apply text-gray-3;
+}
+:is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="red"]) {
+  @apply text-red-3;
+}
+:is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="orange"]) {
+  @apply text-orange-3;
+}
+:is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="blue"]) {
+  @apply text-blue-3;
+}
+:is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="green"]) {
+  @apply text-green-3;
+}
+
+/* gray outline for current input */
+:is(.p8n-input-checkbox, .p8n-input-radio):is(:checked, .checked, .indeterminate) {
+  @apply bg-full bg-center bg-no-repeat outline-gray-1 bg-current;
+}
+
+.p8n-input-checkbox:not(.p8n-input-toggle):where(:checked, .checked) {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+.p8n-input-radio:where(:checked, .checked) {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+:is(.p8n-input-checkbox, .p8n-input-radio):is(.indeterminate, :checked.indeterminate) {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 7.5a1 1 0 0 0-1 1 1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1 1 1 0 0 0-1-1Z' /%3e%3c/svg%3e");
+}

package/src/tailwind/components-resize-area.css

@@ -0,0 +1,112 @@
+.p8n-resize-area {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+  overflow: visible;
+
+  .area-button {
+    position: absolute;
+
+    &::before {
+      content: "";
+      position: absolute;
+      transition-delay: 0.25s;
+      transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+    &:hover::before {
+      background-color: rgb(var(--color-gray-5));
+    }
+  }
+}
+
+.p8n-resize-area {
+  &:where(.top, .bottom) {
+    height: 0;
+    width: 100%;
+
+    .area-button {
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: var(--resize-grip);
+      cursor: row-resize;
+
+      &::before {
+        left: 0;
+        right: 0;
+        height: var(--resize-indicator);
+      }
+    }
+  }
+
+  &:where(.left, .right) {
+    width: 0;
+    height: 100%;
+
+    .area-button {
+      top: 0;
+      bottom: 0;
+      height: 100%;
+      width: var(--resize-grip);
+      cursor: col-resize;
+
+      &::before {
+        top: 0;
+        bottom: 0;
+        width: var(--resize-indicator);
+      }
+    }
+  }
+
+  &.top {
+    bottom: auto;
+
+    .area-button {
+      top: calc(-1 * var(--resize-grip) / 2);
+
+      &::before {
+        top: calc(50% - var(--resize-indicator) / 2);
+      }
+    }
+  }
+
+  &.bottom {
+    top: auto;
+
+    .area-button {
+      bottom: calc(-1 * var(--resize-grip) / 2);
+
+      &::before {
+        bottom: calc(50% - var(--resize-indicator) / 2);
+      }
+    }
+  }
+
+  &.right {
+    left: auto;
+
+    .area-button {
+      right: calc(-1 * var(--resize-grip) / 2);
+
+      &::before {
+        right: calc(50% - var(--resize-indicator) / 2);
+      }
+    }
+  }
+
+  &.left {
+    right: auto;
+
+    .area-button {
+      left: calc(-1 * var(--resize-grip) / 2);
+
+      &::before {
+        left: calc(50% - var(--resize-indicator) / 2);
+      }
+    }
+  }
+}

package/src/tailwind/components-step.css

@@ -0,0 +1,161 @@
+/* Ajouter un point */
+.ll-steps-extra {
+  @apply flex justify-between;
+  & button:first-child {
+    padding: calc(var(--step-circle-radius) / 2) calc(var(--step-circle-radius) / 2)
+      calc(var(--step-circle-radius) / 2) calc(var(--step-circle-radius) * 1.5 + 1rem);
+  }
+
+  & .ll-marker {
+    transform: translate(calc(var(--step-circle-radius) / 3));
+  }
+}
+
+.ll-steps {
+  @apply relative;
+
+  &[data-marker="circle"] {
+    .marker {
+      @apply shadow bg-gray-1;
+      width: calc(var(--step-circle-radius) * 2);
+      height: calc(var(--step-circle-radius) * 2);
+
+      &.active {
+        @apply bg-gray-2;
+      }
+    }
+  }
+
+  &[data-marker="bullet"] {
+    .marker {
+      @apply text-2xs bg-gray-0 outline outline-2 outline-gray-2;
+      margin: calc(var(--step-circle-radius) / 2);
+      width: calc(var(--step-circle-radius));
+      height: calc(var(--step-circle-radius));
+
+      &.active {
+        @apply outline-gray-4;
+      }
+    }
+  }
+  &[data-direction="horizontal"] {
+    @apply flex flex-wrap;
+    &[data-marker="circle"] {
+      --line-width: calc(100% - var(--step-circle-radius) * 2 - var(--line-space) * 2);
+      --line-left: calc(50% + var(--step-circle-radius) + var(--line-space));
+    }
+
+    &[data-marker="bullet"] {
+      --line-width: calc(100% - var(--step-circle-radius) - var(--line-space) * 2);
+      --line-left: calc(50% + var(--step-circle-radius) / 2 + var(--line-space));
+    }
+
+    & .ll-step {
+      @apply flex flex-col flex-1 text-center;
+      .content {
+        @apply mt-2;
+      }
+    }
+
+    &[data-global-line="false"] .ll-step:not(:last-child)::after {
+      content: "";
+      border-style: none none var(--line-style) none;
+
+      width: var(--line-width);
+      margin-top: -2px;
+      order: -1;
+      position: relative;
+      top: calc(var(--step-circle-radius) + 1px);
+      left: var(--line-left);
+    }
+
+    .marker-container {
+      @apply flex-center;
+    }
+  }
+
+  &[data-direction="vertical"] {
+    &[data-marker="circle"] {
+      --line-top: calc(var(--step-circle-radius) * 2 + var(--line-space));
+      --line-bottom: var(--line-space);
+    }
+
+    &[data-marker="bullet"] {
+      --line-top: calc(var(--step-circle-radius) * 1.5 + var(--line-space));
+      --line-bottom: calc(-0.5 * var(--step-circle-radius) + var(--line-space));
+    }
+
+    .ll-step {
+      @apply relative gap-1 items-start flex;
+      &:not(:last-child) {
+        padding-bottom: 0.5rem;
+      }
+    }
+
+    &[data-global-line="false"] .ll-step:not(:last-child)::after {
+      @apply absolute left-0 w-0;
+      content: "";
+      top: var(--line-top);
+      bottom: var(--line-bottom);
+      transform: translateX(calc(var(--step-circle-radius) - 1px));
+      border-style: none none none var(--line-style);
+    }
+
+    &[data-global-line="true"]::after {
+      @apply absolute left-0 w-0 z-0;
+      content: "";
+      top: var(--line-top);
+      bottom: var(--line-top);
+      transform: translateX(calc(var(--step-circle-radius) - 1px));
+      border-style: none none none var(--line-style);
+    }
+
+    .content {
+      @apply flex-1;
+    }
+
+    .title {
+      line-height: 1rem;
+    }
+  }
+
+  &[data-global-line="true"] {
+    &::after {
+      @apply border-gray-2 border-2;
+    }
+
+    &.status-done::after {
+      @apply border-gray-3;
+    }
+  }
+}
+
+.ll-step {
+  [data-global-line="false"] &:not(:last-child) {
+    &::after {
+      @apply border-gray-2 border-2;
+    }
+
+    &.status-done::after {
+      @apply border-gray-3;
+    }
+  }
+
+  .handle {
+    @apply cursor-row-resize text-gray-6 transition-all;
+
+    &.active {
+      &:hover {
+        @apply bg-gray-2 text-transparent;
+      }
+    }
+  }
+
+  .ll-autocomplete {
+    @apply flex-1;
+  }
+
+  .ll-button {
+    @apply my-[2px] ml-2;
+  }
+}

package/src/tailwind/components.css

@@ -0,0 +1,51 @@
+.can-copy {
+  @apply underline decoration-dashed decoration-gray-3 cursor-copy hover:decoration-gray-7;
+}
+.disabled {
+  @apply pointer-events-none text-gray-6;
+}
+.disabled[disabled] {
+  @apply opacity-50;
+}
+
+.option {
+  @apply flex w-full px-2 h-8 items-center text-left relative cursor-pointer first:rounded-t-2xl last:rounded-b-2xl hover:bg-gray-1 focus-full:text-gray-8 outline-none;
+
+  &[disabled] {
+    color: rgb(var(--color-gray-6));
+    pointer-events: none;
+  }
+
+  .bullet {
+    width: 1rem;
+    height: 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    outline: 2px solid rgb(var(--color-gray-2));
+    font-size: var(--font-size-xs);
+    border-radius: 50%;
+    margin: 0 0.75rem 0 3px;
+  }
+}
+
+.p8n-separator {
+  @apply bg-gray-1 w-1/2 h-1 rounded-sm mx-auto relative;
+}
+
+.p8n-setting {
+  @apply flex items-center justify-between;
+
+  & > :first-child {
+    @apply text-gray-6 text-sm;
+  }
+  & > :nth-child(2) {
+    text-align: right;
+  }
+  & > :nth-child(2) input {
+    text-align: right;
+  }
+  &.multiple {
+    align-items: flex-start;
+  }
+}

package/src/tailwind/keyframes.ts

@@ -0,0 +1,69 @@
+import { ThemeConfig } from "tailwindcss/types/config";
+
+export const keyframes: ThemeConfig["keyframes"] = {
+  ripple: {
+    to: {
+      transform: "scale(4)",
+      opacity: "0",
+    },
+  },
+  "fade-in": {
+    from: {
+      transform: "scale(.8)",
+      opacity: "0",
+    },
+    to: {
+      transform: "scale(1)",
+      opacity: "1",
+    },
+  },
+  "fade-in-list": {
+    from: {
+      transform: "scaleY(.8)",
+      opacity: "0",
+    },
+    to: {
+      transform: "scaleY(1)",
+      opacity: "1",
+    },
+  },
+  "fade-out": {
+    from: {
+      transform: "scale(1)",
+      opacity: "1",
+    },
+    to: {
+      transform: "scale(.8)",
+      opacity: "0",
+    },
+  },
+  "fade-in-opacity": {
+    from: {
+      opacity: "0",
+    },
+    to: {
+      opacity: "1",
+    },
+  },
+  flash: {
+    "0%": {
+      opacity: "0",
+    },
+    "50%": {
+      opacity: "1",
+    },
+    "100%": {
+      opacity: "0",
+    },
+  },
+  "loader-stroke": {
+    from: {
+      // check : packages/pentatrion-design/components/loader/Loader.tsx
+      // for dashoffset value
+      "stroke-dashoffset": "43.699",
+    },
+    to: {
+      "stroke-dashoffset": "0",
+    },
+  },
+};