@baloise/ds-styles 0.0.5-nightly.e56f740

package/src/core/table.sass

@@ -0,0 +1,134 @@
+.table
+  @extend %bottomSpacing
+  background-color: var(--bal-table-background-color)
+  color: var(--bal-table-color)
+  td,
+  th
+    border: var(--bal-table-cell-border)
+    border-width: var(--bal-table-cell-border-width)
+    padding: var(--bal-table-cell-padding)
+    vertical-align: middle
+    // Modifiers
+    &.is-narrow
+      white-space: nowrap
+      width: 1%
+    &.is-selected
+      background-color: var(--bal-table-row-background-color-active)
+      color: var(--bal-table-row-color-active)
+      a,
+      strong
+        color: currentColor
+  th
+    color: var(--bal-table-cell-heading-color)
+    &:not([align])
+      text-align: inherit
+  tr
+    &.is-selected
+      background-color: var(--bal-table-row-background-color-active)
+      color: var(--bal-table-row-color-active)
+      a,
+      strong
+        color: currentColor
+      td,
+      th
+        border-color: var(--bal-table-row-color-active)
+        color: currentColor
+  thead
+    background-color: var(--bal-table-head-background-color)
+    td,
+    th
+      border-width: var(--bal-table-head-cell-border-width)
+      color: var(--bal-table-head-cell-color)
+  tfoot
+    background-color: var(--bal-table-foot-background-color)
+    td,
+    th
+      border-width: var(--bal-table-foot-cell-border-width)
+      color: var(--bal-table-foot-cell-color)
+  tbody
+    background-color: var(--bal-table-body-background-color)
+    tr
+      &:last-child
+        td,
+        th
+          border-bottom-width: 0
+  // Modifiers
+  &.is-bordered
+    th
+      border-top-width: 1px
+      border-left-width: 1px
+      border-right-width: 1px
+      border-top-color: var(--bal-table-cell-border-color)
+      border-left-color: var(--bal-table-cell-border-color)
+      border-right-color: var(--bal-table-cell-border-color)
+    td
+      border-width: 1px
+    tr
+      &:last-child
+        td
+          border-bottom-width: 1px
+  &.is-fullwidth
+    width: 100%
+  &.is-hoverable
+    tbody
+      tr:not(.is-selected)
+        &:hover
+          background-color: var(--bal-table-row-background-color-hover)
+    &.is-striped
+      tbody
+        tr:not(.is-selected)
+          &:hover
+            background-color: var(--bal-table-row-background-color-hover)
+            &:nth-child(even)
+              background-color: var(--bal-table-striped-row-even-background-color-hover)
+  &.is-narrow
+    td,
+    th
+      padding: 0.25em 0.5em
+  &.is-striped
+    tbody
+      tr:not(.is-selected)
+        &:nth-child(even)
+          background-color: var(--bal-table-striped-row-even-background-color)
+
+.table-container
+  @extend %bottomSpacing
+  +overflow-touch
+  overflow: auto
+  overflow-y: hidden
+  max-width: 100%
+
+table.table
+  display: table !important
+  border-spacing: 0
+  margin: 0
+  thead
+    tr
+      border-top: 0
+    th
+      border-color: var(--bal-table-head-cell-border-color)
+      border-bottom-width: 2px
+  th:not([align])
+    text-align: left
+  td,
+  th
+    font-size: var(--bal-table-head-font-size)
+    font-family: var(--bal-table-head-font-family)
+    vertical-align: middle
+    color: var(--bal-table-color)
+    text-align: left
+    .bal-checkbox
+      padding: 0
+      margin-top: 1px
+  td
+    color: var(--bal-table-color)
+    hyphens: auto
+  td.has-buttons
+    padding: 2px
+    .bal-button
+      margin-right: 0.25rem
+      &:last-child
+        margin-right: 0px
+    .buttons
+      justify-content: flex-end
+      padding: 3px

package/src/core/typography.sass

