Merge branch 'develop' into releases/2.1.0

Author: frascuchon

argilla-frontend/assets/icons/dark-theme.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'dark-theme': {
+    width: 18,
+    height: 18,
+    viewBox: '0 0 18 18',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M9.203.002a9 9 0 108.49 6.664c-.509.488-1.036.919-1.568 1.292-1.217.854-2.46 1.407-3.588 1.657C10.822 9.996 9.644 9.644 9 9c-.644-.644-.996-1.822-.615-3.537.25-1.127.803-2.371 1.657-3.588.373-.532.804-1.059 1.292-1.569a9.032 9.032 0 00-2.13-.304zm4.888 14.09a7.169 7.169 0 002.025-3.995c-3.191 1.84-6.542 2.023-8.389.176-1.847-1.847-1.665-5.198.176-8.39a7.2 7.2 0 106.188 12.208z" _fill="#000"/>'
+  }
+})

argilla-frontend/assets/icons/index.js

@@ -13,6 +13,7 @@ require('./close')
 require('./code')
 require('./copy')
 require('./danger')
+require('./dark-theme')
 require('./discard')
 require('./draggable')
 require('./expand-arrows')
@@ -24,6 +25,7 @@ require('./focus-mode')
 require('./hand-labeling')
 require('./info')
 require('./kebab')
+require('./light-theme')
 require('./link')
 require('./log-out')
 require('./matching')
@@ -45,6 +47,7 @@ require('./sort')
 require('./stats')
 require('./suggestion')
 require('./support')
+require('./system-theme')
 require('./time')
 require('./trash-empty')
 require('./unavailable')

argilla-frontend/assets/icons/light-theme.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'light-theme': {
+    width: 18,
+    height: 18,
+    viewBox: '0 0 18 18',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M9 12a3 3 0 100-6 3 3 0 000 6zm0 1.5a4.5 4.5 0 100-9 4.5 4.5 0 000 9zM8.25 0h1.5v3.046a6.059 6.059 0 00-1.5 0V0zM5.32 4.26L3.167 2.106l-1.06 1.06L4.26 5.321a6.035 6.035 0 011.06-1.06zM3.047 8.25H0v1.5h3.046a6.059 6.059 0 010-1.5zm1.214 4.43l-2.154 2.154 1.06 1.06 2.155-2.154a6.036 6.036 0 01-1.06-1.06zm3.99 2.274V18h1.5v-3.046a6.067 6.067 0 01-1.5 0zm4.43-1.214l2.154 2.154 1.06-1.06-2.154-2.155a6.036 6.036 0 01-1.06 1.06zm2.274-3.99H18v-1.5h-3.046a6.067 6.067 0 010 1.5zM13.74 5.32l2.154-2.154-1.06-1.06-2.155 2.154c.396.308.753.665 1.06 1.06z" _fill="#000"/>'
+  }
+})

argilla-frontend/assets/icons/system-theme.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'system-theme': {
+    width: 18,
+    height: 18,
+    viewBox: '0 0 18 18',
+    data: '<path pid="0" d="M9 12.6a3.6 3.6 0 000-7.2v7.2z" _fill="#000"/><path pid="1" fill-rule="evenodd" clip-rule="evenodd" d="M9 0a9 9 0 100 18A9 9 0 009 0zm0 1.8v3.6a3.6 3.6 0 100 7.2v3.6A7.2 7.2 0 009 1.8z" _fill="#000"/>'
+  }
+})

argilla-frontend/assets/scss/abstract.scss

@@ -16,11 +16,12 @@
  */
 
 // abstract
-@import 'abstract/fonts/fonts';
-@import 'abstract/functions/functions';
-@import 'abstract/variables/variables';
-@import 'abstract/mixins/mixins';
-@import 'abstract/mixins/media-queries';
-@import 'abstract/mixins/grid-mixins';
-@import 'abstract/placeholders/placeholders';
-@import 'abstract/placeholders/tooltip';
+@import "abstract/fonts/fonts";
+@import "abstract/functions/functions";
+@import "abstract/variables/variables";
+@import "abstract/variables/themes";
+@import "abstract/mixins/mixins";
+@import "abstract/mixins/media-queries";
+@import "abstract/mixins/grid-mixins";
+@import "abstract/placeholders/placeholders";
+@import "abstract/placeholders/tooltip";

