decidim-theme 0.1.4

data/app/packs/stylesheets/decidim/theme/_theme_variables.scss

@@ -0,0 +1,80 @@
+:root {
+  //DECIDIM DEFAULT VARIABLES
+  /*
+    --primary: #ef604d;
+    --primary-rgb: 239, 96, 77;
+    --secondary: #599aa6;
+    --secondary-rgb: 89, 154, 166;
+    --success: #57d685;
+    --success-rgb: 87, 214, 133;
+    --warning: #ffae00;
+    --warning-rgb: 255, 174, 0;
+    --alert: #ec5840;
+    --alert-rgb: 236, 88, 64;
+    --proposals: #238ff7;
+    --actions: #57d685;
+    --debates: #fa6c96;
+    --meetings: #fabc6c;
+    --twitter: #55acee;
+    --facebook: #3b5998;
+    --google: #dd4b39;
+  */
+
+  //Colors/neutrals
+  --white: rgb(255, 255, 255);
+  --white-50: rgba(255, 255, 255, 0.5);
+  --black-60: rgba(0, 0, 0, 0.6);
+  --black-10: rgba(0, 0, 0, 0.1);
+  --black-6: rgba(0, 0, 0, 0.06);
+  --grey1: #f5f5f5;
+  --grey2: #e0e0e0;
+  --grey5: #707070;
+
+  //Colors/official
+  /* Colors/official
+     ===
+     Our design system supports only ONE color. From this color we compute derivative in
+     plain css (@see https://www.smashingmagazine.com/2022/06/simplify-color-palette-css-color-mix/). 
+
+     primary-dark: the primary color mixed with some black. 
+     primary-10: white with 18% of primary coor
+
+     NB: We use --on-primary to define the color to be used on the primary color (for contrast purpose).
+     NBB: --primary is defined from the template at RENDER time. Choose this color from your decidim admin panel.
+  **/
+  --primary: #0476d9;
+  --primary-dark: color-mix(in srgb, var(--primary), black 10%);
+  --primary-10: color-mix(in srgb, var(--primary), white 85%);
+  --on-primary: var(--white);
+  /** the design system supports only one color. **/
+  --secondary: var(--primary);
+  --secondary-10: var(--primary-10);
+  --on-secondary: var(--on-primary);
+
+  //Colors/status
+  --green: var(--success);
+  --yellow: var(--warning);
+  --yellow-dark: color-mix(in srgb, var(--yellow), black 10%);
+  --red: var(--alert);
+  --red-dark: color-mix(in srgb, var(--red), black 10%);
+
+  //Colors/text colors
+  --emphasis-high: #000000f0;
+  --emphasis-med: #000000db;
+  --emphasis-low: #000000ad;
+  --emphasis-lowest: #0000008f;
+
+  //Miscellaneous
+  --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --card-shadow: 0px 6px 16px rgba(0, 0, 0, 0.05);
+  --card-corner-radius: 8px;
+  --divider-border: 1px solid rgba(0, 0, 0, 0.06);
+
+  //Typography
+  --font-family: "Inter";
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+}

data/app/packs/stylesheets/decidim/theme/atoms/Buttons/_Generic.scss

@@ -0,0 +1,98 @@
+.btn {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 48px;
+  cursor: pointer;
+  text-decoration: none !important;
+  &:hover,
+  &:focus {
+    text-decoration: none !important;
+    cursor: pointer;
+  }
+  &:has(svg),
+  &.js--withicon {
+    gap: rem-calc(8px);
+  }
+}
+
+.btn--small {
+  align-items: center;
+  padding: 12px 16px;
+
+  height: 34px;
+}
+
+.btn--small .btn--withicon,
+.button.js--withicon {
+  gap: 4px;
+}
+
+.btn--medium {
+  padding: 16px 24px;
+
+  height: 44px;
+}
+
+.btn--large {
+  padding: 20px 80px;
+  gap: 8px;
+
+  height: 53px;
+}
+
+.btn--primary {
+  background-color: var(--primary);
+  color: var(--on-primary) !important;
+  border: unset;
+
+  &:hover,
+  &:focus {
+    background-color: var(--primary-dark);
+    color: var(--on-primary) !important;
+  }
+}
+
+.btn--danger {
+  background-color: var(--red);
+  color: white;
+  &:hover {
+    background-color: var(--red-dark);
+  }
+}
+
+.btn--warning {
+  background-color: var(--yellow);
+  color: var(--emphasis-high);
+  &:hover {
+    background-color: var(--yellow-dark);
+  }
+}
+
+.btn--disabled {
+  background-color: transparent;
+  color: var(--emphasis-lowest) !important;
+  &:hover,
+  &.hover,
+  &.focus,
+  &:focus {
+    background-color: var(--black-6);
+    color: var(--emphasis-lowest) !important;
+    cursor: pointer;
+  }
+}
+
+.btn--secondary {
+  background-color: transparent;
+  color: var(--primary) !important;
+  border: var(--primary) solid 1px;
+
+  &:hover,
+  &:focus {
+    background-color: var(--primary-10) !important;
+    color: var(--primary) !important;
+    cursor: pointer;
+  }
+}

