@akad/design-system 0.2.0-beta.9 → 1.0.0-alpha.2

package/scss/core/helpers/borders.scss

@@ -0,0 +1,105 @@
+// Border color utilities (uses CSS vars - dynamic theming)
+
+// Color shades (same as colors.scss - variant keys)
+$brand-color-shades: (
+  'darker',
+  'dark',
+  'default',
+  'light',
+  'lighter',
+  'lightest'
+); // 6 shades
+$semantic-color-shades: ('dark', 'default', 'light', 'lighter'); // 4 shades
+$neutral-scale: (
+  '00',
+  '05',
+  '10',
+  '20',
+  '30',
+  '40',
+  '50',
+  '60',
+  '70',
+  '80',
+  '90',
+  '100'
+); // 12-point scale
+
+// Generate primary/secondary border utilities
+@each $variant in $brand-color-shades {
+  .border-color__primary--#{$variant} {
+    // Use base variable for 'default', suffixed variable for others
+    @if $variant == 'default' {
+      border-color: var(--color__primary);
+    } @else {
+      border-color: var(--color__primary--#{$variant});
+    }
+
+    border-left-style: solid;
+    border-left-width: $spacing--quark;
+  }
+  .border-color__secondary--#{$variant} {
+    // Use base variable for 'default', suffixed variable for others
+    @if $variant == 'default' {
+      border-color: var(--color__secondary);
+    } @else {
+      border-color: var(--color__secondary--#{$variant});
+    }
+
+    border-left-style: solid;
+    border-left-width: $spacing--quark;
+  }
+}
+
+// Aliases without --default
+.border-color__primary {
+  border-color: var(--color__primary);
+  border-left-style: solid;
+  border-left-width: $spacing--quark;
+}
+
+.border-color__secondary {
+  border-color: var(--color__secondary);
+  border-left-style: solid;
+  border-left-width: $spacing--quark;
+}
+
+// Generate neutral border utilities
+@each $variant in $neutral-scale {
+  .border-color__neutral--#{$variant} {
+    border-color: var(--color__neutral--#{$variant});
+    border-left-style: solid;
+    border-left-width: $spacing--quark;
+  }
+
+  // Aliases with single hyphen (React uses 'neutral-90' not 'neutral--90')
+  .border-color__neutral-#{$variant} {
+    border-color: var(--color__neutral--#{$variant});
+    border-left-style: solid;
+    border-left-width: $spacing--quark;
+  }
+}
+
+// Generate semantic border utilities
+@each $semantic in ('success', 'warning', 'danger', 'info') {
+  @each $variant in $semantic-color-shades {
+    .border-color__#{$semantic}--#{$variant} {
+      // Use base variable for 'default', suffixed variable for others
+      @if $variant == 'default' {
+        border-color: var(--color__#{$semantic});
+      } @else {
+        border-color: var(--color__#{$semantic}--#{$variant});
+      }
+
+      border-left-style: solid;
+      border-left-width: $spacing--quark;
+    }
+  }
+
+  // Aliases without --default
+  .border-color__#{$semantic} {
+    border-color: var(--color__#{$semantic});
+    border-left-style: solid;
+    border-left-width: $spacing--quark;
+  }
+}

package/scss/core/helpers/colors.scss

@@ -0,0 +1,194 @@
+// Color utilities (uses CSS vars - dynamic theming)
+
+// Color shades (variant keys for generating utilities)
+$brand-color-shades: (
+  'darker',
+  'dark',
+  'default',
+  'light',
+  'lighter',
+  'lightest'
+); // 6 shades for primary/secondary
+$semantic-color-shades: (
+  'dark',
+  'default',
+  'light',
+  'lighter'
+); // 4 shades for success/warning/danger/info
+$neutral-scale: (
+  '00',
+  '05',
+  '10',
+  '20',
+  '30',
+  '40',
+  '50',
+  '60',
+  '70',
+  '80',
+  '90',
+  '100'
+); // 12-point neutral scale
+
+// Generate primary utilities
+@each $variant in $brand-color-shades {
+  .color__primary--#{$variant} {
+    // Use base variable for 'default', suffixed variable for others
+    @if $variant == 'default' {
+      color: var(--color__primary);
+    } @else {
+      color: var(--color__primary--#{$variant});
+    }
+  }
+  .bg-color__primary--#{$variant} {
+    @if $variant == 'default' {
+      background-color: var(--color__primary);
+    } @else {
+      background-color: var(--color__primary--#{$variant});
+    }
+
+    // Automatic contrast color (maintains old-default behavior)
+    @if index(('darker', 'dark', 'default'), $variant) {
+      color: var(--color__neutral--10); // Light text on dark bg
+    } @else {
+      color: var(--color__neutral--90); // Dark text on light bg
+    }
+  }
+}
+
+// Aliases without --default for backward compatibility
+.color__primary {
+  color: var(--color__primary);
+}
+
+.bg-color__primary {
+  background-color: var(--color__primary);
+  color: var(--color__neutral--10); // Automatic contrast color
+}
+
+// Generate secondary utilities
+@each $variant in $brand-color-shades {
+  .color__secondary--#{$variant} {
+    // Use base variable for 'default', suffixed variable for others
+    @if $variant == 'default' {
+      color: var(--color__secondary);
+    } @else {
+      color: var(--color__secondary--#{$variant});
+    }
+  }
+  .bg-color__secondary--#{$variant} {
+    @if $variant == 'default' {
+      background-color: var(--color__secondary);
+    } @else {
+      background-color: var(--color__secondary--#{$variant});
+    }
+
+    // Automatic contrast color (maintains old-default behavior)
+    @if index(('darker', 'dark', 'default'), $variant) {
+      color: var(--color__neutral--10); // Light text on dark bg
+    } @else {
+      color: var(--color__neutral--90); // Dark text on light bg
+    }
+  }
+}
+
+// Aliases without --default
+.color__secondary {
+  color: var(--color__secondary);
+}
+
+.bg-color__secondary {
+  background-color: var(--color__secondary);
+  color: var(--color__neutral--10); // Automatic contrast color
+}
+
+// Generate neutral utilities
+@each $variant in $neutral-scale {
+  .color__neutral--#{$variant} {
+    color: var(--color__neutral--#{$variant});
+  }
+  .bg-color__neutral--#{$variant} {
+    background-color: var(--color__neutral--#{$variant});
+
+    // Automatic contrast color (maintains old-default behavior)
+    @if index(('90', '80', '60'), $variant) {
+      color: var(--color__neutral--10); // Light text on dark bg
+    } @else if index(('40', '20', '10', '05', '00'), $variant) {
+      color: var(--color__neutral--90); // Dark text on light bg
+    } @else {
+      color: var(--color__neutral--80); // Medium gray - dark text
+    }
+  }
+
+  // Aliases with single hyphen (React uses 'neutral-90' not 'neutral--90')
+  .color__neutral-#{$variant} {
+    color: var(--color__neutral--#{$variant});
+  }
+  .bg-color__neutral-#{$variant} {
+    background-color: var(--color__neutral--#{$variant});
+
+    // Automatic contrast color (same logic as double-hyphen version)
+    @if index(('90', '80', '60'), $variant) {
+      color: var(--color__neutral--10); // Light text on dark bg
+    } @else if index(('40', '20', '10', '05', '00'), $variant) {
+      color: var(--color__neutral--90); // Dark text on light bg
+    } @else {
+      color: var(--color__neutral--80); // Medium gray - dark text
+    }
+  }
+}
+
+// Generate success, warning, danger, info utilities
+@each $semantic in ('success', 'warning', 'danger', 'info') {
+  @each $variant in $semantic-color-shades {
+    .color__#{$semantic}--#{$variant} {
+      // Use base variable for 'default', suffixed variable for others
+      @if $variant == 'default' {
+        color: var(--color__#{$semantic});
+      } @else {
+        color: var(--color__#{$semantic}--#{$variant});
+      }
+    }
+    .bg-color__#{$semantic}--#{$variant} {
+      @if $variant == 'default' {
+        background-color: var(--color__#{$semantic});
+      } @else {
+        background-color: var(--color__#{$semantic}--#{$variant});
+      }
+
+      // Automatic contrast color (maintains old-default behavior)
+      @if $semantic == 'success' or $semantic == 'danger' or $semantic == 'info'
+      {
+        @if index(('dark', 'default'), $variant) {
+          color: var(--color__neutral--10); // Light text on dark bg
+        } @else {
+          color: var(--color__neutral--90); // Dark text on light bg
+        }
+      } @else if $semantic == 'warning' {
+        // Warning colors are lighter, use dark text for most
+        @if $variant == 'dark' {
+          color: var(--color__neutral--90); // Dark text
+        } @else {
+          color: var(--color__neutral--90); // Dark text on warning colors
+        }
+      }
+    }
+  }
+
+  // Aliases without --default
+  .color__#{$semantic} {
+    color: var(--color__#{$semantic});
+  }
+  .bg-color__#{$semantic} {
+    background-color: var(--color__#{$semantic});
+
+    // Automatic contrast color for base semantic colors
+    @if $semantic == 'success' or $semantic == 'danger' or $semantic == 'info' {
+      color: var(--color__neutral--10); // Light text (these are typically dark)
+    } @else if $semantic == 'warning' {
+      color: var(
+        --color__neutral--90
+      ); // Dark text (warning is typically light)
+    }
+  }
+}

package/scss/core/helpers/display.scss

@@ -0,0 +1,177 @@
+.d {
+  &-block {
+    display: block;
+  }
+
+  &-flex {
+    display: flex;
+
+    &__direction {
+      &--column {
+        flex-direction: column;
+      }
+
+      &--column-reverse {
+        flex-direction: column-reverse;
+      }
+
+      &--row {
+        flex-direction: row;
+      }
+
+      &--row-reverse {
+        flex-direction: row-reverse;
+      }
+    }
+
+    &__gap {
+      @each $space, $value in $spacing {
+        &--#{$space} {
+          gap: #{$value};
+        }
+      }
+    }
+
+    &__align {
+      &--start {
+        align-items: flex-start;
+      }
+
+      &--center {
+        align-items: center;
+      }
+
+      &--end {
+        align-items: flex-end;
+      }
+
+      &--stretch {
+        align-items: stretch;
+      }
+    }
+
+    &__justify {
+      &--start {
+        justify-content: flex-start;
+      }
+
+      &--center {
+        justify-content: center;
+      }
+
+      &--end {
+        justify-content: flex-end;
+      }
+
+      &--beetwen {
+        justify-content: space-between;
+      }
+
+      &--around {
+        justify-content: space-around;
+      }
+
+      &--evenly {
+        justify-content: space-evenly;
+      }
+    }
+  }
+
+  &-inline-block {
+    display: inline-block;
+  }
+
+  &-none {
+    display: none;
+  }
+}
+
+@include mobile {
+  .d-sm {
+    &-block {
+      display: block;
+    }
+
+    &-flex {
+      display: flex;
+
+      &__direction {
+        &--column {
+          flex-direction: column;
+        }
+
+        &--column-reverse {
+          flex-direction: column-reverse;
+        }
+
+        &--row {
+          flex-direction: row;
+        }
+
+        &--row-reverse {
+          flex-direction: row-reverse;
+        }
+      }
+
+      &__gap {
+        @each $space, $value in $spacing {
+          &--#{$space} {
+            gap: #{$value};
+          }
+        }
+      }
+
+      &__align {
+        &--start {
+          align-items: flex-start;
+        }
+
+        &--center {
+          align-items: center;
+        }
+
+        &--end {
+          align-items: flex-end;
+        }
+
+        &--stretch {
+          align-items: stretch;
+        }
+      }
+
+      &__justify {
+        &--start {
+          justify-content: flex-start;
+        }
+
+        &--center {
+          justify-content: center;
+        }
+
+        &--end {
+          justify-content: flex-end;
+        }
+
+        &--beetwen {
+          justify-content: space-between;
+        }
+
+        &--around {
+          justify-content: space-around;
+        }
+
+        &--evenly {
+          justify-content: space-evenly;
+        }
+      }
+    }
+
+    &-inline-block {
+      display: inline-block;
+    }
+
+    &-none {
+      display: none;
+    }
+  }
+}

package/scss/core/helpers/elevation.scss

@@ -0,0 +1,16 @@
+// Elevation utilities (box-shadow)
+.elevation-1 {
+  box-shadow: $shadow__level--1;
+}
+
+.elevation-2 {
+  box-shadow: $shadow__level--2;
+}
+
+.elevation-3 {
+  box-shadow: $shadow__level--3;
+}
+
+.elevation-4 {
+  box-shadow: $shadow__level--4;
+}

package/scss/core/helpers/index.scss

@@ -0,0 +1,6 @@
+// Utility classes
+@import 'colors';
+@import 'display';
+@import 'order';
+@import 'borders';
+@import 'elevation';

package/scss/core/helpers/order.scss

@@ -0,0 +1,20 @@
+$columns: 12 !default;
+
+@for $i from 1 through $columns {
+  .order--#{$i} {
+    order: #{$i};
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $min: device-min($breakpoint, $grid-breakpoints);
+  $label: if($min, $breakpoint + '-', '');
+
+  @include device-up($breakpoint, $grid-breakpoints) {
+    @for $i from 1 through $columns {
+      .order--#{$label}#{$i} {
+        order: #{$i};
+      }
+    }
+  }
+}

