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

package/scss/themes/linker/colors.scss

@@ -0,0 +1,35 @@
+// Linker theme colors (coral theme)
+
+// primary (Linker coral)
+$color__primary--darker: #ad4a3d !default;
+$color__primary--dark: #cc574a !default;
+$color__primary: #ff6d5c !default;
+$color__primary--light: #ff8173 !default;
+$color__primary--lighter: #ffa399 !default;
+$color__primary--lightest: #ffd1cc !default;
+$colors__primary: (
+  'darker': $color__primary--darker,
+  'dark': $color__primary--dark,
+  'default': $color__primary,
+  'light': $color__primary--light,
+  'lighter': $color__primary--lighter,
+  'lightest': $color__primary--lightest,
+) !default;
+
+// secondary (Linker blacks/grays)
+$color__secondary--darker: #333 !default;
+$color__secondary--dark: #666 !default;
+$color__secondary: #000 !default;
+$color__secondary--light: #999 !default;
+$color__secondary--lighter: #ccc !default;
+$color__secondary--lightest: #f2f2f2 !default;
+$colors__secondary: (
+  'darker': $color__secondary--darker,
+  'dark': $color__secondary--dark,
+  'default': $color__secondary,
+  'light': $color__secondary--light,
+  'lighter': $color__secondary--lighter,
+  'lightest': $color__secondary--lightest,
+) !default;
+
+// NOTE: success, warning, danger, info inherit from default theme

package/scss/themes/linker/index.scss

@@ -0,0 +1,30 @@
+// Linker theme - CSS custom properties
+@import 'colors';
+@import 'typography';
+
+[data-library='linker'] {
+  // ===== PRIMARY COLORS (Linker coral) =====
+  --color__primary--darker: #{$color__primary--darker};
+  --color__primary--dark: #{$color__primary--dark};
+  --color__primary: #{$color__primary};
+  --color__primary--light: #{$color__primary--light};
+  --color__primary--lighter: #{$color__primary--lighter};
+  --color__primary--lightest: #{$color__primary--lightest};
+
+  // ===== SECONDARY COLORS (Linker blacks/grays) =====
+  --color__secondary--darker: #{$color__secondary--darker};
+  --color__secondary--dark: #{$color__secondary--dark};
+  --color__secondary: #{$color__secondary};
+  --color__secondary--light: #{$color__secondary--light};
+  --color__secondary--lighter: #{$color__secondary--lighter};
+  --color__secondary--lightest: #{$color__secondary--lightest};
+
+  // ===== TYPOGRAPHY (Anton + DM Sans) =====
+  --font__family--base: #{$font__family--base};
+  --font__family--highlight: #{$font__family--highlight};
+
+  // Button overrides (Linker-specific)
+  .ds-button {
+    --button__border-radius: 999px; // pill (full rounded)
+  }
+}

package/scss/themes/linker/typography.scss

@@ -0,0 +1,6 @@
+// Linker theme typography
+@import 'https://fonts.googleapis.com/css2?family=Anton&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap';
+
+$font__family--base: 'DM Sans', sans-serif !default;
+$font__family--highlight: 'Anton', sans-serif !default;

package/scss/themes/oggi/colors.scss

@@ -0,0 +1,81 @@
+// Oggi theme colors (green theme)
+
+// primary (Oggi green)
+$color__primary--darker: #4d880a !default;
+$color__primary--dark: #000 !default;
+$color__primary: #86c440 !default;
+$color__primary--light: #f3f9ec !default;
+$color__primary--lighter: #fb8c8b !default;
+$color__primary--lightest: #fcb7b7 !default;
+$colors__primary: (
+  'darker': $color__primary--darker,
+  'dark': $color__primary--dark,
+  'default': $color__primary,
+  'light': $color__primary--light,
+  'lighter': $color__primary--lighter,
+  'lightest': $color__primary--lightest,
+) !default;
+
+// secondary
+$color__secondary--darker: #2e2e33 !default;
+$color__secondary--dark: #757575 !default;
+$color__secondary: #262836 !default;
+$color__secondary--light: #f1f2f0 !default;
+$color__secondary--lighter: #51577a !default;
+$color__secondary--lightest: #fff !default;
+$colors__secondary: (
+  'darker': $color__secondary--darker,
+  'dark': $color__secondary--dark,
+  'default': $color__secondary,
+  'light': $color__secondary--light,
+  'lighter': $color__secondary--lighter,
+  'lightest': $color__secondary--lightest,
+) !default;
+
+// success
+$color__success--dark: #007347 !default;
+$color__success: #bde094 !default;
+$color__success--light: #dbedc7 !default;
+$color__success--lighter: #e6eddf !default;
+$colors__success: (
+  'dark': $color__success--dark,
+  'default': $color__success,
+  'light': $color__success--light,
+  'lighter': $color__success--lighter,
+) !default;
+
+// warning
+$color__warning--dark: #ffb81c !default;
+$color__warning: #ffc766 !default;
+$color__warning--light: #feebcb !default;
+$color__warning--lighter: #fef5e5 !default;
+$colors__warning: (
+  'dark': $color__warning--dark,
+  'default': $color__warning,
+  'light': $color__warning--light,
+  'lighter': $color__warning--lighter,
+) !default;
+
+// danger
+$color__danger--dark: #b23b3c !default;
+$color__danger: #fa5254 !default;
+$color__danger--light: #fa898b !default;
+$color__danger--lighter: #fad5d5 !default;
+$colors__danger: (
+  'dark': $color__danger--dark,
+  'default': $color__danger,
+  'light': $color__danger--light,
+  'lighter': $color__danger--lighter,
+) !default;
+
+// info
+$color__info--dark: #4021d9 !default;
+$color__info: #7040ff !default;
+$color__info--light: #d5ccff !default;
+$color__info--lighter: #eae5ff !default;
+$colors__info: (
+  'dark': $color__info--dark,
+  'default': $color__info,
+  'light': $color__info--light,
+  'lighter': $color__info--lighter,
+) !default;