@@ -0,0 +1,33 @@
+.title,
+.subtitle
+  hyphens: auto
+  word-break: break-word
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  font-size: var(--bal-text-size-xxx-large)
+  line-height: var(--bal-line-height-xxx-large)
+  +tablet
+    font-size: var(--bal-text-size-xxx-large-tablet)
+    line-height: var(--bal-line-height-tablet-xxx-large)
+  +desktop
+    font-size: var(--bal-text-size-xxx-large-desktop)
+    line-height: var(--bal-line-height-desktop-xxx-large)
+  em,
+  span
+    font-weight: inherit
+  strong
+    font-weight: var(--bal-font-weight-bold)
+  &:not(:last-child)
+    margin-bottom: var(--bal-space-x-small)
+    +tablet
+      margin-bottom: var(--bal-space-x-small-tablet)
+    +desktop
+    margin-bottom: var(--bal-space-x-small-desktop)
+
+.title
+  font-family: var(--bal-title-font-family)
+  font-weight: var(--bal-title-font-weight)
+
+.subtitle
+  font-family: var(--bal-subtitle-font-family)
+  font-weight: var(--bal-subtitle-font-weight)

package/src/core/vars/_all.sass

@@ -0,0 +1,7 @@
+@import './structure.vars'
+@import './typography.vars'
+@import './link.vars'
+@import './button.vars'
+@import './form.vars'
+@import './list.vars'
+@import './table.vars'

package/src/core/vars/button.vars.sass