argilla-frontend/assets/scss/abstract/fonts/fonts.scss

@@ -1,8 +1,7 @@
 @font-face {
-    font-family: 'raptor_v2_premiumbold';
-    src: url('@/assets/fonts/raptorv2premium-bold-webfont.woff2') format('woff2'),
-         url('@/assets/fonts/raptorv2premium-bold-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-
-}
+  font-family: "raptor_v2_premiumbold";
+  src: url("@/assets/fonts/raptorv2premium-bold-webfont.woff2") format("woff2"),
+    url("@/assets/fonts/raptorv2premium-bold-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}

argilla-frontend/assets/scss/abstract/functions/_functions.scss

@@ -29,18 +29,6 @@
 //  }
 
 @function calculateRem($size) {
-    $remSize: calc($size / 16px);
-    @return $remSize * 1rem;
-}
-
-// get KEY from MAP - COLOUR PALETTES
-// http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
-
-@function palette($palette, $tone: 'base') {
-    @if map-has-key($palettes, $palette) {
-      @return map-get(map-get($palettes, $palette), $tone);
-    }
-
-    @warn "Unknown `#{$palette}` in $palettes.";
-    @return null;
+  $remSize: calc($size / 16px);
+  @return $remSize * 1rem;
 }

argilla-frontend/assets/scss/abstract/placeholders/_placeholders.scss

@@ -27,49 +27,6 @@
   position: absolute;
 }
 
-// Linear gradient using $primary-color
-%primary-color-gradient {
-  background: $primary-color;
-  background: -moz-linear-gradient(
-    top,
-    $primary-color 0%,
-    $primary-lighten-color 100%
-  );
-  background: -webkit-linear-gradient(
-    top,
-    $primary-color 0%,
-    $primary-lighten-color 100%
-  );
-  background: linear-gradient(
-    to bottom,
-    $primary-color 0%,
-    $primary-lighten-color 100%
-  );
-}
-
-// Linear gradient using palette(blue, 300)
-%secondary-color-gradient {
-  background: palette(blue, 300);
-  background: -moz-linear-gradient(
-    top,
-    palette(blue, 300) 0%,
-    $secondary-darken-color 55%,
-    palette(blue, 300) 100%
-  );
-  background: -webkit-linear-gradient(
-    top,
-    palette(blue, 300) 0%,
-    $secondary-darken-color 55%,
-    palette(blue, 300) 100%
-  );
-  background: linear-gradient(
-    to bottom,
-    palette(blue, 300) 0%,
-    $secondary-darken-color 55%,
-    palette(blue, 300) 100%
-  );
-}
-
 // Align center block element
 %center {
   display: block;

argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss

@@ -1,7 +1,7 @@
 // tooltip
-$tooltip-bg: palette(grey, 100);
-$tooltip-mini-bg: palette(grey, 150);
-$tooltip-color: palette(white);
+$tooltip-bg: var(--bg-tooltip);
+$tooltip-mini-bg: var(--bg-tooltip);
+$tooltip-color: var(--color-white);
 $tooltip-title-font-size: 11px;
 $tooltip-font-size: 13px;
 $tooltip-triangle-size: 7px;

argilla-frontend/assets/scss/abstract/variables/_themes.scss

@@ -0,0 +1,138 @@
+:root {
+  --color-black: hsla(0, 0%, 0%, 0.87);
+  --color-white: hsl(0, 0%, 100%);
+  --color-dark-grey: hsl(207, 9%, 19%);
+  --color-brand: hsl(3, 100%, 69%);
+  --color-brand-secondary: hsl(19, 85%, 81%);
+  --color-danger: var(--color-brand);
+  --color-warning: hsl(18, 98%, 68%);
+  --color-success: hsl(88, 74%, 36%);
+  --color-info: hsl(0, 0%, 90%);
+  --bg-action: hsl(227, 56%, 52%);
+  --bg-action-accent: hsl(227, 50%, 46%);
+  --bg-black: hsla(0, 0%, 0%, 0.87);
+  --bg-solid-grey-1: hsl(0, 0%, 98%);
+  --bg-solid-grey-2: hsl(0, 0%, 96%);
+  --bg-solid-grey-3: hsl(0, 0%, 90%);
+  --bg-accent-grey-1: hsl(0, 0%, 100%);
+  --bg-accent-grey-2: hsl(0, 0%, 100%);
+  --bg-accent-grey-3: hsl(0, 0%, 98%);
+  --bg-accent-grey-4: hsl(0, 0%, 98%);
+  --bg-opacity-1: hsla(0, 0%, 0%, 0.01);
+  --bg-opacity-2: hsla(0, 0%, 0%, 0.02);
+  --bg-opacity-3: hsla(0, 0%, 0%, 0.03);
+  --bg-opacity-4: hsla(0, 0%, 0%, 0.04);
+  --bg-opacity-6: hsla(0, 0%, 0%, 0.06);
+  --bg-opacity-10: hsla(0, 0%, 0%, 0.1);
+  --bg-opacity-20: hsla(0, 0%, 0%, 0.2);
+  --bg-opacity-37: hsla(0, 0%, 0%, 0.37);
+  --bg-opacity-54: hsla(0, 0%, 0%, 0.54);
+  --bg-opacity-87: hsla(0, 0%, 0%, 0.87);
+  --fg-lighter: hsl(0, 0%, 100%);
+  --fg-primary: hsla(0, 0%, 0%, 0.87);
+  --fg-secondary: hsla(0, 0%, 0%, 0.54);
+  --fg-tertiary: hsla(0, 0%, 0%, 0.37);
+  --fg-cuaternary: hsl(227, 56%, 52%);
+  --fg-status-pending: hsl(35, 90%, 39%);
+  --fg-status-draft: hsl(188, 92%, 39%);
+  --bg-status-draft: hsl(188, 64%, 82%);
+  --bg-status-draft-accent: hsl(188, 64%, 84%);
+  --fg-status-discarded: hsla(0, 0%, 56%);
+  --bg-status-discarded: hsla(0, 5%, 87%);
+  --bg-status-discarded-accent: hsla(0, 5%, 83%);
+  --fg-status-submitted: hsl(227, 56%, 52%);
+  --bg-status-submitted: hsl(227, 100%, 85%);
+  --bg-status-submitted-accent: hsl(227, 100%, 82%);
+  --fg-filter-badge: hsl(239, 36%, 47%);
+  --fg-filter-badge-accent: hsl(238, 100%, 86%);
+  --bg-filter-badge: hsl(240, 100%, 92%);
+  --bg-filter-badge-accent: hsl(240, 100%, 90%);
+  --fg-label: hsl(239, 36%, 47%);
+  --fg-label-2: hsl(239, 37%, 40%);
+  --bg-label: hsl(239, 36%, 47%);
+  --bg-label-unselected: hsl(0, 0%, 96%);
+  --bg-label-unselected-hover: hsla(0, 0%, 0%, 0.06);
+  --bg-field: linear-gradient(45deg, var(--bg-opacity-2), var(--bg-opacity-1));
+  --bg-form: hsl(0, 0%, 100%);
+  --bg-form-button-area: hsl(228, 50%, 96%);
+  --fg-shortcut-key: hsla(0, 0%, 0%, 0.2);
+  --bg-similarity: hsl(2, 100%, 94%);
+  --fg-similarity: hsl(3, 100%, 69%);
+  --fg-highlight: hsl(3, 100%, 69%);
+  --bg-auth: hsl(18, 57%, 91%);
+  --bg-auth-gradient: linear-gradient(
+    178.31deg,
+    #ffe5d9 1.36%,
+    #ffd1bc 109.14%
+  );
+  --bg-banner-info: hsl(0, 0%, 90%);
+  --bg-banner-warning: hsl(47, 83%, 91%);
+  --bg-banner-error: hsl(3, 100%, 92%);
+  --bg-tooltip: var(--color-dark-grey);
+}
+
+[data-theme="dark"] {
+  --bg-black: hsl(0, 0%, 0%);
+  --bg-action: hsl(227, 56%, 52%);
+  --bg-action-accent: hsl(227, 50%, 55%);
+  --bg-solid-grey-1: hsl(214, 12%, 10%);
+  --bg-solid-grey-2: hsl(214, 12%, 14%);
+  --bg-solid-grey-3: hsl(214, 12%, 16%);
+  --bg-accent-grey-1: hsl(214, 12%, 12%);
+  --bg-accent-grey-2: hsl(214, 12%, 16%);
+  --bg-accent-grey-3: hsl(214, 12%, 14%);
+  --bg-accent-grey-4: hsl(214, 12%, 16%);
+  --bg-opacity-1: hsla(0, 0%, 100%, 0.01);
+  --bg-opacity-2: hsla(0, 0%, 100%, 0.02);
+  --bg-opacity-3: hsla(0, 0%, 100%, 0.03);
+  --bg-opacity-4: hsla(0, 0%, 100%, 0.04);
+  --bg-opacity-6: hsla(0, 0%, 100%, 0.06);
+  --bg-opacity-10: hsla(0, 0%, 100%, 0.1);
+  --bg-opacity-20: hsla(0, 0%, 100%, 0.2);
+  --bg-opacity-37: hsla(0, 0%, 100%, 0.37);
+  --bg-opacity-54: hsla(0, 0%, 100%, 0.54);
+  --bg-opacity-87: hsla(0, 0%, 100%, 0.87);
+  --fg-lighter: hsl(0, 0%, 87%);
+  --fg-primary: hsla(0, 0%, 100%, 0.87);
+  --fg-secondary: hsla(0, 0%, 100%, 0.7);
+  --fg-tertiary: hsla(0, 0%, 100%, 0.5);
+  --fg-cuaternary: hsl(227, 100%, 70%);
+  --fg-status-pending: hsl(35, 62%, 60%);
+  --fg-status-draft: hsl(188, 92%, 39%);
+  --bg-status-draft: hsl(188, 40%, 40%);
+  --bg-status-draft-accent: hsl(188, 40%, 44%);
+  --fg-status-discarded: hsl(0, 0%, 46%);
+  --bg-status-discarded: hsl(0, 0%, 40%);
+  --bg-status-discarded-accent: hsl(0, 0%, 48%);
+  --fg-status-submitted: hsl(227, 70%, 64%);
+  --bg-status-submitted: hsl(227, 70%, 56%);
+  --bg-status-submitted-accent: hsl(227, 70%, 60%);
+  --fg-filter-badge: hsla(0, 0%, 100%, 0.87);
+  --fg-filter-badge-accent: hsl(239, 53%, 54%);
+  --bg-filter-badge: hsl(239, 53%, 56%);
+  --bg-filter-badge-accent: hsl(239, 53%, 54%);
+  --fg-label: hsl(239, 36%, 75%);
+  --fg-label-2: hsl(0, 0%, 100%);
+  --bg-label: hsl(239, 37%, 50%);
+  --bg-label-unselected: hsl(214, 12%, 18%);
+  --bg-label-unselected-hover: hsl(214, 12%, 20%);
+  --bg-field: linear-gradient(45deg, var(--bg-opacity-4), var(--bg-opacity-2));
+  --bg-form: hsl(216 12% 14%);
+  --bg-form-button-area: hsla(228, 40.18%, 59.31%, 0.2);
+  --fg-shortcut-key: hsla(0, 0%, 100%, 0.4);
+  --bg-similarity: hsla(2, 100%, 94%, 4%);
+  --fg-similarity: hsla(3, 100%, 74%, 90%);
+  --fg-highlight: hsl(3, 100%, 69%);
+  --bg-banner-info: hsl(0, 0%, 20%);
+  --bg-banner-warning: hsl(47, 83%, 16%);
+  --bg-banner-error: hsl(3, 100%, 20%);
+  --bg-tooltip: hsl(207, 9%, 32%);
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}