@xen-orchestra/web-core 0.0.1

package/lib/assets/css/_colors.pcss

@@ -0,0 +1,125 @@
+:root {
+  --color-logo: #282467;
+
+  --color-grey-000: #000000;
+  --color-grey-100: #1a1b38;
+  --color-grey-200: #595a6f;
+  --color-grey-300: #9899a5;
+  --color-grey-400: #bfbfc6;
+  --color-grey-500: #e5e5e7;
+  --color-grey-600: #ffffff;
+
+  --background-color-primary: #ffffff;
+  --background-color-secondary: #f6f6f7;
+
+  --color-purple-base: #8f84ff;
+  --color-purple-d20: color(#8f84ff blend(black 20%));
+  --color-purple-d40: color(#8f84ff blend(black 40%));
+  --color-purple-d60: color(#8f84ff blend(black 60%));
+  --color-purple-l20: color(#8f84ff blend(white 20%));
+  --color-purple-l40: color(#8f84ff blend(white 40%));
+  --color-purple-l60: color(#8f84ff blend(white 60%));
+  --background-color-purple-10: color(white blend(#8f84ff 10%));
+  --background-color-purple-20: color(white blend(#8f84ff 20%));
+  --background-color-purple-30: color(white blend(#8f84ff 30%));
+  --background-color-purple-60: color(white blend(#8f84ff 60%));
+
+  --color-green-base: #2ca878;
+  --color-green-d20: color(#2ca878 blend(black 20%));
+  --color-green-d40: color(#2ca878 blend(black 40%));
+  --color-green-d60: color(#2ca878 blend(black 60%));
+  --color-green-l20: color(#2ca878 blend(white 20%));
+  --color-green-l40: color(#2ca878 blend(white 40%));
+  --color-green-l60: color(#2ca878 blend(white 60%));
+  --background-color-green-10: color(white blend(#2ca878 10%));
+  --background-color-green-20: color(white blend(#2ca878 20%));
+  --background-color-green-30: color(white blend(#2ca878 30%));
+  --background-color-green-60: color(white blend(#2ca878 60%));
+
+  --color-orange-base: #ef7f18;
+  --color-orange-d20: color(#ef7f18 blend(black 20%));
+  --color-orange-d40: color(#ef7f18 blend(black 40%));
+  --color-orange-d60: color(#ef7f18 blend(black 60%));
+  --color-orange-l20: color(#ef7f18 blend(white 20%));
+  --color-orange-l40: color(#ef7f18 blend(white 40%));
+  --color-orange-l60: color(#ef7f18 blend(white 60%));
+  --background-color-orange-10: color(white blend(#ef7f18 10%));
+  --background-color-orange-20: color(white blend(#ef7f18 20%));
+  --background-color-orange-30: color(white blend(#ef7f18 30%));
+  --background-color-orange-60: color(white blend(#ef7f18 60%));
+
+  --color-red-base: #be1621;
+  --color-red-d20: color(#be1621 blend(black 20%));
+  --color-red-d40: color(#be1621 blend(black 40%));
+  --color-red-d60: color(#be1621 blend(black 60%));
+  --color-red-l20: color(#be1621 blend(white 20%));
+  --color-red-l40: color(#be1621 blend(white 40%));
+  --color-red-l60: color(#be1621 blend(white 60%));
+  --background-color-red-10: color(white blend(#be1621 10%));
+  --background-color-red-20: color(white blend(#be1621 20%));
+  --background-color-red-30: color(white blend(#be1621 30%));
+  --background-color-red-60: color(white blend(#be1621 60%));
+}
+
+:root.dark {
+  --color-logo: #e5e5e7;
+
+  --color-grey-000: #ffffff;
+  --color-grey-100: #e5e5e7;
+  --color-grey-200: #bfbfc6;
+  --color-grey-300: #9899a5;
+  --color-grey-400: #595a6f;
+  --color-grey-500: #3a3b54;
+  --color-grey-600: #000000;
+
+  --background-color-primary: #14141e;
+  --background-color-secondary: #17182b;
+
+  --color-purple-base: #8f84ff;
+  --color-purple-d20: color(#8f84ff blend(white 20%));
+  --color-purple-d40: color(#8f84ff blend(white 40%));
+  --color-purple-d60: color(#8f84ff blend(white 60%));
+  --color-purple-l20: color(#8f84ff blend(black 20%));
+  --color-purple-l40: color(#8f84ff blend(black 40%));
+  --color-purple-l60: color(#8f84ff blend(black 60%));
+  --background-color-purple-10: color(#17182b blend(#8f84ff 25%));
+  --background-color-purple-20: color(#17182b blend(#8f84ff 35%));
+  --background-color-purple-30: color(#17182b blend(#8f84ff 45%));
+  --background-color-purple-60: color(#17182b blend(#8f84ff 85%));
+
+  --color-green-base: #2ca878;
+  --color-green-d20: color(#2ca878 blend(white 20%));
+  --color-green-d40: color(#2ca878 blend(white 40%));
+  --color-green-d60: color(#2ca878 blend(white 60%));
+  --color-green-l20: color(#2ca878 blend(black 20%));
+  --color-green-l40: color(#2ca878 blend(black 40%));
+  --color-green-l60: color(#2ca878 blend(black 60%));
+  --background-color-green-10: color(#17182b blend(#2ca878 25%));
+  --background-color-green-20: color(#17182b blend(#2ca878 35%));
+  --background-color-green-30: color(#17182b blend(#2ca878 45%));
+  --background-color-green-60: color(#17182b blend(#2ca878 85%));
+
+  --color-orange-base: #ef7f18;
+  --color-orange-d20: color(#ef7f18 blend(white 20%));
+  --color-orange-d40: color(#ef7f18 blend(white 40%));
+  --color-orange-d60: color(#ef7f18 blend(white 60%));
+  --color-orange-l20: color(#ef7f18 blend(black 20%));
+  --color-orange-l40: color(#ef7f18 blend(black 40%));
+  --color-orange-l60: color(#ef7f18 blend(black 60%));
+  --background-color-orange-10: color(#17182b blend(#ef7f18 25%));
+  --background-color-orange-20: color(#17182b blend(#ef7f18 35%));
+  --background-color-orange-30: color(#17182b blend(#ef7f18 45%));
+  --background-color-orange-60: color(#17182b blend(#ef7f18 85%));
+
+  --color-red-base: #be1621;
+  --color-red-d20: color(#be1621 blend(white 20%));
+  --color-red-d40: color(#be1621 blend(white 40%));
+  --color-red-d60: color(#be1621 blend(white 60%));
+  --color-red-l20: color(#be1621 blend(black 20%));
+  --color-red-l40: color(#be1621 blend(black 40%));
+  --color-red-l60: color(#be1621 blend(black 60%));
+  --background-color-red-10: color(#17182b blend(#be1621 25%));
+  --background-color-red-20: color(#17182b blend(#be1621 35%));
+  --background-color-red-30: color(#17182b blend(#be1621 45%));
+  --background-color-red-60: color(#17182b blend(#be1621 85%));
+}

package/lib/assets/css/_context.pcss

@@ -0,0 +1,99 @@
+.context-color-success {
+  color: var(--color-green-base);
+}
+
+.context-color-error {
+  color: var(--color-red-base);
+}
+
+.context-color-warning {
+  color: var(--color-orange-base);
+}
+
+.context-color-info {
+  color: var(--color-purple-base);
+}
+
+.context-background-color-success {
+  background-color: var(--background-color-green-10);
+}
+
+.context-background-color-error {
+  background-color: var(--background-color-red-10);
+}
+
+.context-background-color-warning {
+  background-color: var(--background-color-orange-10);
+}
+
+.context-background-color-info {
+  background-color: var(--background-color-purple-10);
+}
+
+.context-border-color-success {
+  border-color: var(--color-green-base);
+}
+
+.context-border-color-error {
+  border-color: var(--color-red-base);
+}
+
+.context-border-color-warning {
+  border-color: var(--color-orange-base);
+}
+
+.context-border-color-info {
+  border-color: var(--color-purple-base);
+}
+
+.color-context-info {
+  --color-context-primary: var(--color-purple-base);
+  --color-context-primary-hover: var(--color-purple-d20);
+  --color-context-primary-active: var(--color-purple-d40);
+  --color-context-primary-disabled: var(--color-grey-400);
+
+  --color-context-secondary: var(--background-color-purple-10);
+  --color-context-secondary-hover: var(--background-color-purple-20);
+  --color-context-secondary-active: var(--background-color-purple-30);
+
+  --color-context-tertiary: var(--background-color-primary);
+}
+
+.color-context-success {
+  --color-context-primary: var(--color-green-base);
+  --color-context-primary-hover: var(--color-green-d20);
+  --color-context-primary-active: var(--color-green-d40);
+  --color-context-primary-disabled: var(--color-green-l60);
+
+  --color-context-secondary: var(--background-color-green-10);
+  --color-context-secondary-hover: var(--background-color-green-20);
+  --color-context-secondary-active: var(--background-color-green-30);
+
+  --color-context-tertiary: var(--background-color-primary);
+}
+
+.color-context-warning {
+  --color-context-primary: var(--color-orange-base);
+  --color-context-primary-hover: var(--color-orange-d20);
+  --color-context-primary-active: var(--color-orange-d40);
+  --color-context-primary-disabled: var(--color-orange-l60);
+
+  --color-context-secondary: var(--background-color-orange-10);
+  --color-context-secondary-hover: var(--background-color-orange-20);
+  --color-context-secondary-active: var(--background-color-orange-30);
+
+  --color-context-tertiary: var(--background-color-primary);
+}
+
+.color-context-error {
+  --color-context-primary: var(--color-red-base);
+  --color-context-primary-hover: var(--color-red-d20);
+  --color-context-primary-active: var(--color-red-d40);
+  --color-context-primary-disabled: var(--color-red-l60);
+
+  --color-context-secondary: var(--background-color-red-10);
+  --color-context-secondary-hover: var(--background-color-red-20);
+  --color-context-secondary-active: var(--background-color-red-30);
+
+  --color-context-tertiary: var(--background-color-primary);
+}

package/lib/assets/css/_fonts.pcss

@@ -0,0 +1,6 @@
+@import '@fontsource/poppins/400.css';
+@import '@fontsource/poppins/500.css';
+@import '@fontsource/poppins/600.css';
+@import '@fontsource/poppins/700.css';
+@import '@fontsource/poppins/900.css';
+@import '@fontsource/poppins/400-italic.css';

package/lib/assets/css/_reset.pcss

@@ -0,0 +1,42 @@
+html {
+  box-sizing: border-box;
+  font-size: 10px;
+}
+
+body {
+  font-size: 1.6rem;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  margin: 0;
+  position: relative;
+  font-family: Poppins, sans-serif;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  font-weight: inherit;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}

package/lib/assets/css/_shadows.pcss

@@ -0,0 +1,36 @@
+:root {
+  --shadow-100: 0 0.1rem 0.1rem 0 rgba(26, 27, 56, 0.06);
+
+  --shadow-200: 0 0.1rem 0.1rem 0 rgba(26, 27, 56, 0.08), 0 0.2rem 0.1rem 0 rgba(26, 27, 56, 0.06),
+    0 0.1rem 0.3rem 0 rgba(26, 27, 56, 0.1);
+
+  --shadow-300: 0 0.6rem 1rem 0 rgba(26, 27, 56, 0.08), 0 0.1rem 1.8rem 0 rgba(26, 27, 56, 0.06),
+    0 0.3rem 0.5rem 0 rgba(26, 27, 56, 0.1);
+
+  --shadow-400: 0 2.4rem 3.8rem 0 rgba(26, 27, 56, 0.04), 0 0.9rem 4.6rem 0 rgba(26, 27, 56, 0.06),
+    0 1.1rem 1.5rem 0 rgba(26, 27, 56, 0.1);
+
+  --shadow-500: 0 0.4rem 5rem 0 rgba(26, 27, 56, 0.25);
+
+  --shadow-left: 0 0 0 0 rgba(26, 27, 56, 0.1), -0.9rem 0 2rem 0 rgba(26, 27, 56, 0.1),
+    -3.7rem 0 3.7rem 0 rgba(26, 27, 56, 0.09), -8.3rem 0 5rem 0 rgba(26, 27, 56, 0.05),
+    -14.8rem 0 5.9rem 0 rgba(26, 27, 56, 0.01), -23.1rem 0 6.5rem 0 rgba(26, 27, 56, 0);
+}
+
+:root.dark {
+  --shadow-100: 0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.12);
+
+  --shadow-200: 0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.16), 0 0.2rem 0.1rem 0 rgba(0, 0, 0, 0.12),
+    0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2);
+
+  --shadow-300: 0 0.6rem 1rem 0 rgba(0, 0, 0, 0.16), 0 0.1rem 1.8rem 0 rgba(0, 0, 0, 0.12),
+    0 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.2);
+
+  --shadow-400: 0 2.4rem 3.8rem 0 rgba(0, 0, 0, 0.08), 0 0.9rem 4.6rem 0 rgba(0, 0, 0, 0.12),
+    0 1.1rem 1.5rem 0 rgba(0, 0, 0, 0.2);
+
+  --shadow-500: 0 0.4rem 5rem 0 rgba(0, 0, 0, 0.8);
+
+  --shadow-left: 0 0 0 0 rgba(0, 0, 0, 0.5), -0.9rem 0 2rem 0 rgba(0, 0, 0, 0.45), -3.7rem 0 3.7rem 0 rgba(0, 0, 0, 0.4),
+    -8.3rem 0 5rem 0 rgba(0, 0, 0, 0.35), -14.8rem 0 5.9rem 0 rgba(0, 0, 0, 0.3), -23.1rem 0 6.5rem 0 rgba(0, 0, 0, 0);
+}

package/lib/assets/css/_typography.pcss

@@ -0,0 +1,6 @@
+@import 'typography/_size.pcss';
+@import 'typography/_weight.pcss';
+@import 'typography/_style.pcss';
+@import 'typography/_line-height.pcss';
+@import 'typography/_letter-spacing.pcss';
+@import 'typography/_legacy.pcss';

package/lib/assets/css/base.pcss

@@ -0,0 +1,91 @@
+@import '_colors.pcss';
+@import '_reset.pcss';
+@import '_fonts.pcss';
+@import '_context.pcss';
+@import '_shadows.pcss';
+@import '_typography.pcss';
+
+:root {
+  color: var(--color-grey-100);
+  background-color: var(--background-color-primary);
+  text-rendering: optimizeLegibility;
+  font-weight: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &.dark {
+    color-scheme: dark;
+  }
+
+  --scrollbar-width: 1.4rem;
+  --scrollbar-border: 0.4rem;
+  --scrollbar-thumb-color: var(--color-purple-l40);
+  --scrollbar-track-color: var(--background-color-purple-10);
+
+  /* Firefox/Gecko and Chrome versions >= 121 */
+  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+  scrollbar-width: auto;
+
+  /* Chrome/Webkit */
+  ::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track-color);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-color);
+    border: var(--scrollbar-border) solid transparent;
+    border-radius: 90rem;
+    background-clip: content-box;
+  }
+}
+
+a {
+  color: var(--color-purple-base);
+}
+
+code,
+code *,
+pre {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+.card-view {
+  padding: 1.2rem;
+  display: flex;
+  gap: 2rem;
+}
+
+.link {
+  text-decoration: underline;
+  color: var(--color-purple-base);
+  cursor: pointer;
+}
+
+.link:hover {
+  color: var(--color-purple-d20);
+}
+
+.link:active,
+.link.router-link-active {
+  color: var(--color-purple-d40);
+}
+
+.link.router-link-active {
+  text-decoration: underline;
+}
+
+.scrollbar-small {
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    --scrollbar-width: 0.7rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    --scrollbar-border: 0.2rem;
+  }
+}

package/lib/assets/css/typography/_legacy.pcss

@@ -0,0 +1,123 @@
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.h7,
+.p1,
+.p2,
+.p3,
+.p4,
+.c1,
+.c2,
+.c3,
+.c4,
+.c5 {
+  font-weight: 400;
+
+  &.black {
+    font-weight: 900;
+  }
+
+  &.semi-bold {
+    font-weight: 600;
+  }
+
+  &.medium {
+    font-weight: 500;
+  }
+
+  &.underline {
+    text-decoration: underline;
+  }
+
+  &.italic {
+    font-style: italic;
+  }
+}
+
+.h4,
+.h5,
+.h6,
+.h7,
+.p1,
+.p2,
+.p3,
+.p4,
+.c1,
+.c2,
+.c3,
+.c4,
+.c5 {
+  line-height: 1.5em;
+}
+
+.p1,
+.p2,
+.p3,
+.p4,
+.c1,
+.c2,
+.c3,
+.c4,
+.c5 {
+  letter-spacing: 0.04em;
+}
+
+.h1 {
+  font-size: 4.8rem;
+  line-height: 6rem;
+}
+
+.h2 {
+  font-size: 3.6rem;
+  line-height: 6rem;
+}
+
+.h3 {
+  font-size: 2.4rem;
+  line-height: 3.2rem;
+}
+
+.h4 {
+  font-size: 2rem;
+}
+
+.h5 {
+  font-size: 1.8rem;
+}
+
+.h6,
+.p1,
+.c1 {
+  font-size: 1.6rem;
+}
+
+.h7,
+.p2,
+.c2 {
+  font-size: 1.4rem;
+}
+
+.p3,
+.c3 {
+  font-size: 1.2rem;
+}
+
+.p4,
+.c4 {
+  font-size: 1rem;
+}
+
+.c5 {
+  font-size: 0.8rem;
+}
+
+.c1,
+.c2,
+.c3,
+.c4,
+.c5 {
+  text-transform: uppercase;
+}

package/lib/assets/css/typography/_letter-spacing.pcss

@@ -0,0 +1,27 @@
+.typo {
+  /* 0.04em (Default) */
+
+  letter-spacing: 0.04em;
+
+  /* Normal */
+
+  &.h1-black,
+  &.h2-black,
+  &.h3-black,
+  &.h3-semi-bold,
+  &.h3-medium,
+  &.h4-black,
+  &.h4-semi-bold,
+  &.h4-medium,
+  &.h5-black,
+  &.h5-semi-bold,
+  &.h5-medium,
+  &.h6-black,
+  &.h6-semi-bold,
+  &.h6-medium,
+  &.h7-black,
+  &.h7-semi-bold,
+  &.h7-medium {
+    letter-spacing: normal;
+  }
+}

package/lib/assets/css/typography/_line-height.pcss

@@ -0,0 +1,19 @@
+.typo {
+  /* 1.5em (Default) */
+  line-height: 1.5em;
+
+  /* 6rem */
+
+  &.h1-black,
+  &.h2-black {
+    line-height: 6rem;
+  }
+
+  /* 3.2rem */
+
+  &.h3-black,
+  &.h3-semi-bold,
+  &.h3-medium {
+    line-height: 3.2rem;
+  }
+}

package/lib/assets/css/typography/_size.pcss

@@ -0,0 +1,95 @@
+.typo {
+  /* 4.8rem */
+
+  &.h1-black {
+    font-size: 4.8rem;
+  }
+
+  /* 3.6rem */
+
+  &.h2-black {
+    font-size: 3.6rem;
+  }
+
+  /* 2.4rem */
+
+  &.h3-black,
+  &.h3-semi-bold,
+  &.h3-medium {
+    font-size: 2.4rem;
+  }
+
+  /* 2rem */
+
+  &.h4-black,
+  &.h4-semi-bold,
+  &.h4-medium {
+    font-size: 2rem;
+  }
+
+  /* 1.8rem */
+
+  &.h5-black,
+  &.h5-semi-bold,
+  &.h5-medium {
+    font-size: 1.8rem;
+  }
+
+  /* 1.6rem */
+
+  &.h6-black,
+  &.h6-semi-bold,
+  &.h6-medium,
+  &.p1-medium,
+  &.p1-regular,
+  &.p1-regular-underline,
+  &.p1-regular-italic,
+  &.c1-semi-bold,
+  &.c1-regular {
+    font-size: 1.6rem;
+  }
+
+  /* 1.4rem */
+
+  &.h7-black,
+  &.h7-semi-bold,
+  &.h7-medium,
+  &.p2-medium,
+  &.p2-regular,
+  &.p2-regular-underline,
+  &.p2-regular-italic,
+  &.c2-semi-bold,
+  &.c2-regular {
+    font-size: 1.4rem;
+  }
+
+  /* 1.2rem */
+
+  &.p3-medium,
+  &.p3-regular,
+  &.p3-regular-underline,
+  &.p3-regular-italic,
+  &.c3-semi-bold,
+  &.c3-regular {
+    font-size: 1.2rem;
+  }
+
+  /* 1rem */
+
+  &.p4-semi-bold,
+  &.p4-medium,
+  &.p4-regular,
+  &.p4-regular-underline,
+  &.p4-regular-italic,
+  &.c4-semi-bold,
+  &.c4-regular {
+    font-size: 1rem;
+  }
+
+  /* 0.8rem */
+
+  &.c5-semi-bold,
+  &.c5-regular {
+    font-size: 0.8rem;
+  }
+}

package/lib/assets/css/typography/_style.pcss

@@ -0,0 +1,34 @@
+.typo {
+  /* UNDERLINE */
+
+  &.p1-regular-underline,
+  &.p2-regular-underline,
+  &.p3-regular-underline,
+  &.p4-regular-underline {
+    text-decoration: underline;
+  }
+
+  /* ITALIC */
+
+  &.p1-regular-italic,
+  &.p2-regular-italic,
+  &.p3-regular-italic,
+  &.p4-regular-italic {
+    font-style: italic;
+  }
+
+  /* UPPERCASE */
+
+  &.c1-semi-bold,
+  &.c1-regular,
+  &.c2-semi-bold,
+  &.c2-regular,
+  &.c3-semi-bold,
+  &.c3-regular,
+  &.c4-semi-bold,
+  &.c4-regular,
+  &.c5-semi-bold,
+  &.c5-regular {
+    text-transform: uppercase;
+  }
+}