@@ -0,0 +1,282 @@
+/**
+ * @prop --bal-button-font-size: TBD
+ * @prop --bal-button-line-height: TBD
+ * @prop --bal-button-font-family: TBD
+ * @prop --bal-button-font-weight: TBD
+ * @prop --bal-button-radius: TBD
+ * @prop --bal-button-border-style: TBD
+ * @prop --bal-button-border-width: TBD
+ * @prop --bal-button-border-color: TBD
+ * @prop --bal-button-border-color-hover: TBD
+ * @prop --bal-button-border-color-active: TBD
+ * @prop --bal-button-color: TBD
+ * @prop --bal-button-color-hover: TBD
+ * @prop --bal-button-color-active: TBD
+ * @prop --bal-button-background: TBD
+ * @prop --bal-button-background-hover: TBD
+ * @prop --bal-button-background-active: TBD
+ * @prop --bal-button-small-font-size: TBD
+ * @prop --bal-button-primary-color: TBD
+ * @prop --bal-button-primary-color-hover: TBD
+ * @prop --bal-button-primary-color-active: TBD
+ * @prop --bal-button-primary-border-color: TBD
+ * @prop --bal-button-primary-border-color-hover: TBD
+ * @prop --bal-button-primary-border-color-active: TBD
+ * @prop --bal-button-primary-background: TBD
+ * @prop --bal-button-primary-background-hover: TBD
+ * @prop --bal-button-primary-background-active: TBD
+ * @prop --bal-button-text-border-color-hover: TBD
+ * @prop --bal-button-text-border-color-active: TBD
+ * @prop --bal-button-text-background-hover: TBD
+ * @prop --bal-button-text-background-active: TBD
+ * @prop --bal-button-light-color: TBD
+ * @prop --bal-button-light-color-hover: TBD
+ * @prop --bal-button-light-color-active: TBD
+ * @prop --bal-button-light-border-color: TBD
+ * @prop --bal-button-light-border-color-hover: TBD
+ * @prop --bal-button-light-border-color-active: TBD
+ * @prop --bal-button-light-background: TBD
+ * @prop --bal-button-light-background-hover: TBD
+ * @prop --bal-button-light-background-active: TBD
+ * @prop --bal-button-success-color: TBD
+ * @prop --bal-button-success-color-hover: TBD
+ * @prop --bal-button-success-color-active: TBD
+ * @prop --bal-button-success-border-color: TBD
+ * @prop --bal-button-success-border-color-hover: TBD
+ * @prop --bal-button-success-border-color-active: TBD
+ * @prop --bal-button-success-background: TBD
+ * @prop --bal-button-success-background-hover: TBD
+ * @prop --bal-button-success-background-active: TBD
+ * @prop --bal-button-warning-color: TBD
+ * @prop --bal-button-warning-color-hover: TBD
+ * @prop --bal-button-warning-color-active: TBD
+ * @prop --bal-button-warning-border-color: TBD
+ * @prop --bal-button-warning-border-color-hover: TBD
+ * @prop --bal-button-warning-border-color-active: TBD
+ * @prop --bal-button-warning-background: TBD
+ * @prop --bal-button-warning-background-hover: TBD
+ * @prop --bal-button-warning-background-active: TBD
+ * @prop --bal-button-danger-color: TBD
+ * @prop --bal-button-danger-color-hover: TBD
+ * @prop --bal-button-danger-color-active: TBD
+ * @prop --bal-button-danger-border-color: TBD
+ * @prop --bal-button-danger-border-color-hover: TBD
+ * @prop --bal-button-danger-border-color-active: TBD
+ * @prop --bal-button-danger-background: TBD
+ * @prop --bal-button-danger-background-hover: TBD
+ * @prop --bal-button-danger-background-active: TBD
+ * @prop --bal-button-disablde-color: TBD
+ * @prop --bal-button-disablde-border-color: TBD
+ * @prop --bal-button-disablde-background: TBD
+ * @prop --bal-button-inverted-color: TBD
+ * @prop --bal-button-inverted-color-hover: TBD
+ * @prop --bal-button-inverted-color-active: TBD
+ * @prop --bal-button-inverted-border-color: TBD
+ * @prop --bal-button-inverted-border-color-hover: TBD
+ * @prop --bal-button-inverted-border-color-active: TBD
+ * @prop --bal-button-inverted-background: TBD
+ * @prop --bal-button-inverted-background-hover: TBD
+ * @prop --bal-button-inverted-background-active: TBD
+ * @prop --bal-button-inverted-primary-color: TBD
+ * @prop --bal-button-inverted-primary-color-hover: TBD
+ * @prop --bal-button-inverted-primary-color-active: TBD
+ * @prop --bal-button-inverted-primary-border-color: TBD
+ * @prop --bal-button-inverted-primary-border-color-hover: TBD
+ * @prop --bal-button-inverted-primary-border-color-active: TBD
+ * @prop --bal-button-inverted-primary-background: TBD
+ * @prop --bal-button-inverted-primary-background-hover: TBD
+ * @prop --bal-button-inverted-primary-background-active: TBD
+ * @prop --bal-button-inverted-text-color: TBD
+ * @prop --bal-button-inverted-text-color-hover: TBD
+ * @prop --bal-button-inverted-text-color-active: TBD
+ * @prop --bal-button-inverted-text-border-color: TBD
+ * @prop --bal-button-inverted-text-border-color-hover: TBD
+ * @prop --bal-button-inverted-text-border-color-active: TBD
+ * @prop --bal-button-inverted-text-background: TBD
+ * @prop --bal-button-inverted-text-background-hover: TBD
+ * @prop --bal-button-inverted-text-background-active: TBD
+ * @prop --bal-button-inverted-light-color: TBD
+ * @prop --bal-button-inverted-light-color-hover: TBD
+ * @prop --bal-button-inverted-light-color-active: TBD
+ * @prop --bal-button-inverted-light-border-color: TBD
+ * @prop --bal-button-inverted-light-border-color-hover: TBD
+ * @prop --bal-button-inverted-light-border-color-active: TBD
+ * @prop --bal-button-inverted-light-background: TBD
+ * @prop --bal-button-inverted-light-background-hover: TBD
+ * @prop --bal-button-inverted-light-background-active: TBD
+ */
+
+:root
+  --bal-button-font-size: var(--bal-text-size-normal)
+  --bal-button-line-height: var(--bal-line-height-normal)
+  --bal-button-font-family: var(--bal-font-family-title)
+  --bal-button-font-weight: var(--bal-font-weight-bold)
+  --bal-button-radius: var(--bal-radius-normal)
+  --bal-button-border-style: solid
+  --bal-button-border-width: var(--bal-border-width-normal)
+  --bal-button-border-color: var(--bal-color-border-primary)
+  --bal-button-border-color-hover: var(--bal-color-border-primary-hovered)
+  --bal-button-border-color-active: var(--bal-color-border-primary-pressed)
+  --bal-button-color: var(--bal-color-text-primary)
+  --bal-button-color-hover: var(--bal-color-text-primary-hovered)
+  --bal-button-color-active: var(--bal-color-text-primary-pressed)
+  --bal-button-background: transparent
+  --bal-button-background-hover: var(--bal-color-light-blue)
+  --bal-button-background-active: var(--bal-color-light-blue)
+  //
+  // small button
+  --bal-button-small-font-size: var(--bal-text-size-small)
+  //
+  // primary
+  --bal-button-primary-color: var(--bal-color-text-white)
+  --bal-button-primary-color-hover: var(--bal-color-text-white)
+  --bal-button-primary-color-active: var(--bal-color-text-white)
+  --bal-button-primary-border-color: var(--bal-color-border-primary)
+  --bal-button-primary-border-color-hover: var(--bal-color-border-primary-hovered)
+  --bal-button-primary-border-color-active: var(--bal-color-border-primary-pressed)
+  --bal-button-primary-background: var(--bal-color-primary)
+  --bal-button-primary-background-hover: var(--bal-color-light-blue-5)
+  --bal-button-primary-background-active: var(--bal-color-primary-6)
+  //
+  // text
+  --bal-button-text-border-color-hover: var(--bal-color-light-blue)
+  --bal-button-text-border-color-active: var(--bal-color-light-blue)
+  --bal-button-text-background-hover: var(--bal-color-light-blue)
+  --bal-button-text-background-active: var(--bal-color-light-blue)
+  //
+  // light
+  --bal-button-light-color: var(--bal-color-text-primary)
+  --bal-button-light-color-hover: var(--bal-color-text-primary)
+  --bal-button-light-color-active: var(--bal-color-text-primary)
+  --bal-button-light-border-color: var(--bal-color-grey-2)
+  --bal-button-light-border-color-hover: var(--bal-color-light-blue-1)
+  --bal-button-light-border-color-active: var(--bal-color-light-blue-2)
+  --bal-button-light-background: var(--bal-color-grey-2)
+  --bal-button-light-background-hover: var(--bal-color-light-blue-1)
+  --bal-button-light-background-active: var(--bal-color-light-blue-2)
+  //
+  // tertiary-purple
+  --bal-button-tertiary-purple-color: var(--bal-color-text-primary)
+  --bal-button-tertiary-purple-color-hover: var(--bal-color-text-primary)
+  --bal-button-tertiary-purple-color-active: var(--bal-color-text-primary-pressed)
+  --bal-button-tertiary-purple-border-color: var(--bal-color-purple-1)
+  --bal-button-tertiary-purple-border-color-hover: var(--bal-color-purple-5)
+  --bal-button-tertiary-purple-border-color-active: var(--bal-color-purple-6)
+  --bal-button-tertiary-purple-background: var(--bal-color-purple-1)
+  --bal-button-tertiary-purple-background-hover: var(--bal-color-purple-1)
+  --bal-button-tertiary-purple-background-active: var(--bal-color-purple-1)
+  //
+  // tertiary-red
+  --bal-button-tertiary-red-color: var(--bal-color-text-primary)
+  --bal-button-tertiary-red-color-hover: var(--bal-color-text-primary)
+  --bal-button-tertiary-red-color-active: var(--bal-color-text-primary-pressed)
+  --bal-button-tertiary-red-border-color: var(--bal-color-red-1)
+  --bal-button-tertiary-red-border-color-hover: var(--bal-color-red-5)
+  --bal-button-tertiary-red-border-color-active: var(--bal-color-red-6)
+  --bal-button-tertiary-red-background: var(--bal-color-red-1)
+  --bal-button-tertiary-red-background-hover: var(--bal-color-red-1)
+  --bal-button-tertiary-red-background-active: var(--bal-color-red-1)
+  //
+  // tertiary-yellow
+  --bal-button-tertiary-yellow-color: var(--bal-color-text-primary)
+  --bal-button-tertiary-yellow-color-hover: var(--bal-color-text-primary)
+  --bal-button-tertiary-yellow-color-active: var(--bal-color-text-primary-pressed)
+  --bal-button-tertiary-yellow-border-color: var(--bal-color-yellow-1)
+  --bal-button-tertiary-yellow-border-color-hover: var(--bal-color-yellow-5)
+  --bal-button-tertiary-yellow-border-color-active: var(--bal-color-yellow-6)
+  --bal-button-tertiary-yellow-background: var(--bal-color-yellow-1)
+  --bal-button-tertiary-yellow-background-hover: var(--bal-color-yellow-1)
+  --bal-button-tertiary-yellow-background-active: var(--bal-color-yellow-1)
+  //
+  // tertiary-green
+  --bal-button-tertiary-green-color: var(--bal-color-text-primary)
+  --bal-button-tertiary-green-color-hover: var(--bal-color-text-primary)
+  --bal-button-tertiary-green-color-active: var(--bal-color-text-primary-pressed)
+  --bal-button-tertiary-green-border-color: var(--bal-color-green-1)
+  --bal-button-tertiary-green-border-color-hover: var(--bal-color-green-5)
+  --bal-button-tertiary-green-border-color-active: var(--bal-color-green-6)
+  --bal-button-tertiary-green-background: var(--bal-color-green-1)
+  --bal-button-tertiary-green-background-hover: var(--bal-color-green-1)
+  --bal-button-tertiary-green-background-active: var(--bal-color-green-1)
+  //
+  // success
+  --bal-button-success-color: var(--bal-color-text-primary)
+  --bal-button-success-color-hover: var(--bal-color-text-white)
+  --bal-button-success-color-active: var(--bal-color-text-white)
+  --bal-button-success-border-color: var(--bal-color-success-5)
+  --bal-button-success-border-color-hover: var(--bal-color-success-5)
+  --bal-button-success-border-color-active: var(--bal-color-success-6)
+  --bal-button-success-background: var(--bal-color-success-1)
+  --bal-button-success-background-hover: var(--bal-color-success-5)
+  --bal-button-success-background-active: var(--bal-color-success-6)
+  //
+  // warning
+  --bal-button-warning-color: var(--bal-color-text-primary)
+  --bal-button-warning-color-hover: var(--bal-color-text-primary)
+  --bal-button-warning-color-active: var(--bal-color-text-primary)
+  --bal-button-warning-border-color: var(--bal-color-warning-5)
+  --bal-button-warning-border-color-hover: var(--bal-color-warning-3)
+  --bal-button-warning-border-color-active: var(--bal-color-warning-4)
+  --bal-button-warning-background: var(--bal-color-warning-1)
+  --bal-button-warning-background-hover: var(--bal-color-warning-3)
+  --bal-button-warning-background-active: var(--bal-color-warning-4)
+  //
+  // danger
+  --bal-button-danger-color: var(--bal-color-text-primary)
+  --bal-button-danger-color-hover: var(--bal-color-text-white)
+  --bal-button-danger-color-active: var(--bal-color-text-white)
+  --bal-button-danger-border-color: var(--bal-color-danger-5)
+  --bal-button-danger-border-color-hover: var(--bal-color-danger-5)
+  --bal-button-danger-border-color-active: var(--bal-color-danger-6)
+  --bal-button-danger-background: var(--bal-color-danger-1)
+  --bal-button-danger-background-hover: var(--bal-color-danger-5)
+  --bal-button-danger-background-active: var(--bal-color-danger-6)
+  //
+  // disablde
+  --bal-button-disablde-color: var(--bal-color-text-grey)
+  --bal-button-disablde-border-color: var(--bal-color-grey)
+  --bal-button-disablde-background: var(--bal-color-grey)
+  //
+  // inverted
+  --bal-button-inverted-color: var(--bal-color-text-white)
+  --bal-button-inverted-color-hover: var(--bal-color-text-white)
+  --bal-button-inverted-color-active: var(--bal-color-text-white)
+  --bal-button-inverted-border-color: var(--bal-color-border-inverted)
+  --bal-button-inverted-border-color-hover: var(--bal-color-light-blue-3)
+  --bal-button-inverted-border-color-active: var(--bal-color-light-blue-5)
+  --bal-button-inverted-background: transparent
+  --bal-button-inverted-background-hover: var(--bal-color-primary-3)
+  --bal-button-inverted-background-active: var(--bal-color-primary-3)
+  //
+  // inverted primary
+  --bal-button-inverted-primary-color: var(--bal-color-text-primary)
+  --bal-button-inverted-primary-color-hover: var(--bal-color-text-primary)
+  --bal-button-inverted-primary-color-active: var(--bal-color-text-white)
+  --bal-button-inverted-primary-border-color: var(--bal-color-border-inverted)
+  --bal-button-inverted-primary-border-color-hover: var(--bal-color-light-blue-2)
+  --bal-button-inverted-primary-border-color-active: var(--bal-color-light-blue-5)
+  --bal-button-inverted-primary-background: var(--bal-color-white)
+  --bal-button-inverted-primary-background-hover: var(--bal-color-light-blue-2)
+  --bal-button-inverted-primary-background-active: var(--bal-color-light-blue-5)
+  //
+  // inverted text
+  --bal-button-inverted-text-color: var(--bal-color-text-white)
+  --bal-button-inverted-text-color-hover: var(--bal-color-light-blue-2)
+  --bal-button-inverted-text-color-active: var(--bal-color-info-3)
+  --bal-button-inverted-text-border-color: transparent
+  --bal-button-inverted-text-border-color-hover: transparent
+  --bal-button-inverted-text-border-color-active: transparent
+  --bal-button-inverted-text-background: transparent
+  --bal-button-inverted-text-background-hover: transparent
+  --bal-button-inverted-text-background-active: transparent
+  //
+  // inverted light
+  --bal-button-inverted-light-color: var(--bal-color-text-white)
+  --bal-button-inverted-light-color-hover: var(--bal-color-text-primary)
+  --bal-button-inverted-light-color-active: var(--bal-color-text-primary)
+  --bal-button-inverted-light-border-color: var(--bal-color-primary-4)
+  --bal-button-inverted-light-border-color-hover: var(--bal-color-light-blue-2)
+  --bal-button-inverted-light-border-color-active: var(--bal-color-white)
+  --bal-button-inverted-light-background: var(--bal-color-primary-4)
+  --bal-button-inverted-light-background-hover: var(--bal-color-light-blue-2)
+  --bal-button-inverted-light-background-active: var(--bal-color-white)

