@bildvitta/quasar-ui-asteroid 3.0.0-beta.3 → 3.0.0-beta.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.4",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/css/components/base.scss

@@ -0,0 +1,3 @@
+body {
+  background-color: $background-color;
+}

package/src/css/components/field.scss

@@ -0,0 +1,4 @@
+.q-field--outlined .q-field__inner {
+  background-color: white;
+  border-radius: $generic-border-radius;
+}

package/src/css/components/index.scss

@@ -0,0 +1,4 @@
+@import './base';
+@import './field';
+@import './radio';
+@import './tabs';

package/src/css/components/radio.scss

@@ -0,0 +1,3 @@
+.q-radio__inner::before {
+  color: $primary;
+}

package/src/css/components/tabs.scss

@@ -0,0 +1,3 @@
+.q-tabs__arrow {
+  color: $primary;
+}

package/src/css/mixins/index.scss

@@ -0,0 +1 @@
+@import './set-brand';

package/src/css/utils/index.scss

@@ -0,0 +1,10 @@
+@import './background';
+@import './border';
+@import './border-radius';
+@import './container';
+@import './fonts';
+@import './line-height';
+@import './opacity';
+@import './shadow';
+@import './text';
+@import './unset';

package/src/css/variables/button.scss

@@ -0,0 +1,3 @@
+$button-font-size: 0.875rem;
+$button-line-height: 1.5rem;
+$button-font-weight: 500;

package/src/css/variables/index.scss

@@ -0,0 +1,2 @@
+@import './button';
+@import './typography';

package/src/css/variables/typography.scss

@@ -0,0 +1,139 @@
+// Definições seguindo:
+// https://www.figma.com/file/JfDthOZoULYMlRJM2IQ8Oi/Design-System?node-id=665%3A163
+
+// Quasar:
+// https://github.com/quasarframework/quasar/blob/dev/ui/src/css/variables.sass
+// https://github.com/quasarframework/quasar/blob/dev/ui/src/css/core/typography.sass
+
+@use 'sass:map';
+
+// headings
+$h1: (
+  size: 6rem,
+  line-height: 6rem,
+  letter-spacing: 0,
+  weight: 800,
+  margin: 0
+);
+
+$h2: (
+  size: 3.75rem,
+  line-height: 3.75rem,
+  letter-spacing: 0,
+  weight: 700,
+  margin: 0
+);
+
+$h3: (
+  size: 3rem,
+  line-height: 2.5rem,
+  letter-spacing: 0,
+  weight: 600,
+  margin: 0
+);
+
+$h4: (
+  size: 2.125rem,
+  line-height: 2.5rem,
+  letter-spacing: 0,
+  weight: 800,
+  margin: 0
+);
+
+$h5: (
+  size: 1.5rem,
+  line-height: 2rem,
+  letter-spacing: 0,
+  weight: 700,
+  margin: 0
+);
+
+$h6: (
+  size: 1.25rem,
+  line-height: 2rem,
+  letter-spacing: 0,
+  weight: 600,
+  margin: 0
+);
+
+// subtitles
+$subtitle1: (
+  size: 1rem,
+  line-height: 1.75rem,
+  letter-spacing: 0,
+  weight: 700
+);
+
+$subtitle2: (
+  size: 0.875rem,
+  line-height: 1.375rem,
+  letter-spacing: 0,
+  weight: 600
+);
+
+// body
+$body1: (
+  size: 1rem,
+  line-height: 1.5rem,
+  letter-spacing: 0,
+  weight: 500
+);
+
+$body2: (
+  size: 0.875rem,
+  line-height: 1.25rem,
+  letter-spacing: 0,
+  weight: 400
+);
+
+// overline
+$overline: (
+  size: 0.75rem,
+  line-height: 2rem,
+  letter-spacing: 0.25rem,
+  weight: 600
+);
+
+// caption
+$caption: (
+  size: 0.75rem,
+  line-height: 1.25rem,
+  letter-spacing: 0,
+  weight: 700
+);
+
+$headings: (
+  'h1': $h1,
+  'h2': $h2,
+  'h3': $h3,
+  'h4': $h4,
+  'h5': $h5,
+  'h6': $h6,
+  'subtitle1': $subtitle1,
+  'subtitle2': $subtitle2,
+  'body1': $body1,
+  'body2': $body2,
+  'overline': $overline,
+  'caption': $caption
+);
+
+// adiciona tags com mesmo estilo do css
+$h-tags: (
+  h1: map.get($headings, 'h1'),
+  h2: map.get($headings, 'h2'),
+  h3: map.get($headings, 'h3'),
+  h4: map.get($headings, 'h4'),
+  h5: map.get($headings, 'h5'),
+  h6: map.get($headings, 'h6')
+);
+
+// sobrescreve as tags do css para adicionar "margin"
+@each $heading, $value in $h-tags {
+  #{$heading} {
+    font-size: map.get($value, 'size');
+    font-weight: map.get($value, 'weight');
+    letter-spacing: map.get($value, 'letter-spacing');
+    line-height: map.get($value, 'line-height');
+    margin: map.get($value, 'margin');
+  }
+}

