clarus-css 0.1.0 → 0.1.1

package/scss/components/_index.scss

@@ -0,0 +1,14 @@
+@use "buttons";
+@use "cards";
+@use "alerts";
+@use "badges";
+@use "tables";
+@use "navbar";
+@use "dropdown";
+@use "modal";
+@use "accordion";
+@use "tabs";
+@use "tooltips";
+@use "toasts";
+@use "pagination";
+@use "breadcrumbs";

package/scss/components/_modal.scss

@@ -0,0 +1,9 @@
+.modal {
+  position: fixed;
+  inset: 0;
+  display: none;
+}
+
+.modal.show {
+  display: flex;
+}

package/scss/components/_navbar.scss

@@ -0,0 +1,5 @@
+.navbar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}

package/scss/components/_pagination.scss

@@ -0,0 +1,5 @@
+.pagination {
+  display: flex;
+  gap: 0.25rem;
+  list-style: none;
+}

package/scss/components/_tables.scss

@@ -0,0 +1,4 @@
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}

package/scss/components/_tabs.scss

@@ -0,0 +1,4 @@
+.tabs {
+  display: flex;
+  border-bottom: 1px solid var(--clarus-color-border);
+}

package/scss/components/_toasts.scss

@@ -0,0 +1,5 @@
+.toast {
+  display: flex;
+  border: 1px solid var(--clarus-color-border);
+  border-radius: var(--clarus-radius-md);
+}

package/scss/components/_tooltips.scss

@@ -0,0 +1,4 @@
+.tooltip {
+  position: absolute;
+  z-index: 1080;
+}

package/scss/entries/components-entry.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+@use "tokens";
+@use "base";
+@use "components";
+@use "themes";

package/scss/entries/forms-entry.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+@use "tokens";
+@use "base";
+@use "forms";
+@use "themes";

package/scss/entries/layout-entry.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+@use "tokens";
+@use "base";
+@use "layout";
+@use "themes";

package/scss/entries/utilities-entry.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+@use "tokens";
+@use "base";
+@use "utilities";
+@use "themes";

package/scss/forms/_forms.scss