data/app/packs/stylesheets/decidim/theme/atoms/Buttons/_Misc.scss

@@ -0,0 +1,115 @@
+.icon-button {
+  background: var(--white);
+  color: var(--primary);
+  border: var(--primary) solid 1px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0px;
+  gap: 10px;
+
+  width: 29px;
+  height: 29px;
+
+  &:hover {
+    background: var(--primary);
+    color: var(--on-primary) !important;
+  }
+}
+
+.download-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 2px;
+  gap: 10px;
+
+  width: 28px;
+  height: 28px;
+
+  color: var(--emphasis-lowest);
+  &:hover {
+    color: var(--primary);
+  }
+}
+
+.register > .Body-4-medium-caps {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px;
+  gap: 4px;
+  color: var(--primary);
+
+  &:after {
+    content: ">";
+    font-weight: var(--font-weight-bold);
+    font-size: 1.3em;
+    vertical-align: middle;
+  }
+}
+
+.follow-duo-button {
+  background: var(--on-primary);
+  color: var(--primary) !important;
+  border: var(--primary) solid 1px;
+
+  padding: 10px 16px;
+  gap: 8px;
+  height: 30px;
+
+  &:hover,
+  &:focus {
+    background: var(--primary) !important;
+    color: var(--on-primary) !important;
+  }
+}
+
+.highlighted-button {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 14px 32px;
+  gap: 4px;
+
+  width: 218px;
+  height: 60px;
+
+  background: var(--primary);
+  border-radius: 4px;
+
+  &:hover {
+    background: var(--primary-dark);
+  }
+}
+
+.chip {
+  display: flex;
+  @extend .body-5;
+  color: var(--secondary);
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 6px 8px;
+  gap: 10px;
+
+  height: 22px;
+
+  border: 1px solid var(--grey1);
+
+  &:hover {
+    color: var(--secondary);
+    background: var(--grey1);
+  }
+}
+
+.link--go-back {
+  @extend .body-4;
+  @extend .body-4-link;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}

data/app/packs/stylesheets/decidim/theme/atoms/Buttons/_Navigation.scss

@@ -0,0 +1,83 @@
+.btn--nav {
+  flex-direction: column;
+  background: var(--white);
+  color: var(--emphasis-lowest);
+  padding: 16px 29px;
+
+  border-radius: 8px;
+
+  &:hover,
+  &:focus {
+    background: var(--grey);
+  }
+
+  &active {
+    flex-direction: column;
+    background: var(--primary-10);
+    color: var(--primary);
+
+    border-radius: 8px;
+
+    &:hover,
+    &:focus {
+      background: var(--primary-10);
+    }
+  }
+}
+
+.btn--nav-more {
+  i:first-child {
+    margin-left: 0.3rem;
+  }
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center !important;
+  background: var(--primary-10);
+  color: var(--primary);
+  height: 24px;
+
+  padding: 4px 16px;
+  border-radius: 8px;
+
+  &:hover,
+  &:focus {
+    background: var(--primary-10);
+    color: var(--primary);
+  }
+
+  &--active {
+    background: var(--on-primary);
+    color: var(--primary);
+
+    &:hover,
+    &:focus {
+      background: var(--on-primary);
+      color: var(--primary);
+    }
+  }
+}
+
+.btn--sub-nav {
+  flex-direction: column;
+  background: var(--white);
+  color: var(--primary);
+  padding: 16.5px 10px;
+
+  border-radius: 8px;
+
+  &:hover,
+  &:focus {
+    background: var(--primary-10);
+  }
+
+  &:after {
+    display: block;
+    position: absolute;
+    top: -4px;
+    content: " ";
+    height: 4px;
+    width: 100%;
+
+    background: var(--primary);
+  }
+}