package/src/index.scss

@@ -15,17 +15,14 @@ $secondary-contrast: var(--q-secondary-contrast);
 $background-color: var(--qas-background-color);
 $generic-border-radius: var(--qas-generic-border-radius);
 
-@import './css/background';
-@import './css/border';
-@import './css/border-radius';
-@import './css/container';
-@import './css/fonts';
-@import './css/line-height';
-@import './css/opacity';
-@import './css/shadow';
-@import './css/text';
-@import './css/unset';
+// variables
+@import './css/variables/index';
 
-// Design System
-@import './css/design-system';
-@import './css/design-system/index';
+// components
+@import './css/components/index';
+
+// utils
+@import './css/utils/index';
+
+// mixins
+@import './css/mixins/index'

package/src/css/design-system/button.scss

@@ -1,6 +0,0 @@
-// Definições seguindo:
-// https://www.figma.com/file/JfDthOZoULYMlRJM2IQ8Oi/Design-System?node-id=665%3A163
-
-$button-font-size: 0.875rem;
-$button-line-height: 1.5rem;
-$button-font-weight: 500;

package/src/css/design-system/index.scss

@@ -1,2 +0,0 @@
-@import './button';
-@import 'typography';

package/src/css/design-system/typography.scss

@@ -1,91 +0,0 @@
-// Definições seguindo:
-// https://www.figma.com/file/JfDthOZoULYMlRJM2IQ8Oi/Design-System?node-id=665%3A163
-
-// headings
-$h1: (
-  size: 6rem,
-  line-height: 6rem,
-  letter-spacing: 0,
-  weight: 800
-);
-
-$h2: (
-  size: 3.75rem,
-  line-height: 3.75rem,
-  letter-spacing: 0,
-  weight: 700
-);
-
-$h3: (
-  size: 3rem,
-  line-height: 3.125rem,
-  letter-spacing: 0,
-  weight: 600
-);
-
-$h4: (
-  size: 2.125rem,
-  line-height: 2.5rem,
-  letter-spacing: 0,
-  weight: 800
-);
-
-$h5: (
-  size: 2rem,
-  line-height: 2.5rem,
-  letter-spacing: 0,
-  weight: 700
-);
-
-$h6: (
-  size: 1.25rem,
-  line-height: 2rem,
-  letter-spacing: 0,
-  weight: 600
-);
-
-// subtitles
-$subtitle1: (
-  size: 1rem,
-  line-height: 1.75rem,
-  letter-spacing: 0,
-  weight: 700
-);
-
-$subtitle2: (
-  size: 0.875rem,
-  line-height: 1.375rem,
-  letter-spacing: 0,
-  weight: 600
-);
-
-// body
-$body1: (
-  size: 1rem,
-  line-height: 1.5rem,
-  letter-spacing: 0,
-  weight: 500
-);
-
-$body2: (
-  size: 0.875rem,
-  line-height: 1.25rem,
-  letter-spacing: 0,
-  weight: 400
-);
-
-// overline
-$overline: (
-  size: 0.75rem,
-  line-height: 2rem,
-  letter-spacing: 0.25rem,
-  weight: 600
-);
-
-// caption
-$caption: (
-  size: 0.75rem,
-  line-height: 1.25rem,
-  letter-spacing: 0,
-  weight: 700
-);

package/src/css/design-system.scss

@@ -1,18 +0,0 @@
-body {
-  background-color: $background-color;
-}
-
-// Fields
-.q-field--outlined .q-field__inner {
-  background-color: white;
-  border-radius: $generic-border-radius;
-}
-
-.q-radio__inner::before {
-  color: $primary;
-}
-
-// Tabs
-.q-tabs__arrow {
-  color: $primary;
-}