@@ -0,0 +1,99 @@
+@use "../settings" as *;
+@use "../tools" as *;
+
+.form-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: flex-start;
+  width: 100%;
+  min-height: 10px;
+}
+
+.form-col {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.form-label {
+  width: 120px;
+  margin-left: 8px;
+  margin-bottom: 2px;
+  color: var(--clarus-color-muted);
+  font-size: $font-size-sm;
+  font-weight: $font-weight-regular;
+
+  @include truncate;
+}
+
+.form-text {
+  width: 120px;
+  margin-top: 4px;
+  padding: 4px 8px;
+  border-radius: var(--clarus-radius-sm);
+  color: $color-gray-500;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-regular;
+
+  @include truncate;
+}
+
+.form-control {
+  height: 38px;
+  padding: 0 7px;
+  border: 1px solid var(--clarus-color-border);
+  border-radius: var(--clarus-radius-sm);
+  color: var(--clarus-color-text);
+  background-color: var(--clarus-color-surface);
+  font-size: $font-size-md;
+  font-weight: $font-weight-medium;
+}
+
+.form-control::placeholder {
+  color: $color-gray-500;
+}
+
+.form-control:focus {
+  @include focus-ring;
+}
+
+.form-control:disabled {
+  color: $color-gray-500;
+  background-color: $color-gray-200;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.form-control-sm {
+  height: 30px;
+  font-size: $font-size-xs;
+}
+
+.form-control-lg {
+  height: 46px;
+  font-size: $font-size-md;
+}
+
+.form-size-sm {
+  width: 120px;
+}
+
+.form-size-md {
+  width: 180px;
+}
+
+.form-size-lg {
+  width: 240px;
+}
+
+.form-size-xl {
+  width: 300px;
+}
+
+.form-size-xxl {
+  width: 360px;
+}

package/scss/forms/_index.scss

@@ -0,0 +1 @@
+@use "forms";

package/scss/layout/_containers.scss

@@ -0,0 +1,24 @@
+@use "sass:map";
+@use "../settings" as *;
+@use "../tools" as *;
+
+.container,
+.container-sm,
+.container-md,
+.container-lg,
+.container-xl,
+.container-xxl,
+.container-fluid {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@each $breakpoint, $width in $container-max-widths {
+  @include media-breakpoint-up($breakpoint) {
+    .container,
+    .container-#{$breakpoint} {
+      max-width: $width;
+    }
+  }
+}

package/scss/layout/_grid.scss

@@ -0,0 +1,49 @@
+@use "sass:math";
+@use "../settings" as *;
+@use "../tools" as *;
+
+$grid-columns: 12;
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(var(--clarus-gutter-y) * -1);
+  margin-right: calc(var(--clarus-gutter-x) / -2);
+  margin-left: calc(var(--clarus-gutter-x) / -2);
+}
+
+.row > * {
+  margin-top: var(--clarus-gutter-y);
+  padding-right: calc(var(--clarus-gutter-x) / 2);
+  padding-left: calc(var(--clarus-gutter-x) / 2);
+}
+
+.row-fluid {
+  width: 100%;
+}
+
+.col-fluid {
+  width: 100%;
+}
+
+@each $breakpoint, $min in $breakpoints {
+  $infix: breakpoint-infix($breakpoint);
+
+  @include media-breakpoint-up($breakpoint) {
+    .col#{$infix} {
+      flex: 1 0 0%;
+    }
+
+    .col#{$infix}-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+
+    @for $i from 1 through $grid-columns {
+      .col#{$infix}-#{$i} {
+        flex: 0 0 auto;
+        width: math.percentage(math.div($i, $grid-columns));
+      }
+    }
+  }
+}

package/scss/layout/_index.scss

@@ -0,0 +1,2 @@
+@use "containers";
+@use "grid";

package/scss/settings/_breakpoints.scss

@@ -0,0 +1,24 @@
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+) !default;
+
+$column-max-widths: (
+  sm: 120px,
+  md: 240px,
+  lg: 360px,
+  xl: 480px,
+  xxl: 560px
+) !default;

package/scss/settings/_colors.scss

@@ -0,0 +1,23 @@
+$color-white: #ffffff !default;
+$color-black: #000000 !default;
+
+$color-primary: #1a73e8 !default;
+$color-success: #1fca7a !default;
+$color-warning: #f9ab00 !default;
+$color-danger: #d93025 !default;
+$color-info: #1a73e8 !default;
+
+$color-gray-100: #f8f9fa !default;
+$color-gray-200: #e9ecef !default;
+$color-gray-300: #ced4da !default;
+$color-gray-500: #bbbbbb !default;
+$color-gray-600: #777777 !default;
+$color-gray-900: #202124 !default;
+
+$theme-colors: (
+  primary: $color-primary,
+  success: $color-success,
+  warning: $color-warning,
+  danger: $color-danger,
+  info: $color-info
+) !default;

package/scss/settings/_index.scss

@@ -0,0 +1,4 @@
+@forward "breakpoints";
+@forward "colors";
+@forward "spacing";
+@forward "typography";

package/scss/settings/_spacing.scss

@@ -0,0 +1,12 @@
+$spacers: (
+  0: 0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 1rem,
+  4: 1.5rem,
+  5: 3rem
+) !default;
+
+$radius-sm: 4px !default;
+$radius-md: 6px !default;
+$radius-lg: 8px !default;

package/scss/settings/_typography.scss

@@ -0,0 +1,11 @@
+$font-family-sans: "Google Sans Flex", sans-serif !default;
+$font-family-mono: "Source Code Pro", monospace !default;
+
+$font-size-xs: 0.65rem !default;
+$font-size-sm: 0.75rem !default;
+$font-size-md: 0.85rem !default;
+$font-size-lg: 1rem !default;
+
+$font-weight-regular: 400 !default;
+$font-weight-medium: 500 !default;
+$line-height-base: 1.5 !default;