package/src/core/vars/form.vars.sass

@@ -0,0 +1,137 @@
+/**
+ * @prop --bal-form-field-control-font-size: TBD
+ * @prop --bal-form-field-control-font-family: TBD
+ * @prop --bal-form-field-control-color: TBD
+ * @prop --bal-form-field-control-placeholder-color: TBD
+ * @prop --bal-form-field-control-radius: TBD
+ * @prop --bal-form-field-control-background: TBD
+ * @prop --bal-form-field-control-background-hover: TBD
+ * @prop --bal-form-field-control-background-active: TBD
+ * @prop --bal-form-field-control-border-width: TBD
+ * @prop --bal-form-field-control-border-style: TBD
+ * @prop --bal-form-field-control-border-color: TBD
+ * @prop --bal-form-field-control-border-color-hover: TBD
+ * @prop --bal-form-field-control-border-color-active: TBD
+ * @prop --bal-form-field-control-success-background: TBD
+ * @prop --bal-form-field-control-success-background-hover: TBD
+ * @prop --bal-form-field-control-success-background-active: TBD
+ * @prop --bal-form-field-control-success-border-color: TBD
+ * @prop --bal-form-field-control-success-border-color-hover: TBD
+ * @prop --bal-form-field-control-success-border-color-active: TBD
+ * @prop --bal-form-field-control-danger-background: TBD
+ * @prop --bal-form-field-control-danger-background-hover: TBD
+ * @prop --bal-form-field-control-danger-background-active: TBD
+ * @prop --bal-form-field-control-danger-border-color: TBD
+ * @prop --bal-form-field-control-danger-border-color-hover: TBD
+ * @prop --bal-form-field-control-danger-border-color-active: TBD
+ * @prop --bal-form-field-control-disabled-color: TBD
+ * @prop --bal-form-field-control-disabled-background: TBD
+ * @prop --bal-form-field-control-disabled-border-color: TBD
+ * @prop --bal-form-field-label-font-size: TBD
+ * @prop --bal-form-field-label-line-height: TBD
+ * @prop --bal-form-field-label-font-weight: TBD
+ * @prop --bal-form-field-label-font-family: TBD
+ * @prop --bal-form-field-label-margin-bottom: TBD
+ * @prop --bal-form-field-label-color-hover: TBD
+ * @prop --bal-form-field-label-color-active: TBD
+ * @prop --bal-form-field-label-success-color: TBD
+ * @prop --bal-form-field-label-danger-color: TBD
+ * @prop --bal-form-field-label-danger-color-hover: TBD
+ * @prop --bal-form-field-label-danger-color-active: TBD
+ * @prop --bal-form-field-label-disabled-color TBD
+ * @prop --bal-form-field-message-font-size: TBD
+ * @prop --bal-form-field-message-font-weight: TBD
+ * @prop --bal-form-field-message-color: TBD
+ * @prop --bal-form-field-message-color-hover: TBD
+ * @prop --bal-form-field-message-color-active: TBD
+ * @prop --bal-form-field-message-font-weight: TBD
+ * @prop --bal-form-field-message-success-color: TBD
+ * @prop --bal-form-field-message-danger-color: TBD
+ * @prop --bal-form-field-message-disabled-color: TBD
+ * @prop --bal-form-field-icon-color: TBD
+ * @prop --bal-form-field-icon-color-hover: TBD
+ * @prop --bal-form-field-icon-color-active: TBD
+ * @prop --bal-form-field-icon-success-color: TBD
+ * @prop --bal-form-field-icon-danger-color: TBD
+ * @prop --bal-form-field-icon-disabled-color: TBD
+ * @prop --bal-file-label-color: TBD
+ * @prop --bal-file-label-color-hover: TBD
+ * @prop --bal-file-label-color-active: TBD
+ * @prop --bal-file-border-style: TBD
+ * @prop --bal-file-label-disabled-color: TBD
+ */
+
+:root
+  //
+  // form control
+  --bal-form-field-control-font-size: var(--bal-text-size-normal)
+  --bal-form-field-control-font-family: var(--bal-font-family-text)
+  --bal-form-field-control-color: var(--bal-color-text-primary)
+  --bal-form-field-control-placeholder-color: var(--bal-color-text-primary-light)
+  --bal-form-field-control-radius: var(--bal-radius-normal)
+  --bal-form-field-control-background: var(--bal-color-white)
+  --bal-form-field-control-background-hover: var(--bal-color-grey-1)
+  --bal-form-field-control-background-active: var(--bal-color-grey-1)
+  --bal-form-field-control-border-width: var(--bal-border-width-normal)
+  --bal-form-field-control-border-style: solid
+  --bal-form-field-control-border-color: var(--bal-color-border)
+  --bal-form-field-control-border-color-hover: var(--bal-form-field-control-border-color)
+  --bal-form-field-control-border-color-active: var(--bal-color-border-primary)
+  // success
+  --bal-form-field-control-success-background: var(--bal-color-success-1)
+  --bal-form-field-control-success-background-hover: var(--bal-color-success-1)
+  --bal-form-field-control-success-background-active: var(--bal-color-success-1)
+  --bal-form-field-control-success-border-color: var(--bal-color-border-success)
+  --bal-form-field-control-success-border-color-hover: var(--bal-form-field-control-border-color)
+  --bal-form-field-control-success-border-color-active: var(--bal-color-border-primary)
+  // danger
+  --bal-form-field-control-danger-background: var(--bal-color-danger-1)
+  --bal-form-field-control-danger-background-hover: var(--bal-color-danger-1)
+  --bal-form-field-control-danger-background-active: var(--bal-color-danger-1)
+  --bal-form-field-control-danger-border-color: var(--bal-color-border-danger)
+  --bal-form-field-control-danger-border-color-hover: var(--bal-form-field-control-border-color)
+  --bal-form-field-control-danger-border-color-active: var(--bal-color-border-primary)
+  // disabled
+  --bal-form-field-control-disabled-color: var(--bal-color-text-grey-dark)
+  --bal-form-field-control-disabled-background: var(--bal-color-grey-2)
+  --bal-form-field-control-disabled-border-color: var(--bal-color-border-grey-dark)
+  //
+  // field label
+  --bal-form-field-label-font-size: var(--bal-text-size-small)
+  --bal-form-field-label-line-height: var(--bal-line-height-small)
+  --bal-form-field-label-font-weight: var(--bal-font-weight-bold)
+  --bal-form-field-label-font-family: var(--bal-font-family-text)
+  --bal-form-field-label-margin-bottom: 0.25rem
+  --bal-form-field-label-color-hover: var(--bal-link-color-hover)
+  --bal-form-field-label-color-active: var(--bal-link-color-active)
+  --bal-form-field-label-success-color: var(--bal-color-text-success)
+  --bal-form-field-label-danger-color: var(--bal-color-text-danger)
+  --bal-form-field-label-danger-color-hover: var(--bal-color-text-danger-hovered)
+  --bal-form-field-label-danger-color-active: var(--bal-color-text-danger-pressed)
+  --bal-form-field-label-disabled-color: var(--bal-color-text-grey)
+  //
+  // field message
+  --bal-form-field-message-font-size: var(--bal-text-size-x-small)
+  --bal-form-field-message-font-weight: var(--bal-font-weight-regular)
+  --bal-form-field-message-color: var(--bal-color-text-primary-light)
+  --bal-form-field-message-color-hover: var(--bal-link-color-hover)
+  --bal-form-field-message-color-active: var(--bal-link-color-active)
+  --bal-form-field-message-font-weight: var(--bal-font-weight-regular)
+  --bal-form-field-message-success-color: var(--bal-color-text-success)
+  --bal-form-field-message-danger-color: var(--bal-color-text-danger)
+  --bal-form-field-message-disabled-color: var(--bal-color-text-grey)
+  //
+  // field icon
+  --bal-form-field-icon-color: var(--bal-link-color)
+  --bal-form-field-icon-color-hover: var(--bal-link-color-hover)
+  --bal-form-field-icon-color-active: var(--bal-link-color-active)
+  --bal-form-field-icon-success-color: var(--bal-color-text-success)
+  --bal-form-field-icon-danger-color: var(--bal-color-text-danger)
+  --bal-form-field-icon-disabled-color: var(--bal-color-text-grey)
+  //
+  // file upload
+  --bal-file-label-color: var(--bal-link-color)
+  --bal-file-label-color-hover: var(--bal-link-color-hover)
+  --bal-file-label-color-active: var(--bal-link-color-active)
+  --bal-file-border-style: dashed
+  --bal-file-label-disabled-color: var(--bal-color-text-grey-dark)