data/app/packs/stylesheets/decidim/theme/atoms/Typography/_Body.scss

@@ -0,0 +1,88 @@
+/* Body/Body-1 */
+.body-1 {
+  @include typography-body-common;
+  &, & a {
+    font-size: 23px;
+  }
+  line-height: 120%;
+
+  @include typography-semibold-modifiers;
+  @include typography-underline-modifiers;
+  @include typography-nocaps-modifiers;
+}
+
+/* Body/Body-2 */
+.body-2 {
+  @include typography-body-common;
+  &, & a {
+    font-size: 20px;
+  }
+  line-height: 120%;
+
+  @include typography-medium-modifiers;
+  @include typography-semibold-modifiers;
+  @include typography-underline-modifiers;
+  @include typography-nocaps-modifiers;
+}
+
+/* Body/Body-3 */
+.body-3 {
+  @include typography-body-common;
+  &, & a {
+    font-size: 18px;
+  }
+
+  line-height: 130%;
+
+  @include typography-medium-modifiers;
+  @include typography-underline-modifiers;
+  @include typography-caps-modifiers;
+  @include typography-nocaps-modifiers;
+}
+
+/* Body/Body-4 */
+.body-4 {
+  @include typography-body-common;
+  &, & a {
+    font-size: 16px;
+  }
+  line-height: 130% !important;
+
+  @include typography-medium-modifiers;
+  @include typography-semibold-modifiers;
+  @include typography-bold-modifiers;
+  @include typography-caps-modifiers;
+  @include typography-nocaps-modifiers;
+}
+
+/* Body/Body-5 */
+.body-5 {
+  @include typography-body-common;
+  &, & a {
+    font-size: 14px;
+  }
+
+  line-height: 130%;
+
+  @include typography-medium-modifiers;
+  @include typography-semibold-modifiers;
+  @include typography-bold-modifiers;
+  @include typography-underline-modifiers;
+  @include typography-caps-modifiers;
+  @include typography-nocaps-modifiers;
+  @include typography-italic-modifiers;
+}
+
+/* Body/Body-6 */
+.body-6 {
+  @include typography-body-common;
+  &, & a {
+    font-size: 11px;
+  }
+  line-height: 130%;
+
+  @include typography-semibold-modifiers;
+  @include typography-underline-modifiers;
+  @include typography-caps-modifiers;
+  @include typography-nocaps-modifiers;
+}

data/app/packs/stylesheets/decidim/theme/atoms/Typography/_Headline.scss

@@ -0,0 +1,98 @@
+/* Headline/Heading-1 */
+.heading-1 {
+  @include typography-headline-common;
+  &, & a {
+    font-size: 66px !important;
+  }
+  @include breakpoint(small only) {
+    &, & a {
+      font-size: 48px !important;
+      word-break: break-word;
+    }
+  }
+
+  @include typography-bold-modifiers;
+}
+
+/* Headline/Heading-2 */
+.heading-2 {
+  @include typography-headline-common;
+  font-size: 48px !important;
+  @include breakpoint(small only) {
+    font-size: 48px !important;
+  }
+  word-break: break-word;
+
+  @include typography-bold-modifiers;
+}
+
+/* Headline/Heading-3 */
+.heading-3 {
+  @include typography-headline-common;
+  &, & a {
+    font-size: 28px !important;
+  }
+
+  @include breakpoint(small only) {
+    &, & a {
+      font-size: 28px !important;
+      word-break: break-word;
+    }
+  }
+
+  @include typography-bold-modifiers;
+  @include typography-underline-modifiers;
+
+  @include typography-link-modifiers;
+}
+
+/* Headline/Heading-4 */
+.heading-4 {
+  @include typography-headline-common;
+  &, & a {
+    font-size: 23px !important;
+  }
+  @include breakpoint(small only) {
+    &, & a {
+      font-size: 23px !important;
+      word-break: break-word;
+    }
+  }
+  @include typography-bold-modifiers;
+  @include typography-underline-modifiers;
+
+  @include typography-link-modifiers;
+}
+
+.heading-5 {
+  @include typography-headline-common;
+  &, & a {
+    font-size: 20px !important;
+  }
+  @include breakpoint(small only) {
+    &, & a {
+      font-size: 20px !important;
+      word-break: break-word;
+    }
+  }
+  @include typography-bold-modifiers;
+  @include typography-underline-modifiers;
+
+  @include typography-link-modifiers;
+}
+.heading-6 {
+  @include typography-headline-common;
+  &, & a {
+    font-size: 18px !important;
+  }
+  @include breakpoint(small only) {
+    &, & a {
+      font-size: 18px !important;
+      word-break: break-word;
+    }
+  }
+  @include typography-bold-modifiers;
+  @include typography-underline-modifiers;
+
+  @include typography-link-modifiers;
+}