package/scss/themes/oggi/index.scss

@@ -0,0 +1,54 @@
+// Oggi theme - CSS custom properties
+@import 'colors';
+@import 'typography';
+
+[data-library='oggi'] {
+  // ===== PRIMARY COLORS (Oggi green) =====
+  --color__primary--darker: #{$color__primary--darker};
+  --color__primary--dark: #{$color__primary--dark};
+  --color__primary: #{$color__primary};
+  --color__primary--light: #{$color__primary--light};
+  --color__primary--lighter: #{$color__primary--lighter};
+  --color__primary--lightest: #{$color__primary--lightest};
+
+  // ===== SECONDARY COLORS =====
+  --color__secondary--darker: #{$color__secondary--darker};
+  --color__secondary--dark: #{$color__secondary--dark};
+  --color__secondary: #{$color__secondary};
+  --color__secondary--light: #{$color__secondary--light};
+  --color__secondary--lighter: #{$color__secondary--lighter};
+  --color__secondary--lightest: #{$color__secondary--lightest};
+
+  // ===== SUCCESS COLORS =====
+  --color__success--dark: #{$color__success--dark};
+  --color__success: #{$color__success};
+  --color__success--light: #{$color__success--light};
+  --color__success--lighter: #{$color__success--lighter};
+
+  // ===== WARNING COLORS =====
+  --color__warning--dark: #{$color__warning--dark};
+  --color__warning: #{$color__warning};
+  --color__warning--light: #{$color__warning--light};
+  --color__warning--lighter: #{$color__warning--lighter};
+
+  // ===== DANGER COLORS =====
+  --color__danger--dark: #{$color__danger--dark};
+  --color__danger: #{$color__danger};
+  --color__danger--light: #{$color__danger--light};
+  --color__danger--lighter: #{$color__danger--lighter};
+
+  // ===== INFO COLORS =====
+  --color__info--dark: #{$color__info--dark};
+  --color__info: #{$color__info};
+  --color__info--light: #{$color__info--light};
+  --color__info--lighter: #{$color__info--lighter};
+
+  // ===== TYPOGRAPHY (Roboto Condensed) =====
+  --font__family--base: #{$font__family--base};
+  --font__family--highlight: #{$font__family--highlight};
+
+  // Button overrides (Oggi-specific)
+  .ds-button {
+    --button-color__primary: var(--color__primary--dark);
+  }
+}

package/scss/themes/oggi/typography.scss

@@ -0,0 +1,5 @@
+// Oggi theme typography
+@import 'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap';
+
+$font__family--base: 'Roboto Condensed', sans-serif !default;
+$font__family--highlight: 'Roboto Condensed', sans-serif !default;

package/scss/themes/streetgo/colors.scss