package/scss/core/index.scss

@@ -0,0 +1,18 @@
+// ===== CORE STYLES (independente de tema) =====
+// Entry point for core.css build
+
+// 1. Tokens estruturais (compilados - performance)
+@import 'tokens';
+
+// 2. Functions & Mixins estruturais
+@import 'functions';
+@import 'mixins';
+
+// 3. Base styles (reset + typography)
+@import 'base';
+
+// 4. Components
+@import 'components';
+
+// 5. Utilities
+@import 'helpers';

package/scss/core/mixins/breakpoints.scss

@@ -0,0 +1,90 @@
+/**
+ * Device Mixins
+ *
+ * Usage:
+ * .class {
+ *   @include small {
+ *       padding: 0 20px;
+ *   }
+ *   @include mobile {
+ *       padding: 0 60px;
+ *   }
+ * }
+ */
+
+@use 'sass:map';
+
+// mobile devices
+@mixin mobile {
+  @media (max-width: map.get($breakpoint, 'mobile')) {
+    @content;
+  }
+}
+
+// Device breakpoint up. If the breakpoint is the smallest it will
+// return without media query.
+@mixin device-up($name, $breakpoints: $grid-breakpoints) {
+  $min: device-min($name, $breakpoints);
+
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Device breakpoint down.
+// If the breakpoint is the largest it will return without media query.
+@mixin device-down($name, $breakpoints: $grid-breakpoints) {
+  $max: device-max($name, $breakpoints);
+
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Device breakpoint between
+@mixin device-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: device-min($lower, $breakpoints);
+  $max: device-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include device-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include device-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Device breakpoint only
+@mixin device-only($name, $breakpoints: $grid-breakpoints) {
+  $min: device-min($name, $breakpoints);
+  $max: device-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include device-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include device-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}

package/scss/core/mixins/grid.scss

@@ -0,0 +1,8 @@
+// The grid column
+@mixin grid-col($columns: 0, $margin: false) {
+  @if $columns > 0 {
+    grid-column: span $columns;
+  } @else {
+    grid-column: span 1;
+  }
+}

package/scss/core/mixins/index.scss

@@ -0,0 +1,5 @@
+// Structural mixins only (no theme dependency)
+@import 'breakpoints';
+@import 'grid';
+
+// NOTE: colors.scss and fonts.scss NOT copied (antipadrão - will be eliminated)

package/scss/core/tokens/borders.scss

@@ -0,0 +1,12 @@
+// radius
+$border__radius--sm: 4px !default;
+$border__radius--md: 8px !default;
+$border__radius--lg: 24px !default;
+$border__radius--pill: 500px !default;
+$border__radius--circular: 50% !default;
+
+// width
+$border__width--hairline: 1px !default;
+$border__width--thin: 2px !default;
+$border__width--thick: 4px !default;
+$border__width--heavy: 8px !default;

package/scss/core/tokens/breakpoints.scss

@@ -0,0 +1,20 @@
+$breakpoint--mobile: 768px !default;
+$breakpoint: (
+  'mobile': $breakpoint--mobile,
+) !default;
+
+// Grid Breakpoints
+$grid-breakpoints: (
+  sm: 480px,
+  md: 768px,
+  lg: 960px,
+  xl: 1280px,
+  xxl: 1440px,
+) !default;
+$container-widths: (
+  sm: 450px,
+  md: 720px,
+  lg: 940px,
+  xl: 1128px,
+  xxl: 1128px,
+) !default;

package/scss/core/tokens/icons.scss

@@ -0,0 +1,2 @@
+// Values with range (i.e 20..48) allow us to configurate font variations with CSS style.
+@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,600,0..1,0';

package/scss/core/tokens/index.scss

@@ -0,0 +1,8 @@
+// Structural tokens (compiled - no theme dependency)
+@import 'typography';
+@import 'spacings';
+@import 'borders';
+@import 'breakpoints';
+@import 'opacity';
+@import 'icons';
+@import 'shadows';

package/scss/core/tokens/opacity.scss

@@ -0,0 +1,6 @@
+// opacity
+$opacity--lighter: 0.15 !default;
+$opacity--light: 0.3 !default;
+$opacity--medium: 0.5 !default;
+$opacity--heavy: 0.7 !default;
+$opacity--heavier: 0.85 !default;