vitat-css 0.1.0 → 0.1.2

data/package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "bootstrap": "^5.3.0",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.52.3"
+  }
+}

data/scss/guide/_variables.scss

@@ -0,0 +1,171 @@
+//GLOBAL TOKENS
+
+//GLOBAL TOKENS -- LINE HEIGHT
+
+$line-height-default: 100%;
+$line-height-xs: 115%;
+$line-height-sm: 120%;
+$line-height-md: 133%;
+$line-height-lg: 150%;
+$line-height-xl: 170%;
+$line-height-xxl: 200%;
+
+//GLOBAL TOKENS -- FONT SIZE
+
+$font-size-nano: 10px;
+$font-size-xxxs: 12px;
+$font-size-xxs: 14px;
+$font-size-xs: 16px;
+$font-size-sm: 18px;
+$font-size-md: 20px;
+$font-size-lg: 24px;
+$font-size-xl: 32px;
+$font-size-xxl: 40px;
+$font-size-xxxl: 48px;
+$font-size-display: 64px;
+$font-size-giant: 80px;
+
+//GLOBAL TOKENS -- BORDER RADIUS
+
+$border-radius-none: 0px;
+$border-radius-xs: 4px;
+$border-radius-SM: 8px;
+$border-radius-md: 16px;
+$border-radius-lg: 24px;
+$border-radius-pill: 500px;
+$border-radius-circular: 50%;
+
+//GLOBAL TOKENS -- BORDER WIDTH
+
+$border-width-hairline: 1px;
+$border-width-thin: 2px;
+$border-width-thick: 4px;
+$border-width-heavy: 8px;
+
+//GLOBAL TOKENS -- OPACITY LEVELS
+
+$opacity-level-semiopaque: 0.8;
+$opacity-level-intense: 0.64;
+$opacity-level-medium: 0.32;
+$opacity-level-light: 0.16;
+$opacity-level-semitransparent: 0.08;
+
+//GLOBAL TOKENS -- OPACITY SHADOW
+
+$shadow-level-1: 0px 4px 8px rgba(0, 0, 0, 0.08);
+$shadow-level-2: 0px 8px 24px rgba(0, 0, 0, 0.16);
+$shadow-level-3: 0px 16px 32px rgba(0, 0, 0, 0.16);
+$shadow-level-4: 0px 16px 48px rgba(0, 0, 0, 0.24);
+
+//GLOBAL TOKENS -- SIZING
+
+$sizing-quarck: 4px;
+$sizing-nano: 8px;
+$sizing-xxxs: 16px;
+$sizing-xxs: 24px;
+$sizing-xs: 32px;
+$sizing-sm: 40px;
+$sizing-md: 48px;
+$sizing-lg: 56px;
+$sizing-xl: 64px;
+$sizing-xxl: 80px;
+$sizing-xxxl: 120px;
+$sizing-huge: 160px;
+$sizing-giant: 200px;
+
+//GLOBAL TOKENS -- SPACING
+
+$spacing-quarck: 4px;
+$spacing-nano: 8px;
+$spacing-xxxs: 16px;
+$spacing-xxs: 24px;
+$spacing-xs: 32px;
+$spacing-sm: 40px;
+$spacing-md: 48px;
+$spacing-lg: 56px;
+$spacing-xl: 64px;
+$spacing-xxl: 80px;
+$spacing-xxxl: 120px;
+$spacing-huge: 160px;
+$spacing-giant: 200px;
+
+//GLOBAL TOKENS -- SPACING INSET
+
+$spacing_inset-quarck: 4px;
+$spacing_inset-nano: 8px;
+$spacing_inset-xs: 16px;
+$spacing_inset-sm: 24px;
+$spacing_inset-md: 32px;
+$spacing_inset-lg: 40px;
+$spacing_inset-xl: 64px;
+
+//DESIGN SYSTEM VITAT
+
+//DESIGN SYSTEM VITAT -- FONT FAMILY
+
+$font-family-highlight: "Livvic", sans-serif;
+$font-family-base: "Livvic", sans-serif;
+
+//DESIGN SYSTEM VITAT -- FONT WEIGHT
+
+$font-weight-bold: 700;
+$font-weight-medium: 600;
+$font-weight-regular: 400;
+
+//DESIGN SYSTEM VITAT -- BRAND COLORS
+
+$brand-color-primary-light: #ecf7c5;
+$brand-color-primary-pure: #bfe338;
+$brand-color-primary-medium: #8fae19;
+$brand-color-primary-dark: #54670f;
+
+$brand-color-secondary-light: #ede5f7;
+$brand-color-secondary-pure: #5a3b94;
+$brand-color-secondary-medium: #4e2f8a;
+$brand-color-secondary-dark: #261e4d;
+
+//DESIGN SYSTEM VITAT -- HIGHLIGHT COLORS
+
+$highlight-color-light: #fad9bc;
+$highlight-color-pure: #f08223;
+$highlight-color-medium: #b55b0c;
+$highlight-color-dark: #693507;
+
+//DESIGN SYSTEM VITAT -- HEALTH COLORS
+
+$health-color-primary: #f5a0c5;
+$health-color-secondary: #ede7c4;
+
+//DESIGN SYSTEM VITAT -- WELL-BEING COLORS
+
+$well-being-color-primary: #ffee87;
+$well-being-color-secondary: #a58fc4;
+
+//DESIGN SYSTEM VITAT -- NEUTRAL COLORS
+
+$neutral-color-low-pure: #002b49;
+$neutral-color-low-dark: #142028;
+$neutral-color-low-medium: #374051;
+$neutral-color-low-light: #5a6072;
+
+$neutral-color-high-pure: #ffffff;
+$neutral-color-high-light: #f0f1f5;
+$neutral-color-high-medium: #d3d6e0;
+$neutral-color-high-dark: #959aab;
+
+//DESIGN SYSTEM VITAT -- FEEDBACK COLORS
+
+$feedback-color-warning-light: #fff9cc;
+$feedback-color-warning-pure: #f2a807;
+$feedback-color-warning-medium: #bf7500;
+$feedback-color-warning-dark: #693a00;
+
+$feedback-color-danger-light: #fde7ea;
+$feedback-color-danger-pure: #d0434f;
+$feedback-color-danger-medium: #9d101c;
+$feedback-color-danger-dark: #540002;
+
+$feedback-color-success-light: #daf5e8;
+$feedback-color-success-pure: #138647;
+$feedback-color-success-medium: #005314;
+$feedback-color-success-dark: #002500;

