@nulllogic/scssleon 1.0.1 → 1.0.2

package/scss/themes/_default.scss

@@ -0,0 +1,874 @@
+@use 'sass:map';
+@use "sass:string";
+
+// Main theme colors
+$theme: () !default;
+$updated-theme : () !default;
+
+$html-config: (
+  root: (
+    --font-family-default : string.unquote("system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"),
+    --font-family-monospace : string.unquote("ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"),
+  ),
+  html : (
+    body : (
+      margin: 0,
+      -webkit-text-size-adjust: 100%,
+      font-size : 1rem,
+      font-weight: normal,
+      line-height : 1,
+      font-family: var(global(--font-family-default)),
+      color: var(--color),
+      background: var(--background),
+      text-rendering: optimizelegibility,
+      -webkit-font-smoothing: antialiased,
+      colors: (
+        light : (
+          background: '#fff',
+          color: '#ccc',
+        ),
+        dark : (
+          background : rgba(18, 20, 23, 1),
+          color: '#ccc'
+        )
+      )
+    ),
+    a : (
+      text-decoration : underline,
+      color: var(--a-color),
+      colors: (
+        light : (
+          color: '#ccc',
+        ),
+        dark : (
+          color: '#ccc'
+        )
+      ),
+      subclasses : (
+        "&[target='_blank']" : (
+          subclasses : (
+            "&:after" : (
+              background: red,
+              display: inline-flex,
+              width: 12px,
+              height: 12px,
+              content : ''
+            )
+          ),
+        )
+      )
+    ),
+    ol: (
+      margin: 0,
+      padding: 0,
+      list-style-type: none,
+    ),
+    ul: (
+      margin: 0,
+      padding: 0,
+      list-style-type: none,
+    ),
+    dl: (
+      margin: 0,
+      padding: 0,
+      list-style-type: none,
+    ),
+    img : (
+      vertical-align: middle,
+      width: auto,
+      height: auto,
+      max-width: 100%,
+    ),
+    p : (
+      margin: 0
+    )
+  )
+);
+
+$updated-theme: map.deep-merge($updated-theme, $html-config);
+
+$content-config: (
+  content : (
+    h1 : (
+      font-size: 3.5rem,
+      line-height : inherit,
+      font-weight: 500,
+      margin: 0,
+      padding: 0 0 15px 0
+    ),
+    h2 : (
+      font-size: 2.8rem,
+      line-height : inherit,
+      font-weight: 500,
+      margin: 0,
+      padding: 0 0 15px 0
+    ),
+    h3 : (
+      font-size: 2.4rem,
+      line-height : inherit,
+      font-weight: 500,
+      margin: 0,
+      padding: 0 0 15px 0
+    ),
+    h4 : (
+      font-size: 2rem,
+      line-height : inherit,
+      font-weight: 500,
+      margin: 0,
+      padding: 0 0 15px 0
+    ),
+    h5 : (
+      font-size: 1.8rem,
+      line-height : inherit,
+      font-weight: 500,
+      margin: 0,
+      padding: 0 0 15px 0
+    ),
+    h6 : (
+      font-size: 1.625rem,
+      line-height : inherit,
+      font-weight: 500,
+      margin: 0,
+      padding: 0 0 15px 0
+    ),
+    p : (
+      margin: 0,
+      padding: 0 0 15px 0
+    ),
+    abbr: (
+      attributes : (
+        title : (
+        )
+      )
+    ),
+    address: (
+      margin: 0,
+      font-size: 1rem,
+      line-height: inherit,
+    ),
+    ol: (
+      margin-bottom: 15px,
+    ),
+    ul: (
+      margin-bottom: 15px,
+    ),
+    dl: (
+      margin-bottom: 15px,
+    ),
+    dt: (
+      font-weight: normal,
+    ),
+    dd: (
+      margin: 0 0 .5rem 0,
+      padding: 0
+    ),
+    b : (
+      font-weight: bold
+    ),
+    strong: (
+      font-weight: bold
+    ),
+    small: (
+      font-size: .825rem,
+    ),
+    mark: (
+      padding: .1875em
+    ),
+    sub: (
+      bottom: .25em
+    ),
+    sup : (
+      top: -.5em
+    ),
+    details: (
+      margin-bottom: 15px,
+    ),
+    pre: (
+      font-family: var(global(--font-family-monospace)),
+    ),
+    code: (
+      color: var(--color),
+      background: var(--background),
+      padding: 0 5px,
+      colors: (
+        light : (
+          background: '#fff',
+          color: '#ccc',
+        ),
+        dark : (
+          background : rgba(38,69,116,1),
+          color: '#fff'
+        )
+      )
+    ),
+    kbd: (
+    ),
+    figure: (
+      margin: 0 0 15px 0,
+    ),
+    img : (
+      margin: 0 0 15px 0,
+    ),
+    svg : (
+      vertical-align: middle
+    ),
+    output: (
+    ),
+    iframe: (
+      margin: 0 0 15px 0,
+    ),
+    embed : (
+      margin: 0 0 15px 0,
+    ),
+    object: (
+      margin: 0 0 15px 0,
+    ),
+    summary: (
+    ),
+    progress: (
+      vertical-align: baseline
+    ),
+    form : (
+    ),
+    label: (
+      display: inline-block
+    ),
+    input : (
+    ),
+    select : (
+      word-wrap: normal
+    ),
+    checkbox: (
+    ),
+    textarea : (
+    ),
+    fieldset: (
+    ),
+    legend: (
+    ),
+    caption: (
+    ),
+    table : (
+    ),
+    thead : (
+    ),
+    tbody : (
+    ),
+    tfoot : (
+    ),
+    tr : (
+    ),
+    td : (
+    ),
+    th : (
+    ),
+    hr : (
+      margin: 15px 0,
+      border: 0,
+      border-top-width: 1px,
+      border-top-style: solid,
+      border-top-color: var(--border-top-color),
+      colors: (
+        light: (
+          border-top-color: #ccc
+        ),
+        dark: (
+          border-top-color: #555
+        )
+      )
+    )
+  )
+);
+
+$updated-theme: map.deep-merge($updated-theme, $content-config);
+
+$components-config: (
+  components: (
+
+    alert: (
+
+      --border-radius: .25rem,
+      --padding: 1.25rem,
+
+      box-shadow: var(--shadow),
+      background: var(--background),
+
+      outline: 1px solid transparent,
+      position: relative,
+      display: flex,
+
+      colors: (
+        light : (
+          background: rgba(246, 246, 247, 1),
+          shadow: string.unquote("inset 0 0.0625rem 0 0 rgba(186, 191, 195, 1), inset 0 0 0 0.0625rem rgba(186, 191, 195, 1)"),
+        ),
+        dark : (
+          background: rgb(48, 56, 66),
+          border: 1px solid rgba(182, 199, 216, .35),
+          shadow: string.unquote("inset 0 0.0625rem 0 0 rgba(186, 191, 195, 1), inset 0 0 0 0.0625rem rgba(186, 191, 195, 1)"),
+        )
+      )
+
+    ),
+
+    accordion : (
+
+      --border-radius: .25rem,
+      --padding: 1.25rem,
+
+      position: relative,
+      width: 100%,
+
+      colors: (
+        light : (
+        ),
+        dark : (
+          border: 1px solid rgba(182, 199, 216, .35),
+          background: rgb(46, 56, 66),
+        )
+      )
+
+    ),
+
+    badge : (
+
+      --border-radius: .25rem,
+      --padding: .125rem .625rem,
+
+      font-size: .75rem,
+      line-height: 1rem,
+      font-weight: 500,
+
+      white-space: nowrap,
+      vertical-align: middle,
+      align-items: center,
+      display: inline-flex,
+
+      padding: var(--padding),
+      border-radius: var(--border-radius),
+      color: var(--color),
+      background: var(--background),
+      box-shadow: var(--box-shadow),
+      border: var(--border),
+
+      colors: (
+        light : (
+          color: #ccc,
+          box-shadow: none
+        ),
+        dark : (
+          color: #ccc,
+          background: rgb(40, 50, 60),
+          box-shadow: none,
+          border: 1px solid #ccc,
+        )
+      )
+    ),
+
+    breadcrumb : (
+      --padding: 0 0 0 5px,
+      list-style: none,
+      align-items: center,
+      display: flex,
+      flex-wrap: wrap,
+      padding: var(--padding),
+      margin: 0,
+      colors: (
+        light : (
+        ),
+        dark : (
+        )
+      ),
+      subclasses : (
+        ".item" : (
+          display: inline-flex,
+          subclasses : (
+            ".link" : (
+
+            )
+          )
+        )
+      )
+    ),
+
+    button : (
+      --border-radius: .25rem,
+      --box-shadow : (
+        inset 0 0 0 1px rgba(0, 0, 0, 0.05),
+        inset 0 1px 2px 0 rgba(78, 83, 90, 0.1)
+        //   inset -0.0625rem 0 0 #e3e3e3,
+        //   inset 0.0625rem 0 0 #e3e3e3,
+        //   inset 0 0.0625rem 0 #e3e3e3
+      ),
+      --padding: .5rem .75rem,
+
+      display: inline-flex,
+      align-items: center,
+      align-content: center,
+      white-space: nowrap,
+      user-select: none,
+      text-decoration: none,
+      cursor: pointer,
+
+      vertical-align: middle,
+      font-size: 1em,
+
+      padding: var(--padding),
+      border: var(--border),
+      background: var(--background),
+      color: var(--color),
+      border-radius: var(--border-radius),
+
+      // This one is required for button group use
+      position: relative,
+
+      transition: (
+        color .15s ease-in-out,
+        background-color .15s ease-in-out,
+        border-color .15s ease-in-out,
+        box-shadow .15s ease-in-out
+      ),
+
+      colors: (
+        light: (
+          color: #fff,
+          background: #fff
+        ),
+        dark: (
+
+          // Default
+          color: #fff,
+          background: rgb(48, 56, 66),
+          border: 1px solid rgba(240, 246, 252, .25),
+
+          // Hover state
+          hover-color: #fff,
+          hover-background: rgb(59, 68, 81),
+          hover-border: 1px solid rgba(229, 235, 240, .55),
+
+          // Disabled state
+          disabled-color: #484f58,
+          disabled-background: #21262d,
+          disabled-border: 1px solid rgba(240, 246, 252, 0.1),
+
+          // Active state
+          active-color: #fff,
+          active-background: rgb(39, 45, 53),
+          active-border: 1px solid rgba(240, 246, 252, .25),
+          active-shadow: string.unquote("-0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,0.122) inset,0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,0.122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26,26,26,0.2) inset")
+
+        )
+      ),
+
+      subclasses : (
+        "&:hover:not(.loading, [disabled], .btn-link)" : (
+          color: var(--hover-color),
+          background: var(--hover-background),
+          border: var(--hover-border),
+        ),
+        "&:active:not(.loading, [disabled], .btn-link)" : (
+          color: var(--active-color),
+          background: var(--active-background),
+          border: var(--active-border),
+          box-shadow: var(--active-shadow),
+        ),
+        "&.btn-link" : (
+          background: transparent,
+          border: none,
+          box-shadow: none,
+          subclasses: (
+            "&:hover": (
+              text-decoration: underline,
+            )
+          )
+        ),
+        "&.loading" : (
+          cursor: wait,
+        ),
+        "&.btn[disabled]" : (
+          cursor: not-allowed,
+          color: var(--disabled-color),
+          background: var(--disabled-background),
+          border: var(--disabled-border),
+          box-shadow: none,
+        )
+      )
+    ),
+
+    button-group: (
+      --gap: 10px,
+
+      display: flex,
+      flex-wrap: wrap,
+
+      subclasses : (
+        ".btn:first-child" : (
+          border-start-end-radius: 0,
+          border-end-end-radius: 0,
+        ),
+
+        ".btn:last-child" : (
+          border-start-start-radius: 0,
+          border-end-start-radius: 0,
+        ),
+
+        ".btn:not(:first-child)" : (
+          margin-left: - 1px
+        ),
+
+        ".btn:not(:first-child, :last-child)" : (
+          border-radius: 0
+        ),
+
+        ".btn:only-child" : (
+
+        ),
+
+        ".btn:hover, .btn:focus" : (
+          z-index: 1
+        ),
+
+        "&.separated" : (
+          gap: var(--gap),
+          --border-radius: 5px,
+
+          subclasses : (
+            ".btn" : (
+              margin: 0,
+              border-radius: var(--border-radius)
+            )
+          )
+        )
+      )
+    ),
+
+    card : (
+      --border-radius: .25rem,
+      --padding: 10px,
+
+      background: var(--background),
+      padding: var(--padding),
+      border-radius: var(--border-radius),
+      box-shadow: var(--shadow),
+      border: var(--border),
+
+      height: 100%,
+      margin: 0,
+
+      colors: (
+        light : (
+          background: rgb(200, 200, 200)
+        ),
+        dark : (
+          border: 1px solid rgba(48, 54, 61, .75),
+          background: rgb(22, 27, 34),
+          shadow: rgba(1, 4, 9, 0.4) 0 1px 0 0
+        )
+      )
+    ),
+
+    container : (
+      margin: 0 auto,
+      width: 100%,
+      colors: (
+        light : (),
+        dark : ()
+      ),
+
+    ),
+
+    form : (
+      label : (
+        display: block,
+        margin-bottom: 10px,
+      ),
+      input : (
+        --border-radius: .25rem,
+        --padding: .5rem .75rem,
+        display: block,
+        colors: (
+          light : (
+          ),
+          dark : (
+            color: #fff,
+            background: rgb(48, 56, 66),
+            border: 1px solid rgba(240, 246, 252, .25),
+          )
+        )
+      ),
+      select : (
+        --border-radius: .25rem,
+        --padding: .5rem .75rem,
+        display: block,
+        colors: (
+          light : (
+          ),
+          dark : (
+            color: #fff,
+            background: rgb(48, 56, 66),
+            border: 1px solid rgba(240, 246, 252, .25),
+          )
+        )
+      ),
+      checkbox : (
+        --border-radius: .25rem,
+        --padding: .5rem .75rem,
+        colors: (
+          light : (
+          ),
+          dark : (
+            color: #fff,
+            background: rgb(48, 56, 66),
+            border: 1px solid rgba(240, 246, 252, .25),
+          )
+        )
+      ),
+      radio : (
+        --border-radius: .25rem,
+        --padding: .5rem .75rem,
+        colors: (
+          light : (
+          ),
+          dark : (
+            color: #fff,
+            background: rgb(48, 56, 66),
+            border: 1px solid rgba(240, 246, 252, .25),
+          )
+        )
+      ),
+      validation : (
+      )
+    ),
+    table : (
+      width: 100%,
+    ),
+
+    overlay : (
+
+      position: absolute,
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: 100%,
+      height: 100%,
+
+      colors: (
+        light : (
+        ),
+        dark : (
+          background: rgba(15, 23, 42, .25),
+        )
+      )
+    ),
+
+    pagination : (
+
+      --grid-template-columns: auto auto 1fr,
+      --gap : 10px,
+
+      --left-column-aligment: start,
+      --center-column-alignment: center,
+      --right-column-alignment: end,
+
+      position: relative,
+      display: grid,
+      width: 100%,
+      max-width: 100%,
+      align-items: center,
+
+      grid-template-columns: var(--grid-template-columns),
+      grid-gap: var(--gap),
+
+      subclasses : (
+        ".left" : (
+          justify-self: var(--left-column-alignment),
+        ),
+        ".center" : (
+          justify-self: var(--center-column-alignment),
+        ),
+        ".right" : (
+          justify-self: var(--right-column-alignment)
+        )
+      ),
+    ),
+
+    placeholder : (
+
+      --min-height: 0.55rem,
+      --border-radius: .1875rem,
+      --gap: .6rem,
+
+      cursor: wait,
+      display: flex,
+      flex-direction: column,
+
+      gap: var(--gap),
+
+      colors: (
+        light : (
+          background: #ccc
+        ),
+        dark : (
+          background: #ccc
+        )
+      ),
+
+      subclasses : (
+        ".el" : (
+            min-height: var(--min-height),
+            border-radius: var(--border-radius),
+            background: var(--background)
+        ),
+
+        "&.glow" : (
+          subclasses : (
+            ".el" : (
+              animation: placeholder-glow 2s ease-in-out infinite,
+            )
+          )
+        ),
+
+        "&.wave" : (
+          subclasses : (
+            ".el" : (
+              mask-size: 200% 100%,
+              -webkit-mask-size: 200% 100%,
+              mask-image: linear-gradient(90deg, #0000, #fff, #0000),
+              -webkit-mask-image: linear-gradient(90deg, #0000, #fff, #0000),
+              animation: placeholder-wave 2s linear infinite,
+            )
+          )
+        )
+      )
+    ),
+
+    nav : (
+
+      --flex-direction: row,
+      --align-items: auto,
+      --gap: 0,
+
+      display: flex,
+      flex-direction: var(--flex-direction),
+      align-items: var(--align-items),
+      gap : var(--gap),
+      margin: 0,
+      padding: 0,
+      list-style-type: none,
+
+      colors: (
+        light : (
+        ),
+        dark: (
+        )
+      ),
+
+      subclasses : (
+        '&.horizontal' : (
+          --align-items: center,
+          --flex-direction : row,
+        ),
+        '&.vertical' : (
+          --flex-direction : column,
+        ),
+        '&.tabs' : (
+
+        ),
+        '&.pills' : (
+
+        ),
+        '.item' : (
+          width: auto,
+
+          subclasses : (
+            '.link' : (
+                display: inline-flex,
+                padding: 10px,
+                color: var(--color),
+
+                colors: (
+                  light : (
+                    color: '#333',
+                  ),
+                  dark : (
+                    color: '#fff'
+                  )
+                ),
+
+                subclasses: (
+                  '&:hover' : (
+                    text-decoration : none
+                )
+              )
+            ),
+          )
+        )
+      )
+
+    ),
+
+    navbar : (
+
+      --grid-template-columns: auto auto 1fr,
+      --gap : 10px,
+      --left-column-aligment: start,
+      --center-column-alignnent: center,
+      --right-column-alignment: end,
+
+      position: relative,
+      display: grid,
+      width: 100%,
+      max-width: 100%,
+      align-items: center,
+      margin: 0,
+      padding: 0,
+
+      grid-template-columns: var(--grid-template-columns),
+      grid-gap: var(--gap),
+
+      colors: (
+        light : (
+        ),
+        dark: (
+        )
+      ),
+
+      subclasses : (
+        ".left" : (
+          justify-self: var(--left-column-alignment),
+        ),
+        ".center" : (
+          justify-self: var(--center-column-alignment),
+        ),
+        ".right" : (
+          justify-self: var(--right-column-alignment)
+        )
+      )
+    ),
+
+    sidecap : (
+      position: absolute,
+      top: 0,
+      right: 0,
+      height: 100%,
+
+      display: flex,
+      flex-direction: column,
+
+      colors: (
+        light : (
+          background : #ccc
+        ),
+        dark: (
+          background: rgb(45, 56, 66),
+          box-shadow: 0rem 1.25rem 1.25rem -0.5rem rgba(26,26,26, .28)
+        )
+      )
+    )
+  )
+);
+
+$updated-theme: map.deep-merge($updated-theme, $components-config);
+
+$theme: map.deep-merge($updated-theme, $theme);