data/app/packs/stylesheets/decidim/theme/atoms/Typography/_mixins.scss

@@ -0,0 +1,109 @@
+@mixin typography-medium-modifiers {
+  &-medium {
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+@mixin typography-semibold-modifiers {
+  &-semibold {
+    font-weight: var(--font-weight-semibold);
+  }
+}
+
+@mixin typography-bold-modifiers {
+  &-bold {
+    font-weight: var(--font-weight-bold);
+  }
+}
+
+@mixin typography-caps-modifiers {
+  &-caps {
+    text-transform: uppercase;
+  }
+}
+@mixin typography-nocaps-modifiers {
+  &-nocaps {
+    text-transform: initial;
+  }
+}
+
+@mixin typography-italic-modifiers {
+  &-italic {
+    font-style: italic;
+  }
+}
+
+@mixin typography-underline-modifiers {
+  &-underline {
+    text-decoration: underline;
+  }
+}
+
+@mixin filters-area {
+  .card > .filters__section {
+    display: none;
+  }
+  .input-group-field {
+    height: auto;
+  }
+  .mini-title {
+    margin-bottom: 0.5rem;
+  }
+  .filters__section label {
+    @extend .body-5;
+    color: var(--emphasis-high);
+  }
+  .filters__section label[data-global-checkbox],
+  .filters__section--general label[data-global-checkbox] {
+    font-weight: 600;
+    @extend .body-5-semibold;
+    color: var(--emphasis-high);
+  }
+  .card.card--secondary {
+    background: var(--white);
+    border-color: var(--grey2);
+    border-width: 1px;
+    border-style: solid;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    .mini-title {
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
+@mixin typography-link-modifiers {
+  &-link {
+    cursor: pointer;
+    color: var(--primary) !important;
+    text-align: left;
+
+    &:hover {
+      color: var(--primary) !important;
+      text-decoration: underline !important;
+      text-decoration-skip-ink: auto;
+    }
+
+    &:focus {
+      color: var(--primary) !important;
+      text-decoration: underline !important;
+      outline: 0 none transparent;
+      outline-offset: 0px;
+    }
+  }
+}
+
+@mixin typography-body-common {
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-regular);
+
+  @include typography-link-modifiers;
+}
+
+@mixin typography-headline-common {
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-regular);
+  line-height: 120%;
+
+  @include typography-link-modifiers;
+}

data/app/packs/stylesheets/decidim/theme/email.scss

@@ -0,0 +1,41 @@
+@import "./theme_settings";
+@import "entrypoints/decidim_email.scss";
+@media only screen{
+    html{
+        background: #e8e8e8 !important;
+    }
+}
+table.body {
+    background-color:  #e8e8e8 !important;
+}
+table.body th.decidim-bar,
+table.body td.decidim-bar {
+    img {
+        height: 50px;
+        margin: 0 auto;
+    }
+    padding: 10px 0;
+    background-color: #f5f5f5 !important;
+}
+
+.row.content {
+    padding-bottom: 20px;
+}
+th.cityhall-bar {
+    background-color: #f5f5f5 !important;
+    text-align: center !important; 
+}
+table.container.main {
+    background-color: white !important;
+}
+.decidim-logo a{
+    color: black !important;
+    text-decoration: underline;
+}
+.custom-button{
+    border-radius: 48px!important;
+    padding: 16px 24px!important;
+    background-color: #f5f5f5 !important;
+    color: black !important;
+    font-size: 16px;
+}