package/src/core/vars/link.vars.sass

@@ -0,0 +1,36 @@
+/**
+ * @prop --bal-link-color: Default link color
+ * @prop --bal-link-color-hover: Link color on hover
+ * @prop --bal-link-color-active: Link color on pressed
+ * @prop --bal-link-font-weight: Default link font weight
+ * @prop --bal-link-radius: Default link border radius
+ * @prop --bal-link-text-decoration: Link text decoration
+ * @prop --bal-link-text-underline-offset: Link decoration underline-offset 0.25rem
+ * @prop --bal-link-text-decoration-thickness: Link decoration thickness 2px
+ * @prop --bal-link-inverted-color: Link color on dark background
+ * @prop --bal-link-inverted-color-hover: Link color on dark background when hovering
+ * @prop --bal-link-inverted-color-active: Link color on dark background when pressing
+ * @prop --bal-link-inverted-light-font-weight: Link font weight on dark background
+ * @prop --bal-link-inverted-light-text-decoration: Link text-decoration on dark background
+ */
+
+:root
+  --bal-link-color: var(--bal-color-text-primary)
+  --bal-link-color-hover: var(--bal-color-text-primary-hovered)
+  --bal-link-color-active: var(--bal-color-text-primary-pressed)
+  --bal-link-font-weight: var(--bal-font-weight-bold)
+  --bal-link-radius: var(--bal-radius-normal)
+  --bal-link-background: transparent
+  --bal-link-border-color: transparent
+  --bal-link-text-decoration: underline
+  --bal-link-text-underline-offset: 0.25rem
+  --bal-link-text-decoration-thickness: var(--bal-border-width-normal)
+  //
+  // inverted
+  --bal-link-inverted-color: var(--bal-color-text-inverted)
+  --bal-link-inverted-color-hover: var(--bal-color-text-inverted-hovered)
+  --bal-link-inverted-color-active: var(--bal-color-text-inverted-pressed)
+  //
+  // inverted light
+  --bal-link-inverted-light-font-weight: var(--bal-font-weight-regular)
+  --bal-link-inverted-light-text-decoration: none