data/scss/guide/components/_animations.scss

@@ -0,0 +1,8 @@
+@import "../variables";
+
+
+@keyframes focus {
+  0% {box-shadow: 0px 0px 0px $border-width-thick $highlight-color-pure;}
+  50% {box-shadow: 0px 0px 0px $border-width-thin $highlight-color-pure;}
+  100% {box-shadow: 0px 0px 0px $border-width-thick $highlight-color-pure;}
+}

data/scss/guide/components/_typography.scss

@@ -0,0 +1,157 @@
+@import "../variables";
+
+//DESIGN SYSTEM VITAT -- TYPOGRAPHY
+.heading {
+  font-family: $font-family-highlight;
+  margin-bottom: $spacing-xxxs;
+  color: $neutral-color-low-pure;
+  &__1 {
+    font-weight: $font-weight-medium;
+    font-size: $font-size-xl;
+    line-height: $line-height-xs;
+    @media (min-width: 1200px) {
+      font-size: $font-size-xxxl;
+    }
+  }
+  &__2 {
+    font-weight: $font-weight-regular;
+    font-size: $font-size-lg;
+    line-height: $line-height-sm;
+    @media (min-width: 1200px) {
+      font-size: $font-size-xl;
+    }
+  }
+  &__3 {
+    font-weight: $font-weight-medium;
+    font-size: $font-size-md;
+    line-height: $line-height-sm;
+    @media (min-width: 1200px) {
+      font-size: $font-size-lg;
+    }
+  }
+  &__4 {
+    font-weight: $font-weight-regular;
+    font-size: $font-size-md;
+    line-height: $line-height-sm;
+    @media (min-width: 1200px) {
+      font-size: $font-size-lg;
+    }
+  }
+  &__5 {
+    font-weight: $font-weight-bold;
+    font-size: $font-size-sm;
+    line-height: $line-height-sm;
+    @media (min-width: 1200px) {
+      font-size: $font-size-md;
+    }
+  }
+  &__6 {
+    font-weight: $font-weight-medium;
+    font-size: $font-size-xs;
+    line-height: $line-height-sm;
+    @media (min-width: 1200px) {
+      font-size: $font-size-sm;
+    }
+  }
+  &__7 {
+    font-weight: $font-weight-medium;
+    font-size: $font-size-xxs;
+    line-height: $line-height-sm;
+    @media (min-width: 1200px) {
+      font-size: $font-size-xs;
+    }
+  }
+}
+.body {
+  font-family: $font-family-base;
+  margin-bottom: $spacing-xxxs;
+  color: $neutral-color-low-medium;
+  &__1 {
+    font-weight: $font-weight-regular;
+    font-size: $font-size-xxs;
+    line-height: $line-height-lg;
+    @media (min-width: 1200px) {
+      font-size: $font-size-xs;
+    }
+    &--bold {
+      font-weight: $font-weight-bold;
+    }
+    &--italic {
+      font-style: italic;
+    }
+    &--link {
+      font-weight: $font-weight-medium;
+      text-decoration: underline;
+      color: $brand-color-secondary-pure;
+      &:hover {
+        color: $brand-color-secondary-medium;
+        text-decoration: underline;
+      }
+      &:visited {
+        text-decoration: underline;
+        color: $brand-color-secondary-pure;
+      }
+    }
+  }
+  &__2 {
+    font-weight: $font-weight-regular;
+    font-size: $font-size-xxxs;
+    line-height: $line-height-lg;
+    @media (min-width: 1200px) {
+      font-size: $font-size-xxs;
+    }
+    &--bold {
+      font-weight: $font-weight-medium;
+    }
+    &--italic {
+      font-style: italic;
+    }
+    &--link {
+      font-weight: $font-weight-medium;
+      text-decoration: underline;
+      color: $brand-color-secondary-pure;
+      &:hover {
+        color: $brand-color-secondary-medium;
+        text-decoration: underline;
+      }
+      &:visited {
+        text-decoration: underline;
+        color: $brand-color-secondary-pure;
+      }
+    }
+  }
+}
+.overline {
+  font-family: $font-family-base;
+  font-weight: $font-weight-medium;
+  font-size: $font-size-xxxs;
+  line-height: $line-height-lg;
+  margin-bottom: $spacing-quarck;
+  letter-spacing: 0.03em;
+  color: $neutral-color-low-light;
+  @media (min-width: 1200px) {
+    font-size: $font-size-xxxs;
+  }
+}
+.pillText {
+  font-family: $font-family-base;
+  font-weight: $font-weight-medium;
+  font-size: $font-size-xxxs;
+  line-height: $line-height-sm;
+  letter-spacing: 0.03em;
+  color: $neutral-color-low-medium;
+  @media (min-width: 1200px) {
+    font-size: $font-size-xxxs;
+  }
+}
+.link {
+  font-family: $font-family-base;
+  font-weight: $font-weight-medium;
+  font-size: $font-size-xxs;
+  line-height: $line-height-lg;
+  letter-spacing: 0.03em;
+  color: $neutral-color-low-pure;
+  @media (min-width: 1200px) {
+    font-size: $font-size-xs;
+  }
+}