@@ -0,0 +1,81 @@
+// StreetGo theme colors (neon yellow theme)
+
+// primary (StreetGo neon yellow)
+$color__primary--darker: #4d880a !default;
+$color__primary--dark: #000 !default;
+$color__primary: #e4ff00 !default;
+$color__primary--light: #f3f9ec !default;
+$color__primary--lighter: #fb8c8b !default;
+$color__primary--lightest: #fcb7b7 !default;
+$colors__primary: (
+  'darker': $color__primary--darker,
+  'dark': $color__primary--dark,
+  'default': $color__primary,
+  'light': $color__primary--light,
+  'lighter': $color__primary--lighter,
+  'lightest': $color__primary--lightest,
+) !default;
+
+// secondary
+$color__secondary--darker: #2e2e33 !default;
+$color__secondary--dark: #757575 !default;
+$color__secondary: #262836 !default;
+$color__secondary--light: #f1f2f0 !default;
+$color__secondary--lighter: #51577a !default;
+$color__secondary--lightest: #000 !default;
+$colors__secondary: (
+  'darker': $color__secondary--darker,
+  'dark': $color__secondary--dark,
+  'default': $color__secondary,
+  'light': $color__secondary--light,
+  'lighter': $color__secondary--lighter,
+  'lightest': $color__secondary--lightest,
+) !default;
+
+// success
+$color__success--dark: #007347 !default;
+$color__success: #bde094 !default;
+$color__success--light: #dbedc7 !default;
+$color__success--lighter: #e6eddf !default;
+$colors__success: (
+  'dark': $color__success--dark,
+  'default': $color__success,
+  'light': $color__success--light,
+  'lighter': $color__success--lighter,
+) !default;
+
+// warning
+$color__warning--dark: #ffb81c !default;
+$color__warning: #ffc766 !default;
+$color__warning--light: #feebcb !default;
+$color__warning--lighter: #fef5e5 !default;
+$colors__warning: (
+  'dark': $color__warning--dark,
+  'default': $color__warning,
+  'light': $color__warning--light,
+  'lighter': $color__warning--lighter,
+) !default;
+
+// danger
+$color__danger--dark: #b23b3c !default;
+$color__danger: #fa5254 !default;
+$color__danger--light: #fa898b !default;
+$color__danger--lighter: #fad5d5 !default;
+$colors__danger: (
+  'dark': $color__danger--dark,
+  'default': $color__danger,
+  'light': $color__danger--light,
+  'lighter': $color__danger--lighter,
+) !default;
+
+// info
+$color__info--dark: #4021d9 !default;
+$color__info: #7040ff !default;
+$color__info--light: #d5ccff !default;
+$color__info--lighter: #eae5ff !default;
+$colors__info: (
+  'dark': $color__info--dark,
+  'default': $color__info,
+  'light': $color__info--light,
+  'lighter': $color__info--lighter,
+) !default;

package/scss/themes/streetgo/index.scss

@@ -0,0 +1,54 @@
+// StreetGo theme - CSS custom properties
+@import 'colors';
+@import 'typography';
+
+[data-library='streetgo'] {
+  // ===== PRIMARY COLORS (StreetGo neon yellow) =====
+  --color__primary--darker: #{$color__primary--darker};
+  --color__primary--dark: #{$color__primary--dark};
+  --color__primary: #{$color__primary};
+  --color__primary--light: #{$color__primary--light};
+  --color__primary--lighter: #{$color__primary--lighter};
+  --color__primary--lightest: #{$color__primary--lightest};
+
+  // ===== SECONDARY COLORS =====
+  --color__secondary--darker: #{$color__secondary--darker};
+  --color__secondary--dark: #{$color__secondary--dark};
+  --color__secondary: #{$color__secondary};
+  --color__secondary--light: #{$color__secondary--light};
+  --color__secondary--lighter: #{$color__secondary--lighter};
+  --color__secondary--lightest: #{$color__secondary--lightest};
+
+  // ===== SUCCESS COLORS =====
+  --color__success--dark: #{$color__success--dark};
+  --color__success: #{$color__success};
+  --color__success--light: #{$color__success--light};
+  --color__success--lighter: #{$color__success--lighter};
+
+  // ===== WARNING COLORS =====
+  --color__warning--dark: #{$color__warning--dark};
+  --color__warning: #{$color__warning};
+  --color__warning--light: #{$color__warning--light};
+  --color__warning--lighter: #{$color__warning--lighter};
+
+  // ===== DANGER COLORS =====
+  --color__danger--dark: #{$color__danger--dark};
+  --color__danger: #{$color__danger};
+  --color__danger--light: #{$color__danger--light};
+  --color__danger--lighter: #{$color__danger--lighter};
+
+  // ===== INFO COLORS =====
+  --color__info--dark: #{$color__info--dark};
+  --color__info: #{$color__info};
+  --color__info--light: #{$color__info--light};
+  --color__info--lighter: #{$color__info--lighter};
+
+  // ===== TYPOGRAPHY (Roboto Condensed) =====
+  --font__family--base: #{$font__family--base};
+  --font__family--highlight: #{$font__family--highlight};
+
+  // Button overrides (StreetGo-specific)
+  .ds-button {
+    --button-color__primary: var(--color__primary--dark);
+  }
+}

package/scss/themes/streetgo/typography.scss

@@ -0,0 +1,5 @@
+// StreetGo theme typography
+@import 'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap';
+
+$font__family--base: 'Roboto Condensed', sans-serif !default;
+$font__family--highlight: 'Roboto Condensed', sans-serif !default;