package/src/core/vars/list.vars.sass

@@ -0,0 +1,20 @@
+/**
+ * @prop --bal-list-marker-color: Color of the list marker symbol
+ * @prop --bal-list-marker-inverted-color: Color of the list marker symbol on a dark background
+ * @prop --bal-list-bullet-radius: Radius of the custom bullet
+ * @prop --bal-list-bullet-background: Background color of the custom bullet
+ * @prop --bal-list-bullet-background-green: Green background color of the custom bullet
+ * @prop --bal-list-bullet-background-red: Red background color of the custom bullet
+ * @prop --bal-list-bullet-background-yellow: Yellow background color of the custom bullet
+ * @prop --bal-list-bullet-background-purple: Purple background color of the custom bullet
+ */
+
+:root
+  --bal-list-marker-color: var(--bal-color-primary)
+  --bal-list-marker-inverted-color: var(--bal-color-white)
+  --bal-list-bullet-radius: var(--bal-radius-rounded)
+  --bal-list-bullet-background: var(--bal-color-green-3)
+  --bal-list-bullet-background-green: var(--bal-color-green-3)
+  --bal-list-bullet-background-red: var(--bal-color-red-3)
+  --bal-list-bullet-background-yellow: var(--bal-color-yellow-3)
+  --bal-list-bullet-background-purple: var(--bal-color-purple-3)