data/scss/guide/components/arabescos/arabescos.scss

@@ -0,0 +1,47 @@
+@import "_variables.scss";
+@import "../_typography";
+
+.wave {
+  height: 100%;
+  position: relative;
+  background-color: $well-being-color-secondary;
+  &__box {
+    padding: $sizing-xxs $sizing-xxxs $spacing-xxl $sizing-xxxs;
+  }
+  &__inverted {
+    transform: rotate(180deg);
+    height: $sizing-xs;
+    min-height: $sizing-xs;
+  }
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-repeat: repeat;
+    height: 21px;
+    background-size: 94px 40px;
+    background-image: radial-gradient(
+      circle at 39px -32px,
+      transparent 49px,
+      #fff 50px
+    );
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-repeat: repeat;
+    height: 30px;
+    background-size: 94px 40px;
+    background-image: radial-gradient(
+      circle at 86px 18px,
+      #fff 12px,
+      transparent 13px
+    );
+  }
+}

data/scss/guide/components/buttons/btn.scss

@@ -0,0 +1,26 @@
+@import "_variables.scss";
+@import "../_typography";
+
+.btn{
+  font-family:$font-family-base;
+  font-weight:$font-weight-medium;
+  padding:$spacing_inset-nano $spacing_inset-sm;
+  border-radius:$border-radius-pill;
+  text-align: center;
+  font-size:$font-size-xxs;
+  width:100%;
+  cursor:pointer;
+  @media(min-width:1200px) {
+    min-width:$sizing-xl;
+  }
+  &:focus{
+    animation: focus 2s infinite ease-in-out;
+  }
+  &:disabled{
+    background:$neutral-color-high-medium;
+    opacity: $opacity-level-medium;
+  }
+}
+
+
+

data/scss/guide/components/buttons/btn__large.scss

@@ -0,0 +1,10 @@
+@import "_variables.scss";
+@import "../_typography";
+
+.btn__large{
+  @extend .btn;
+  height:$sizing-md;
+  @media(min-width:1200px) {
+    height:$sizing-lg;
+  }
+}

data/scss/guide/components/buttons/btn__primary.scss

@@ -0,0 +1,11 @@
+@import "_variables.scss";
+@import "../_typography";
+
+.btn__primary{
+  @extend .btn;
+  color:$neutral-color-low-pure;
+  background:$brand-color-primary-pure;
+  &:hover{
+    background:$brand-color-primary-dark;
+  }
+}

data/scss/guide/components/buttons/btn__secondary.scss

