@vaadin/react-components 24.4.0-alpha3

package/css/lumo/utilities/Typography.module.css

@@ -0,0 +1,338 @@
+/* Generated file, do not edit */
+
+
+  /* === Font size === */
+  .text-2xs {
+    font-size: var(--lumo-font-size-xxs);
+  }
+  .text-xs {
+    font-size: var(--lumo-font-size-xs);
+  }
+  .text-s {
+    font-size: var(--lumo-font-size-s);
+  }
+  .text-m {
+    font-size: var(--lumo-font-size-m);
+  }
+  .text-l {
+    font-size: var(--lumo-font-size-l);
+  }
+  .text-xl {
+    font-size: var(--lumo-font-size-xl);
+  }
+  .text-2xl {
+    font-size: var(--lumo-font-size-xxl);
+  }
+  .text-3xl {
+    font-size: var(--lumo-font-size-xxxl);
+  }
+
+  /* === Font weight === */
+  .font-thin {
+    font-weight: 100;
+  }
+  .font-extralight {
+    font-weight: 200;
+  }
+  .font-light {
+    font-weight: 300;
+  }
+  .font-normal {
+    font-weight: 400;
+  }
+  .font-medium {
+    font-weight: 500;
+  }
+  .font-semibold {
+    font-weight: 600;
+  }
+  .font-bold {
+    font-weight: 700;
+  }
+  .font-extrabold {
+    font-weight: 800;
+  }
+  .font-black {
+    font-weight: 900;
+  }
+
+  /* === Line clamp === */
+  [class*='line-clamp-'] {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+  }
+  .line-clamp-1 {
+    -webkit-line-clamp: 1;
+  }
+  .line-clamp-2 {
+    -webkit-line-clamp: 2;
+  }
+  .line-clamp-3 {
+    -webkit-line-clamp: 3;
+  }
+  .line-clamp-4 {
+    -webkit-line-clamp: 4;
+  }
+  .line-clamp-5 {
+    -webkit-line-clamp: 5;
+  }
+  .line-clamp-6 {
+    -webkit-line-clamp: 6;
+  }
+
+  /* === Line height === */
+  .leading-none {
+    line-height: 1;
+  }
+  .leading-xs {
+    line-height: var(--lumo-line-height-xs);
+  }
+  .leading-s {
+    line-height: var(--lumo-line-height-s);
+  }
+  .leading-m {
+    line-height: var(--lumo-line-height-m);
+  }
+
+  /* === List style type === */
+  .list-none {
+    list-style-type: none;
+  }
+
+  /* === Text alignment === */
+  .text-left {
+    text-align: left;
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .text-justify {
+    text-align: justify;
+  }
+
+  /* === Text color === */
+  .text-header {
+    color: var(--lumo-header-text-color);
+  }
+  .text-body {
+    color: var(--lumo-body-text-color);
+  }
+  .text-secondary {
+    color: var(--lumo-secondary-text-color);
+  }
+  .text-tertiary {
+    color: var(--lumo-tertiary-text-color);
+  }
+  .text-disabled {
+    color: var(--lumo-disabled-text-color);
+  }
+  .text-primary {
+    color: var(--lumo-primary-text-color);
+  }
+  .text-primary-contrast {
+    color: var(--lumo-primary-contrast-color);
+  }
+  .text-error {
+    color: var(--lumo-error-text-color);
+  }
+  .text-error-contrast {
+    color: var(--lumo-error-contrast-color);
+  }
+  .text-success {
+    color: var(--lumo-success-text-color);
+  }
+  .text-success-contrast {
+    color: var(--lumo-success-contrast-color);
+  }
+  .text-warning {
+    color: var(--lumo-warning-text-color);
+  }
+  .text-warning-contrast {
+    color: var(--lumo-warning-contrast-color);
+  }
+
+  /* == Text decoration === */
+  .line-through {
+    text-decoration-line: line-through;
+  }
+  .no-underline {
+    text-decoration-line: none;
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
+
+  /* === Text overflow === */
+  .overflow-clip {
+    text-overflow: clip;
+  }
+  .overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  /* === Text transform === */
+  .capitalize {
+    text-transform: capitalize;
+  }
+  .lowercase {
+    text-transform: lowercase;
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+
+  /* === Whitespace === */
+  .whitespace-normal {
+    white-space: normal;
+  }
+  .whitespace-break-spaces {
+    white-space: normal;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .whitespace-pre {
+    white-space: pre;
+  }
+  .whitespace-pre-line {
+    white-space: pre-line;
+  }
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  /* === Responsive design === */
+  @media (min-width: 640px) {
+    .sm\\:text-2xs {
+      font-size: var(--lumo-font-size-xxs);
+    }
+    .sm\\:text-xs {
+      font-size: var(--lumo-font-size-xs);
+    }
+    .sm\\:text-s {
+      font-size: var(--lumo-font-size-s);
+    }
+    .sm\\:text-m {
+      font-size: var(--lumo-font-size-m);
+    }
+    .sm\\:text-l {
+      font-size: var(--lumo-font-size-l);
+    }
+    .sm\\:text-xl {
+      font-size: var(--lumo-font-size-xl);
+    }
+    .sm\\:text-2xl {
+      font-size: var(--lumo-font-size-xxl);
+    }
+    .sm\\:text-3xl {
+      font-size: var(--lumo-font-size-xxxl);
+    }
+  }
+  @media (min-width: 768px) {
+    .md\\:text-2xs {
+      font-size: var(--lumo-font-size-xxs);
+    }
+    .md\\:text-xs {
+      font-size: var(--lumo-font-size-xs);
+    }
+    .md\\:text-s {
+      font-size: var(--lumo-font-size-s);
+    }
+    .md\\:text-m {
+      font-size: var(--lumo-font-size-m);
+    }
+    .md\\:text-l {
+      font-size: var(--lumo-font-size-l);
+    }
+    .md\\:text-xl {
+      font-size: var(--lumo-font-size-xl);
+    }
+    .md\\:text-2xl {
+      font-size: var(--lumo-font-size-xxl);
+    }
+    .md\\:text-3xl {
+      font-size: var(--lumo-font-size-xxxl);
+    }
+  }
+  @media (min-width: 1024px) {
+    .lg\\:text-2xs {
+      font-size: var(--lumo-font-size-xxs);
+    }
+    .lg\\:text-xs {
+      font-size: var(--lumo-font-size-xs);
+    }
+    .lg\\:text-s {
+      font-size: var(--lumo-font-size-s);
+    }
+    .lg\\:text-m {
+      font-size: var(--lumo-font-size-m);
+    }
+    .lg\\:text-l {
+      font-size: var(--lumo-font-size-l);
+    }
+    .lg\\:text-xl {
+      font-size: var(--lumo-font-size-xl);
+    }
+    .lg\\:text-2xl {
+      font-size: var(--lumo-font-size-xxl);
+    }
+    .lg\\:text-3xl {
+      font-size: var(--lumo-font-size-xxxl);
+    }
+  }
+  @media (min-width: 1280px) {
+    .xl\\:text-2xs {
+      font-size: var(--lumo-font-size-xxs);
+    }
+    .xl\\:text-xs {
+      font-size: var(--lumo-font-size-xs);
+    }
+    .xl\\:text-s {
+      font-size: var(--lumo-font-size-s);
+    }
+    .xl\\:text-m {
+      font-size: var(--lumo-font-size-m);
+    }
+    .xl\\:text-l {
+      font-size: var(--lumo-font-size-l);
+    }
+    .xl\\:text-xl {
+      font-size: var(--lumo-font-size-xl);
+    }
+    .xl\\:text-2xl {
+      font-size: var(--lumo-font-size-xxl);
+    }
+    .xl\\:text-3xl {
+      font-size: var(--lumo-font-size-xxxl);
+    }
+  }
+  @media (min-width: 1536px) {
+    .\\32xl\\:text-2xs {
+      font-size: var(--lumo-font-size-xxs);
+    }
+    .\\32xl\\:text-xs {
+      font-size: var(--lumo-font-size-xs);
+    }
+    .\\32xl\\:text-s {
+      font-size: var(--lumo-font-size-s);
+    }
+    .\\32xl\\:text-m {
+      font-size: var(--lumo-font-size-m);
+    }
+    .\\32xl\\:text-l {
+      font-size: var(--lumo-font-size-l);
+    }
+    .\\32xl\\:text-xl {
+      font-size: var(--lumo-font-size-xl);
+    }
+    .\\32xl\\:text-2xl {
+      font-size: var(--lumo-font-size-xxl);
+    }
+    .\\32xl\\:text-3xl {
+      font-size: var(--lumo-font-size-xxxl);
+    }
+  }

package/css/material/Color.css

@@ -0,0 +1,7 @@
+/* Generated file, do not edit */
+
+@import url(./ColorLight.css);
+
+@import url(./ColorDark.css);
+
+@import url(./ColorBase.css);

package/css/material/ColorBase.css

@@ -0,0 +1,26 @@
+/* Generated file, do not edit */
+
+
+  html {
+    /* Text colors */
+    --material-body-text-color: var(--light-theme-text-color, rgba(0, 0, 0, 0.87));
+    --material-secondary-text-color: var(--light-theme-secondary-color, rgba(0, 0, 0, 0.54));
+    --material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
+
+    /* Primary colors */
+    --material-primary-color: var(--primary-color, #6200ee);
+    --material-primary-contrast-color: var(--dark-theme-base-color, #fff);
+    --material-primary-text-color: var(--material-primary-color);
+
+    /* Error colors */
+    --material-error-color: var(--error-color, #b00020);
+    --material-error-text-color: var(--material-error-color);
+
+    /* Background colors */
+    --material-background-color: var(--light-theme-background-color, #fff);
+    --material-secondary-background-color: var(--light-theme-secondary-background-color, #f5f5f5);
+    --material-disabled-color: rgba(0, 0, 0, 0.26);
+
+    /* Divider colors */
+    --material-divider-color: rgba(0, 0, 0, 0.12);
+  }

package/css/material/ColorDark.css

@@ -0,0 +1,47 @@
+/* Generated file, do not edit */
+
+
+  html {
+    /* Text colors */
+    --material-body-text-color: var(--dark-theme-text-color, rgba(255, 255, 255, 1));
+    --material-secondary-text-color: var(--dark-theme-secondary-color, rgba(255, 255, 255, 0.7));
+    --material-disabled-text-color: var(--dark-theme-disabled-color, rgba(255, 255, 255, 0.5));
+
+    /* Primary colors */
+    --material-primary-color: var(--light-primary-color, #7e3ff2);
+    --material-primary-text-color: #b794f6;
+
+    /* Error colors */
+    --material-error-color: var(--error-color, #de2839);
+    --material-error-text-color: var(--material-error-color);
+
+    /* Background colors */
+    --material-background-color: var(--dark-theme-background-color, #303030);
+    --material-secondary-background-color: var(--dark-theme-secondary-background-color, #3b3b3b);
+    --material-disabled-color: rgba(255, 255, 255, 0.3);
+
+    /* Divider colors */
+    --material-divider-color: rgba(255, 255, 255, 0.12);
+
+    /* Undocumented internal properties (prefixed with three dashes) */
+
+    /* Text field tweaks */
+    --_material-text-field-input-line-background-color: #fff;
+    --_material-text-field-input-line-opacity: 0.7;
+    --_material-text-field-input-line-hover-opacity: 1;
+    --_material-text-field-focused-label-opacity: 1;
+
+    /* Button tweaks */
+    --_material-button-raised-background-color: rgba(255, 255, 255, 0.08);
+    --_material-button-outline-color: rgba(255, 255, 255, 0.2);
+
+    /* Grid tweaks */
+    --_material-grid-row-hover-background-color: rgba(255, 255, 255, 0.08);
+    --_material-grid-row-selected-overlay-opacity: 0.16;
+
+    /* Split layout tweaks */
+    --_material-split-layout-splitter-background-color: rgba(255, 255, 255, 0.8);
+
+    background-color: var(--material-background-color);
+    color: var(--material-body-text-color);
+  }

package/css/material/ColorLight.css

@@ -0,0 +1,96 @@
+/* Generated file, do not edit */
+
+
+  html {
+    /* Text colors */
+    --material-body-text-color: var(--light-theme-text-color, rgba(0, 0, 0, 0.87));
+    --material-secondary-text-color: var(--light-theme-secondary-color, rgba(0, 0, 0, 0.54));
+    --material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
+
+    /* Primary colors */
+    --material-primary-color: var(--primary-color, #6200ee);
+    --material-primary-contrast-color: var(--dark-theme-base-color, #fff);
+    --material-primary-text-color: var(--material-primary-color);
+
+    /* Error colors */
+    --material-error-color: var(--error-color, #b00020);
+    --material-error-text-color: var(--material-error-color);
+
+    /* Background colors */
+    --material-background-color: var(--light-theme-background-color, #fff);
+    --material-secondary-background-color: var(--light-theme-secondary-background-color, #f5f5f5);
+    --material-disabled-color: rgba(0, 0, 0, 0.26);
+
+    /* Divider colors */
+    --material-divider-color: rgba(0, 0, 0, 0.12);
+
+    /* Undocumented internal properties (prefixed with three dashes) */
+
+    /* Text field tweaks */
+    --_material-text-field-input-line-background-color: initial;
+    --_material-text-field-input-line-opacity: initial;
+    --_material-text-field-input-line-hover-opacity: initial;
+    --_material-text-field-focused-label-opacity: initial;
+
+    /* Button tweaks */
+    --_material-button-raised-background-color: initial;
+    --_material-button-outline-color: initial;
+
+    /* Grid tweaks */
+    --_material-grid-row-hover-background-color: initial;
+
+    /* Split layout tweaks */
+    --_material-split-layout-splitter-background-color: initial;
+
+    background-color: var(--material-background-color);
+    color: var(--material-body-text-color);
+  }
+
+  [theme~='dark'] {
+    /* Text colors */
+    --material-body-text-color: var(--dark-theme-text-color, rgba(255, 255, 255, 1));
+    --material-secondary-text-color: var(--dark-theme-secondary-color, rgba(255, 255, 255, 0.7));
+    --material-disabled-text-color: var(--dark-theme-disabled-color, rgba(255, 255, 255, 0.5));
+
+    /* Primary colors */
+    --material-primary-color: var(--light-primary-color, #7e3ff2);
+    --material-primary-text-color: #b794f6;
+
+    /* Error colors */
+    --material-error-color: var(--error-color, #de2839);
+    --material-error-text-color: var(--material-error-color);
+
+    /* Background colors */
+    --material-background-color: var(--dark-theme-background-color, #303030);
+    --material-secondary-background-color: var(--dark-theme-secondary-background-color, #3b3b3b);
+    --material-disabled-color: rgba(255, 255, 255, 0.3);
+
+    /* Divider colors */
+    --material-divider-color: rgba(255, 255, 255, 0.12);
+
+    /* Undocumented internal properties (prefixed with three dashes) */
+
+    /* Text field tweaks */
+    --_material-text-field-input-line-background-color: #fff;
+    --_material-text-field-input-line-opacity: 0.7;
+    --_material-text-field-input-line-hover-opacity: 1;
+    --_material-text-field-focused-label-opacity: 1;
+
+    /* Button tweaks */
+    --_material-button-raised-background-color: rgba(255, 255, 255, 0.08);
+    --_material-button-outline-color: rgba(255, 255, 255, 0.2);
+
+    /* Grid tweaks */
+    --_material-grid-row-hover-background-color: rgba(255, 255, 255, 0.08);
+    --_material-grid-row-selected-overlay-opacity: 0.16;
+
+    /* Split layout tweaks */
+    --_material-split-layout-splitter-background-color: rgba(255, 255, 255, 0.8);
+
+    background-color: var(--material-background-color);
+    color: var(--material-body-text-color);
+  }
+
+  a {
+    color: inherit;
+  }

package/css/material/Font.css

@@ -0,0 +1,22 @@
+/* Generated file, do not edit */
+
+
+  html {
+    /* Font family */
+    --material-font-family: 'Roboto', sans-serif;
+
+    /* Font sizes */
+    --material-h1-font-size: 6rem;
+    --material-h2-font-size: 3.75rem;
+    --material-h3-font-size: 3rem;
+    --material-h4-font-size: 2.125rem;
+    --material-h5-font-size: 1.5rem;
+    --material-h6-font-size: 1.25rem;
+    --material-body-font-size: 1rem;
+    --material-small-font-size: 0.875rem;
+    --material-button-font-size: 0.875rem;
+    --material-caption-font-size: 0.75rem;
+
+    /* Icon size */
+    --material-icon-font-size: 20px;
+  }

package/css/material/FontIcons.css

@@ -0,0 +1,28 @@
+/* Generated file, do not edit */
+
+
+  @font-face {
+    font-family: 'material-icons';
+    src: url(data:application/font-woff;charset=utf-8;base64,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)
+      format('woff');
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  html {
+    --material-icons-arrow-downward: '\\ea01';
+    --material-icons-arrow-upward: '\\ea02';
+    --material-icons-calendar: '\\ea03';
+    --material-icons-check: '\\ea04';
+    --material-icons-chevron-left: '\\ea05';
+    --material-icons-chevron-right: '\\ea06';
+    --material-icons-clear: '\\ea07';
+    --material-icons-clock: '\\ea08';
+    --material-icons-dropdown: '\\ea09';
+    --material-icons-error: '\\ea0a';
+    --material-icons-eye: '\\ea0b';
+    --material-icons-eye-disabled: '\\ea0c';
+    --material-icons-play: '\\ea0d';
+    --material-icons-reload: '\\ea0e';
+    --material-icons-upload: '\\ea0f';
+  }

package/css/material/Shadow.css

@@ -0,0 +1,15 @@
+/* Generated file, do not edit */
+
+
+  /* prettier-ignore */
+  html {
+    /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
+    --material-shadow-elevation-2dp: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    --material-shadow-elevation-3dp: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
+    --material-shadow-elevation-4dp: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+    --material-shadow-elevation-6dp: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
+    --material-shadow-elevation-8dp: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
+    --material-shadow-elevation-12dp: 0 12px 16px 1px rgba(0, 0, 0, 0.14), 0 4px 22px 3px rgba(0, 0, 0, 0.12), 0 6px 7px -4px rgba(0, 0, 0, 0.4);
+    --material-shadow-elevation-16dp: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
+    --material-shadow-elevation-24dp: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4);
+  }

package/css/material/Typography.css

@@ -0,0 +1,80 @@
+/* Generated file, do not edit */
+
+@import url(./Font.css);
+
+
+  body,
+  html {
+    font-family: var(--material-font-family);
+    font-size: var(--material-body-font-size);
+    line-height: 1.4;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: inherit;
+    line-height: 1.1;
+    margin-top: 1.5em;
+  }
+
+  h1 {
+    font-size: var(--material-h3-font-size);
+    font-weight: 300;
+    letter-spacing: -0.015em;
+    margin-bottom: 1em;
+    text-indent: -0.07em;
+  }
+
+  h2 {
+    font-size: var(--material-h4-font-size);
+    font-weight: 300;
+    letter-spacing: -0.01em;
+    margin-bottom: 0.75em;
+    text-indent: -0.07em;
+  }
+
+  h3 {
+    font-size: var(--material-h5-font-size);
+    font-weight: 400;
+    margin-bottom: 0.75em;
+    text-indent: -0.05em;
+  }
+
+  h4 {
+    font-size: var(--material-h6-font-size);
+    font-weight: 400;
+    letter-spacing: 0.01em;
+    margin-bottom: 0.75em;
+    text-indent: -0.05em;
+  }
+
+  h5 {
+    font-size: var(--material-body-font-size);
+    font-weight: 500;
+    margin-bottom: 0.5em;
+    text-indent: -0.025em;
+  }
+
+  h6 {
+    font-size: var(--material-small-font-size);
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    margin-bottom: 0.25em;
+    text-indent: -0.025em;
+  }
+
+  a,
+  b,
+  strong {
+    font-weight: 500;
+  }
+
+@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic);
+@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic);

package/css/material/UserColors.css

@@ -0,0 +1,22 @@
+/* Generated file, do not edit */
+
+
+  html {
+    --vaadin-user-color-0: #ab47bc;
+    --vaadin-user-color-1: #546e7a;
+    --vaadin-user-color-2: #2e7d32;
+    --vaadin-user-color-3: #6d4c41;
+    --vaadin-user-color-4: #1976d2;
+    --vaadin-user-color-5: #00838f;
+    --vaadin-user-color-6: #827717;
+  }
+
+  [theme~='dark'] {
+    --vaadin-user-color-0: #9fa8da;
+    --vaadin-user-color-1: #00bcd4;
+    --vaadin-user-color-2: #ffeb3b;
+    --vaadin-user-color-3: #a1887f;
+    --vaadin-user-color-4: #2196f3;
+    --vaadin-user-color-5: #4caf50;
+    --vaadin-user-color-6: #ff9800;
+  }