package/scss/themes/_dark.scss

@@ -0,0 +1,7 @@
+[data-theme="dark"] {
+  --clarus-color-text: #f1f3f4;
+  --clarus-color-muted: #bdc1c6;
+  --clarus-color-border: #3c4043;
+  --clarus-color-surface: #202124;
+  --clarus-color-subtle: #2b2c2f;
+}

package/scss/themes/_index.scss

@@ -0,0 +1 @@
+@use "dark";

package/scss/tokens/_index.scss

@@ -0,0 +1 @@
+@use "root";

package/scss/tokens/_root.scss

@@ -0,0 +1,25 @@
+@use "sass:map";
+@use "../settings" as *;
+
+:root {
+  --clarus-color-white: #{$color-white};
+  --clarus-color-black: #{$color-black};
+  --clarus-color-primary: #{$color-primary};
+  --clarus-color-success: #{$color-success};
+  --clarus-color-warning: #{$color-warning};
+  --clarus-color-danger: #{$color-danger};
+  --clarus-color-info: #{$color-info};
+  --clarus-color-text: #{$color-gray-900};
+  --clarus-color-muted: #{$color-gray-600};
+  --clarus-color-border: #{$color-gray-300};
+  --clarus-color-surface: #{$color-white};
+  --clarus-color-subtle: #{$color-gray-100};
+  --clarus-font-sans: #{$font-family-sans};
+  --clarus-font-mono: #{$font-family-mono};
+  --clarus-line-height-base: #{$line-height-base};
+  --clarus-radius-sm: #{$radius-sm};
+  --clarus-radius-md: #{$radius-md};
+  --clarus-radius-lg: #{$radius-lg};
+  --clarus-gutter-x: #{map.get($spacers, 4)};
+  --clarus-gutter-y: 0px;
+}

package/scss/tools/_index.scss

@@ -0,0 +1 @@
+@forward "mixins";

package/scss/tools/_mixins.scss

@@ -0,0 +1,38 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@mixin media-breakpoint-up($name) {
+  $min: map.get($breakpoints, $name);
+
+  @if $min == null {
+    @error "Unknown breakpoint `#{$name}`.";
+  }
+
+  @if $min == 0 {
+    @content;
+  } @else {
+    @media (min-width: $min) {
+      @content;
+    }
+  }
+}
+
+@function breakpoint-infix($name) {
+  @if $name == xs {
+    @return "";
+  }
+
+  @return "-#{$name}";
+}
+
+@mixin focus-ring($color: var(--clarus-color-primary)) {
+  outline: none;
+  border-color: $color;
+  box-shadow: 0 0 5px 2px color-mix(in srgb, #{$color} 20%, transparent);
+}
+
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/scss/utilities/_display.scss

@@ -0,0 +1,19 @@
+.d-none {
+  display: none;
+}
+
+.d-block {
+  display: block;
+}
+
+.d-inline {
+  display: inline;
+}
+
+.d-inline-block {
+  display: inline-block;
+}
+
+.d-flex {
+  display: flex;
+}

package/scss/utilities/_flex.scss

@@ -0,0 +1,52 @@
+@use "../settings" as *;
+@use "../tools" as *;
+
+@each $breakpoint, $min in $breakpoints {
+  $infix: breakpoint-infix($breakpoint);
+
+  @include media-breakpoint-up($breakpoint) {
+    .align-items#{$infix}-start {
+      align-items: flex-start;
+    }
+
+    .align-items#{$infix}-center {
+      align-items: center;
+    }
+
+    .align-items#{$infix}-end {
+      align-items: flex-end;
+    }
+
+    .justify-content#{$infix}-start {
+      justify-content: flex-start;
+    }
+
+    .justify-content#{$infix}-center {
+      justify-content: center;
+    }
+
+    .justify-content#{$infix}-end {
+      justify-content: flex-end;
+    }
+
+    .justify-content#{$infix}-around {
+      justify-content: space-around;
+    }
+
+    .justify-content#{$infix}-between {
+      justify-content: space-between;
+    }
+
+    .align-self#{$infix}-start {
+      align-self: flex-start;
+    }
+
+    .align-self#{$infix}-center {
+      align-self: center;
+    }
+
+    .align-self#{$infix}-end {
+      align-self: flex-end;
+    }
+  }
+}