@@ -0,0 +1,11 @@
+@import "_variables.scss";
+@import "../_typography";
+
+.btn__secondary{
+  @extend .btn;
+  color:$brand-color-primary-pure;
+  background:$neutral-color-low-pure;
+  &:hover{
+    background:$neutral-color-low-dark;
+  }
+}

data/scss/guide/components/buttons/btn__tertiary.scss

@@ -0,0 +1,11 @@
+@import "_variables.scss";
+@import "../_typography";
+
+.btn__tertiary{
+  @extend .btn;
+  color:$neutral-color-low-dark;
+  background:$neutral-color-high-light;
+  &:hover{
+    background:$neutral-color-high-medium;
+  }
+}

data/scss/guide/components/cardapp/cardapp.scss

@@ -0,0 +1,151 @@
+@import "_variables.scss";
+@import "../_typography";
+@import "../../../../bootstrap/scss/modal";
+
+.cardapp-bg {
+  background-color: $well-being-color-secondary;
+}
+
+.cardapp__link {
+  @extend .btn__primary;
+  display: flex;
+  justify-content: center;
+  padding: $font-size-xxxs 0;
+}
+
+.cardapp__btn {
+  display: contents;
+  border: none;
+}
+
+.cardapp {
+  @extend .card;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: $sizing-xxxs;
+
+  @media (min-width: 1200px) {
+    text-align: start;
+    padding: $sizing-xxs;
+    align-items: flex-start;
+
+    &__wrapper {
+      padding-left: $sizing-xxs;
+    }
+  }
+
+  &__img {
+    width: $spacing-xl;
+    padding-bottom: $sizing-xxxs;
+    @media (min-width: 1200px) {
+      width: $spacing-xxl;
+      height: $spacing-xxl;
+      padding-bottom: 0%;
+    }
+  }
+
+  &__title {
+    margin-bottom: $sizing-nano;
+    color: $neutral-color-low-pure;
+  }
+
+  &__text {
+    padding-bottom: $sizing-xxxs;
+    @media (min-width: 1200px) {
+      padding-top: $spacing-nano;
+      padding-bottom: $spacing-xxs;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    @media (min-width: 1200px) {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: center;
+      margin: 0;
+    }
+  }
+
+  &__imgbox {
+    padding: 0;
+  }
+
+  a,
+  p {
+    color: $neutral-color-low-pure;
+    text-decoration: none;
+  }
+}
+
+// Modal
+
+.modal {
+  display: none;
+}
+
+.cardapp__modal {
+  border-radius: $border-radius-md;
+  color: $neutral-color-low-pure;
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.modal-header {
+  border: none;
+  padding: 12px 12px 12px auto;
+}
+
+.btn-close-modal {
+  width: $sizing-sm;
+  height: $sizing-sm;
+  border-radius: $border-radius-circular;
+  background-color: $neutral-color-high-light;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  &::after {
+    background-repeat: no-repeat;
+    content: "";
+    background-image: url("/img/close.png");
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-size: cover;
+  }
+}
+
+.modal-footer-text {
+  margin: $spacing-quarck 0 $spacing-xl 0;
+}
+
+.modal-heading {
+  margin-bottom: $spacing-quarck;
+}
+
+.desktop {
+  display: none;
+  @media (min-width: 1200px) {
+    display: block;
+  }
+}
+
+.mobile {
+  display: block;
+  @media (min-width: 1200px) {
+    display: none;
+  }
+}

data/scss/guide/components/cards/card.scss

@@ -0,0 +1,58 @@
+@import "_variables.scss";
+@import "../_typography";
+@import "../animations";
+
+.card {
+  display: flex;
+  flex-direction: column;
+  background: $neutral-color-high-pure;
+  border-radius: $spacing-xxxs;
+  box-shadow: $shadow-level-1;
+  text-decoration: none;
+  width: 100%;
+  .pill {
+    margin-bottom: 0px;
+  }
+  .heading {
+    margin-bottom: 0px;
+  }
+  .body {
+    margin-bottom: 0px;
+  }
+
+  &:focus {
+    animation: focus 2s infinite ease-in-out;
+  }
+
+  &__img {
+    border-radius: $spacing-xxxs $spacing-xxxs 0px 0px;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  &__wrapper {
+    padding: $spacing-xxxs;
+    @media (min-width: 1200px) {
+      padding-bottom: $spacing-xs;
+    }
+  }
+
+  &__title {
+    padding-top: $spacing_inset-nano;
+    padding-bottom: $spacing_inset-nano;
+    margin: 0px;
+  }
+  &__text {
+    margin: 0px;
+  }
+
+  //CSS para demonstração
+  &__color {
+    background-color: #cec1e6;
+    padding: 50px 0;
+
+    .card__horizontal {
+      margin-bottom: $spacing_inset-xs;
+    }
+  }
+}