package/scss/utilities/_index.scss

@@ -0,0 +1,4 @@
+@use "display";
+@use "flex";
+@use "spacing";
+@use "visibility";

package/scss/utilities/_spacing.scss

@@ -0,0 +1,127 @@
+@use "../settings" as *;
+@use "../tools" as *;
+
+@each $breakpoint, $min in $breakpoints {
+  $infix: breakpoint-infix($breakpoint);
+
+  @include media-breakpoint-up($breakpoint) {
+    @each $key, $value in $spacers {
+      .m#{$infix}-#{$key} {
+        margin: $value;
+      }
+
+      .mt#{$infix}-#{$key} {
+        margin-top: $value;
+      }
+
+      .mr#{$infix}-#{$key} {
+        margin-right: $value;
+      }
+
+      .mb#{$infix}-#{$key} {
+        margin-bottom: $value;
+      }
+
+      .ml#{$infix}-#{$key} {
+        margin-left: $value;
+      }
+
+      .mx#{$infix}-#{$key} {
+        margin-right: $value;
+        margin-left: $value;
+      }
+
+      .my#{$infix}-#{$key} {
+        margin-top: $value;
+        margin-bottom: $value;
+      }
+
+      .p#{$infix}-#{$key} {
+        padding: $value;
+      }
+
+      .pt#{$infix}-#{$key} {
+        padding-top: $value;
+      }
+
+      .pr#{$infix}-#{$key} {
+        padding-right: $value;
+      }
+
+      .pb#{$infix}-#{$key} {
+        padding-bottom: $value;
+      }
+
+      .pl#{$infix}-#{$key} {
+        padding-left: $value;
+      }
+
+      .px#{$infix}-#{$key} {
+        padding-right: $value;
+        padding-left: $value;
+      }
+
+      .py#{$infix}-#{$key} {
+        padding-top: $value;
+        padding-bottom: $value;
+      }
+
+      // Controla o gutter da grid (--clarus-gutter-x/-y), consumido por .row/.row > *.
+      .g#{$infix}-#{$key} {
+        --clarus-gutter-x: #{$value};
+        --clarus-gutter-y: #{$value};
+      }
+
+      .gx#{$infix}-#{$key} {
+        --clarus-gutter-x: #{$value};
+      }
+
+      .gy#{$infix}-#{$key} {
+        --clarus-gutter-y: #{$value};
+      }
+
+      // Gap literal (flex/grid), independente da grid de colunas.
+      .gap#{$infix}-#{$key} {
+        gap: $value;
+      }
+
+      .gap-x#{$infix}-#{$key} {
+        column-gap: $value;
+      }
+
+      .gap-y#{$infix}-#{$key} {
+        row-gap: $value;
+      }
+    }
+
+    .m#{$infix}-auto {
+      margin: auto;
+    }
+
+    .mt#{$infix}-auto {
+      margin-top: auto;
+    }
+
+    .mr#{$infix}-auto {
+      margin-right: auto;
+    }
+
+    .mb#{$infix}-auto {
+      margin-bottom: auto;
+    }
+
+    .ml#{$infix}-auto {
+      margin-left: auto;
+    }
+
+    .mx#{$infix}-auto {
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    .my#{$infix}-auto {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
+}

package/scss/utilities/_visibility.scss

@@ -0,0 +1,7 @@
+.visible {
+  visibility: visible;
+}
+
+.invisible {
+  visibility: hidden;
+}