@thalassic/themes 0.0.1 → 0.1.1

package/README.md

@@ -1,7 +1 @@
-# themes
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test themes` to execute the unit tests.
+# Thalassic

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thalassic/themes",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0"
@@ -8,6 +8,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/konopyanovM/thalassic"
+  },
   "sideEffects": false,
   "module": "fesm2022/thalassic-themes.mjs",
   "typings": "types/thalassic-themes.d.ts",

package/palettes/_aqua.scss

@@ -0,0 +1,20 @@
+$aqua: (
+  0: #000000,
+  5: #001418,
+  10: #001f25,
+  15: #002a32,
+  20: #00363f,
+  25: #00424c,
+  30: #004e5a,
+  35: #005b69,
+  40: #006877,
+  50: #008396,
+  60: #0c9fb5,
+  70: #41bad0,
+  80: #62d6ed,
+  90: #a4eeff,
+  95: #d5f7ff,
+  98: #effcff,
+  99: #f7fdff,
+  100: #ffffff,
+);

package/palettes/_green.scss

@@ -0,0 +1,20 @@
+$green: (
+  0: #000000,
+  5: #001503,
+  10: #002106,
+  15: #002d0a,
+  20: #00390f,
+  25: #004614,
+  30: #00531a,
+  35: #00601f,
+  40: #006e25,
+  50: #008a31,
+  60: #27a644,
+  70: #49c25c,
+  80: #66df75,
+  90: #83fc8e,
+  95: #c7ffc4,
+  98: #ebffe6,
+  99: #f6fff0,
+  100: #ffffff,
+);

package/palettes/_index.scss

@@ -0,0 +1,3 @@
+@forward 'aqua';
+@forward 'green';
+@forward 'yellow';

package/palettes/_yellow.scss

@@ -0,0 +1,20 @@
+$yellow: (
+  0: #000000,
+  5: #180f00,
+  10: #261a00,
+  15: #322300,
+  20: #3f2e00,
+  25: #4d3800,
+  30: #5b4300,
+  35: #6a4e00,
+  40: #785900,
+  50: #977100,
+  60: #b78a00,
+  70: #d8a300,
+  80: #fabd00,
+  90: #ffdf9e,
+  95: #ffefd4,
+  98: #fff8f2,
+  99: #fffbff,
+  100: #ffffff,
+);

package/styles/index.scss

@@ -0,0 +1 @@
+@forward 'utils';

package/styles/utils/_colors.scss

@@ -0,0 +1,19 @@
+:root {
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  --color-shade-5: hsl(0, 0%, 5%);
+  --color-shade-10: hsl(0, 0%, 10%);
+  --color-shade-15: hsl(0, 0%, 15%);
+  --color-shade-20: hsl(0, 0%, 20%);
+  --color-shade-30: hsl(0, 0%, 30%);
+  --color-shade-40: hsl(0, 0%, 40%);
+  --color-shade-50: hsl(0, 0%, 50%);
+  --color-shade-60: hsl(0, 0%, 60%);
+  --color-shade-70: hsl(0, 0%, 70%);
+  --color-shade-80: hsl(0, 0%, 80%);
+  --color-shade-85: hsl(0, 0%, 85%);
+  --color-shade-90: hsl(0, 0%, 90%);
+  --color-shade-95: hsl(0, 0%, 95%);
+  --color-shade-98: hsl(0, 0%, 98%);
+}

package/styles/utils/_index.scss

@@ -0,0 +1,2 @@
+@forward 'colors';
+@forward 'mixins';

package/styles/utils/_mixins.scss

@@ -0,0 +1,119 @@
+@function on-color($l) {
+  @if $l > 60 {
+    @return 15%;
+  } @else {
+    @return 98%;
+  }
+}
+
+@mixin generate-theme($config) {
+  // Primary
+  $primary-h: map-get($config, 'primary-h');
+  $primary-s: map-get($config, 'primary-s');
+  $primary-l: map-get($config, 'primary-l');
+  $primary-hsl: $primary-h, $primary-s, $primary-l;
+
+  // Secondary
+  $secondary-h: map-get($config, 'secondary-h');
+  $secondary-s: map-get($config, 'secondary-s');
+  $secondary-l: map-get($config, 'secondary-l');
+  $secondary-hsl: $secondary-h, $secondary-s, $secondary-l;
+
+  // Tertiary
+  $tertiary-h: map-get($config, 'tertiary-h');
+  $tertiary-s: map-get($config, 'tertiary-s');
+  $tertiary-l: map-get($config, 'tertiary-l');
+  $tertiary-hsl: $tertiary-h, $tertiary-s, $tertiary-l;
+
+  // Success
+  $success-h: map-get($config, 'success-h');
+  $success-s: map-get($config, 'success-s');
+  $success-l: map-get($config, 'success-l');
+  $success-hsl: $success-h, $success-s, $success-l;
+
+  // Danger
+  $danger-h: map-get($config, 'danger-h');
+  $danger-s: map-get($config, 'danger-s');
+  $danger-l: map-get($config, 'danger-l');
+  $danger-hsl: $danger-h, $danger-s, $danger-l;
+
+  // Info
+  $info-h: map-get($config, 'info-h');
+  $info-s: map-get($config, 'info-s');
+  $info-l: map-get($config, 'info-l');
+  $info-hsl: $info-h, $info-s, $info-l;
+
+  // Warning
+  $warning-h: map-get($config, 'warning-h');
+  $warning-s: map-get($config, 'warning-s');
+  $warning-l: map-get($config, 'warning-l');
+  $warning-hsl: $warning-h, $warning-s, $warning-l;
+
+  // Colors
+  --color-primary: hsl($primary-hsl);
+  --color-on-primary: #{on-color($primary-l)};
+
+  --color-secondary: hsl($secondary-hsl);
+  --color-on-secondary: #{on-color($secondary-l)};
+
+  --color-tertiary: hsl($tertiary-hsl);
+  --color-on-tertiary: #{on-color($tertiary-l)};
+
+  --color-success: hsl($success-hsl);
+  --color-on-success: #{on-color($success-l)};
+
+  --color-danger: hsl($danger-hsl);
+  --color-on-danger: #{on-color($danger-l)};
+
+  --color-info: hsl($info-hsl);
+  --color-on-info: #{on-color($info-l)};
+
+  --color-warning: hsl($warning-hsl);
+  --color-on-warning: #{on-color($warning-l)};
+
+  // Transparent
+  --color-primary-t90: hsla(var(--color-primary-hsl), 0.9);
+  --color-primary-t75: hsla(var(--color-primary-hsl), 0.4);
+  --color-primary-t50: hsla(var(--color-primary-hsl), 0.1);
+  --color-primary-t25: hsla(var(--color-primary-hsl), 0.05);
+  --color-primary-t10: hsla(var(--color-primary-hsl), 0.05);
+
+  --color-danger-t75: hsla(var(--color-danger-hsl), 0.75);
+  --color-danger-t25: hsla(var(--color-danger-hsl), 0.25);
+  --color-danger-t10: hsla(var(--color-danger-hsl), 0.1);
+  --color-danger-t05: hsla(var(--color-danger-hsl), 0.05);
+
+  --color-warning-t75: hsla(var(--color-warning-hsl), 0.75);
+  --color-warning-t25: hsla(var(--color-warning-hsl), 0.25);
+
+  --color-info-t75: hsla(var(--color-info-hsl), 0.75);
+  --color-info-t25: hsla(var(--color-info-hsl), 0.25);
+
+  // Dark
+  --color-primary-40: hsl(var(--color-primary-h), var(--color-primary-s), 40%);
+  --color-primary-30: hsl(var(--color-primary-h), var(--color-primary-s), 30%);
+  --color-primary-20: hsl(var(--color-primary-h), var(--color-primary-s), 20%);
+
+  --color-tertiary-40: hsl(
+    var(--color-tertiary-h),
+    var(--color-tertiary-s),
+    40%
+  );
+  --color-tertiary-20: hsl(
+    var(--color-tertiary-h),
+    var(--color-tertiary-s),
+    20%
+  );
+
+  --color-success-40: hsl(var(--color-success-h), var(--color-success-s), 40%);
+  --color-success-20: hsl(var(--color-success-h), var(--color-success-s), 20%);
+
+  --color-danger-30: hsl(var(--color-danger-h), var(--color-danger-s), 30%);
+  --color-danger-20: hsl(var(--color-danger-h), var(--color-danger-s), 20%);
+
+  --color-info-40: hsl(var(--color-info-h), var(--color-info-s), 40%);
+  --color-info-20: hsl(var(--color-info-h), var(--color-info-s), 20%);
+
+  --color-warning-40: hsl(var(--color-warning-h), var(--color-warning-s), 40%);
+  --color-warning-20: hsl(var(--color-warning-h), var(--color-warning-s), 20%);
+}

package/themes/index.scss

@@ -0,0 +1 @@
+@forward 'thalassic';

package/themes/thalassic/_border.scss

@@ -0,0 +1,3 @@
+:root {
+  --border-width: 1px;
+}

package/themes/thalassic/_colors.scss

@@ -0,0 +1,127 @@
+@use 'sass:map';
+
+@use './palettes' as palettes;
+@use '../../palettes' as common-palettes;
+
+:root {
+  // Primary
+  --color-primary: #{map.get(palettes.$primary, 40)};
+  --color-on-primary: #{map.get(palettes.$primary, 100)};
+  --color-primary-container: #{map.get(palettes.$primary, 90)};
+  --color-on-primary-container: #{map.get(palettes.$primary, 30)};
+
+  // Secondary
+  --color-secondary: #{map.get(palettes.$secondary, 40)};
+  --color-on-secondary: #{map.get(palettes.$secondary, 100)};
+  --color-secondary-container: #{map.get(palettes.$secondary, 90)};
+  --color-on-secondary-container: #{map.get(palettes.$secondary, 30)};
+
+  // Tertiary
+  --color-tertiary: #{map.get(palettes.$tertiary, 40)};
+  --color-on-tertiary: #{map.get(palettes.$tertiary, 100)};
+  --color-tertiary-container: #{map.get(palettes.$tertiary, 90)};
+  --color-on-tertiary-container: #{map.get(palettes.$tertiary, 30)};
+
+  // Success
+  --color-success: #{map.get(common-palettes.$green, 40)};
+  --color-on-success: #{map.get(common-palettes.$green, 100)};
+  --color-success-container: #{map.get(common-palettes.$green, 90)};
+  --color-on-success-container: #{map.get(common-palettes.$green, 30)};
+
+  // Danger
+  --color-danger: #ba1a1a;
+  --color-on-danger: #ffffff;
+  --color-danger-container: #ffdad6;
+  --color-on-danger-container: #93000a;
+
+  // Info
+  --color-info: #{map.get(common-palettes.$aqua, 40)};
+  --color-on-info: #{map.get(common-palettes.$aqua, 100)};
+  --color-info-container: #{map.get(common-palettes.$aqua, 90)};
+  --color-on-info-container: #{map.get(common-palettes.$aqua, 30)};
+
+  // Warning
+  --color-warning: #{map.get(common-palettes.$yellow, 40)};
+  --color-on-warning: #{map.get(common-palettes.$yellow, 100)};
+  --color-warning-container: #{map.get(common-palettes.$yellow, 90)};
+  --color-on-warning-container: #{map.get(common-palettes.$yellow, 30)};
+
+  // Surface
+  --color-surface: #f6fafe;
+  --color-on-surface: #181c1f;
+  --color-surface-variant: #dde3ea;
+  --color-on-surface-variant: #41484d;
+
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #f0f4f8;
+  --color-surface-container: #ebeef3;
+  --color-surface-container-high: #e5e8ed;
+  --color-surface-container-highest: #dfe3e7;
+
+  // Outline
+  --color-outline: #71787e;
+  --color-outline-variant: #c1c7ce;
+
+  // Shadow
+  --color-shadow: 0 0 0;
+
+  &.tls-dark {
+    // Primary
+    --color-primary: #{map.get(palettes.$primary, 80)};
+    --color-on-primary: #{map.get(palettes.$primary, 20)};
+    --color-primary-container: #{map.get(palettes.$primary, 30)};
+    --color-on-primary-container: #{map.get(palettes.$primary, 90)};
+
+    // Secondary
+    --color-secondary: #{map.get(palettes.$secondary, 80)};
+    --color-on-secondary: #{map.get(palettes.$secondary, 20)};
+    --color-secondary-container: #{map.get(palettes.$secondary, 30)};
+    --color-on-secondary-container: #{map.get(palettes.$secondary, 90)};
+
+    // Tertiary
+    --color-tertiary: #{map.get(palettes.$tertiary, 80)};
+    --color-on-tertiary: #{map.get(palettes.$tertiary, 20)};
+    --color-tertiary-container: #{map.get(palettes.$tertiary, 30)};
+    --color-on-tertiary-container: #{map.get(palettes.$tertiary, 90)};
+
+    // Success
+    --color-success: #{map.get(common-palettes.$green, 80)};
+    --color-on-success: #{map.get(common-palettes.$green, 20)};
+    --color-success-container: #{map.get(common-palettes.$green, 30)};
+    --color-on-success-container: #{map.get(common-palettes.$green, 90)};
+
+    // Danger
+    --color-danger: #ffb4ab;
+    --color-on-danger: #690005;
+    --color-danger-container: #93000a;
+    --color-on-danger-container: #ffdad6;
+
+    // Info
+    --color-info: #{map.get(common-palettes.$aqua, 80)};
+    --color-on-info: #{map.get(common-palettes.$aqua, 20)};
+    --color-info-container: #{map.get(common-palettes.$aqua, 30)};
+    --color-on-info-container: #{map.get(common-palettes.$aqua, 90)};
+
+    // Warning
+    --color-warning: #{map.get(common-palettes.$yellow, 80)};
+    --color-on-warning: #{map.get(common-palettes.$yellow, 20)};
+    --color-warning-container: #{map.get(common-palettes.$yellow, 30)};
+    --color-on-warning-container: #{map.get(common-palettes.$yellow, 90)};
+
+    // Surface
+    --color-surface: #101417;
+    --color-on-surface: #dfe3e7;
+    --color-surface-variant: #41484d;
+    --color-on-surface-variant: #c1c7ce;
+
+    --color-surface-container-lowest: #0a0f12;
+    --color-surface-container-low: #181c1f;
+    --color-surface-container: #1c2024;
+    --color-surface-container-high: #262a2e;
+    --color-surface-container-highest: #313539;
+
+    // Outline
+    --color-outline: #8b9198;
+    --color-outline-variant: #41484d;
+  }
+}

package/themes/thalassic/_motion.scss

@@ -0,0 +1,20 @@
+:root {
+  // Duration
+  --motion-instant: 100ms; // Tooltips, ripples...
+  --motion-fast: 150ms; // Button hovers, focus states...
+  --motion-default: 250ms; // Dropdowns, modals, accordions...
+  --motion-slow: 400ms; // Page transitions, complex animations...
+  --motion-slower: 600ms; // Loading indicators, skeletons...
+
+  // Easing curves
+  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --motion-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+  // Delays
+  --motion-delay-short: 50ms;
+  --motion-delay-medium: 100ms;
+  --motion-delay-long: 200ms;
+}

package/themes/thalassic/_radius.scss

@@ -0,0 +1,6 @@
+:root {
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+}

package/themes/thalassic/_shadow.scss

@@ -0,0 +1,13 @@
+:root {
+  --shadow-xs: 0 1px 2px 0 rgb(var(--color-shadow) / 0.25);
+  --shadow-sm:
+    0 1px 3px 0 rgb(var(--color-shadow) / 0.35), 0 1px 2px -1px rgb(var(--color-shadow) / 0.35);
+  --shadow-md:
+    0 4px 6px -1px rgb(var(--color-shadow) / 0.35), 0 2px 4px -2px rgb(var(--color-shadow) / 0.35);
+  --shadow-lg:
+    0 10px 35px -3px rgb(var(--color-shadow) / 0.35), 0 4px 6px -4px rgb(var(--color-shadow) / 0.35);
+  --shadow-xl:
+    0 20px 25px -5px rgb(var(--color-shadow) / 0.35),
+    0 8px 10px -6px rgb(var(--color-shadow) / 0.35);
+  --shadow-2xl: 0 25px 50px -12px rgb(var(--color-shadow) / 0.35);
+}

package/themes/thalassic/_spacing.scss

@@ -0,0 +1,7 @@
+:root {
+  --spacing-base: 0.25rem;
+
+  @for $index from 1 through 20 {
+    --spacing-#{$index}: calc(var(--spacing-base) * #{$index});
+  }
+}

package/themes/thalassic/_typography.scss

@@ -0,0 +1,104 @@
+:root {
+  // Font families
+  --font-family-base: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-family-heading: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-family-mono: 'Roboto Mono', 'Courier New', monospace;
+
+  // Font weights
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  // Line heights
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  // Letter spacing
+  --letter-spacing-tight: -0.02em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+
+  // Display styles (large marketing text)
+  --font-display-large-size: 3.5rem;
+  --font-display-large-weight: var(--font-weight-regular);
+  --font-display-large-line-height: 4rem;
+  --font-display-large-letter-spacing: var(--letter-spacing-tight);
+
+  --font-display-medium-size: 2.8125rem;
+  --font-display-medium-weight: var(--font-weight-regular);
+  --font-display-medium-line-height: 3.25rem;
+  --font-display-medium-letter-spacing: var(--letter-spacing-normal);
+
+  --font-display-small-size: 2.25rem;
+  --font-display-small-weight: var(--font-weight-regular);
+  --font-display-small-line-height: 2.75rem;
+  --font-display-small-letter-spacing: var(--letter-spacing-normal);
+
+  // Headline styles (page titles)
+  --font-headline-large-size: 2rem;
+  --font-headline-large-weight: var(--font-weight-regular);
+  --font-headline-large-line-height: 2.5rem;
+  --font-headline-large-letter-spacing: var(--letter-spacing-normal);
+
+  --font-headline-medium-size: 1.75rem;
+  --font-headline-medium-weight: var(--font-weight-regular);
+  --font-headline-medium-line-height: 2.25rem;
+  --font-headline-medium-letter-spacing: var(--letter-spacing-normal);
+
+  --font-headline-small-size: 1.5rem;
+  --font-headline-small-weight: var(--font-weight-regular);
+  --font-headline-small-line-height: 2rem;
+  --font-headline-small-letter-spacing: var(--letter-spacing-normal);
+
+  // Title styles (section headers)
+  --font-title-large-size: 1.375rem;
+  --font-title-large-weight: var(--font-weight-medium);
+  --font-title-large-line-height: 1.75rem;
+  --font-title-large-letter-spacing: var(--letter-spacing-normal);
+
+  --font-title-medium-size: 1rem;
+  --font-title-medium-weight: var(--font-weight-medium);
+  --font-title-medium-line-height: 1.5rem;
+  --font-title-medium-letter-spacing: var(--letter-spacing-wide);
+
+  --font-title-small-size: 0.875rem;
+  --font-title-small-weight: var(--font-weight-medium);
+  --font-title-small-line-height: 1.25rem;
+  --font-title-small-letter-spacing: var(--letter-spacing-wide);
+
+  // Body styles (main content)
+  --font-body-large-size: 1rem;
+  --font-body-large-weight: var(--font-weight-regular);
+  --font-body-large-line-height: 1.5rem;
+  --font-body-large-letter-spacing: var(--letter-spacing-normal);
+
+  --font-body-medium-size: 0.875rem;
+  --font-body-medium-weight: var(--font-weight-regular);
+  --font-body-medium-line-height: 1.25rem;
+  --font-body-medium-letter-spacing: var(--letter-spacing-normal);
+
+  --font-body-small-size: 0.75rem;
+  --font-body-small-weight: var(--font-weight-regular);
+  --font-body-small-line-height: 1rem;
+  --font-body-small-letter-spacing: var(--letter-spacing-normal);
+
+  // Label styles (buttons, tabs, form labels)
+  --font-label-large-size: 0.875rem;
+  --font-label-large-weight: var(--font-weight-medium);
+  --font-label-large-line-height: 1.25rem;
+  --font-label-large-letter-spacing: var(--letter-spacing-wide);
+
+  --font-label-medium-size: 0.75rem;
+  --font-label-medium-weight: var(--font-weight-medium);
+  --font-label-medium-line-height: 1rem;
+  --font-label-medium-letter-spacing: var(--letter-spacing-wider);
+
+  --font-label-small-size: 0.6875rem;
+  --font-label-small-weight: var(--font-weight-medium);
+  --font-label-small-line-height: 1rem;
+  --font-label-small-letter-spacing: var(--letter-spacing-wider);
+}

package/themes/thalassic/index.scss

@@ -0,0 +1,8 @@
+@forward 'semantic';
+@forward 'border';
+@forward 'colors';
+@forward 'motion';
+@forward 'radius';
+@forward 'shadow';
+@forward 'spacing';
+@forward 'typography';

package/themes/thalassic/palettes/_index.scss

@@ -0,0 +1,5 @@
+@forward 'neutral';
+@forward 'neutral-variant';
+@forward 'primary';
+@forward 'secondary';
+@forward 'tertiary';

package/themes/thalassic/palettes/_neutral-variant.scss

@@ -0,0 +1,20 @@
+$neutral-variant: (
+  0: #000000,
+  5: #0c1215,
+  10: #171c20,
+  15: #21262b,
+  20: #2c3135,
+  25: #373c40,
+  30: #42474c,
+  35: #4e5358,
+  40: #5a5f64,
+  50: #72787d,
+  60: #8c9196,
+  70: #a7acb1,
+  80: #c2c7cc,
+  90: #dee3e8,
+  95: #ecf1f7,
+  98: #f6faff,
+  99: #fbfcff,
+  100: #ffffff,
+);

package/themes/thalassic/palettes/_neutral.scss

@@ -0,0 +1,20 @@
+$neutral: (
+  0: #000000,
+  5: #0f1113,
+  10: #1a1c1e,
+  15: #242628,
+  20: #2f3132,
+  25: #3a3c3d,
+  30: #454749,
+  35: #515254,
+  40: #5d5e60,
+  50: #767779,
+  60: #909193,
+  70: #aaabad,
+  80: #c6c6c8,
+  90: #e2e2e4,
+  95: #f1f0f3,
+  98: #f9f9fb,
+  99: #fcfcfe,
+  100: #ffffff,
+);

package/themes/thalassic/palettes/_primary.scss

@@ -0,0 +1,20 @@
+$primary: (
+  0: #000000,
+  5: #00131e,
+  10: #001e2d,
+  15: #00293c,
+  20: #00344b,
+  25: #00405b,
+  30: #004c6b,
+  35: #00587c,
+  40: #00658d,
+  50: #2b7ea9,
+  60: #4b98c5,
+  70: #68b3e1,
+  80: #85cffe,
+  90: #c6e7ff,
+  95: #e4f3ff,
+  98: #f6faff,
+  99: #fbfcff,
+  100: #ffffff,
+);

package/themes/thalassic/palettes/_secondary.scss

@@ -0,0 +1,20 @@
+$secondary: (
+  0: #000000,
+  5: #04121b,
+  10: #0f1d26,
+  15: #192731,
+  20: #24323c,
+  25: #2f3d47,
+  30: #3a4953,
+  35: #46545f,
+  40: #52606b,
+  50: #6a7984,
+  60: #84939e,
+  70: #9eadb9,
+  80: #b9c8d5,
+  90: #d5e5f1,
+  95: #e4f3ff,
+  98: #f6faff,
+  99: #fbfcff,
+  100: #ffffff,
+);

package/themes/thalassic/palettes/_tertiary.scss

@@ -0,0 +1,20 @@
+$tertiary: (
+  0: #000000,
+  5: #2a0017,
+  10: #3d0024,
+  15: #500030,
+  20: #63003d,
+  25: #77004a,
+  30: #8c0058,
+  35: #9c1464,
+  40: #ac2471,
+  50: #cc408a,
+  60: #ed5ba5,
+  70: #ff82bc,
+  80: #ffb0d0,
+  90: #ffd8e6,
+  95: #ffecf1,
+  98: #fff8f8,
+  99: #fffbff,
+  100: #ffffff,
+);

package/themes/thalassic/semantic/_control.scss

@@ -0,0 +1,9 @@
+:root {
+  --control-height-sm: 28px;
+  --control-height-md: 32px;
+  --control-height-lg: 36px;
+
+  --control-focus-ring-width: 2px;
+  --control-focus-ring-offset: 2px;
+  --control-focus-ring-color: var(--color-primary);
+}

package/themes/thalassic/semantic/_index.scss

@@ -0,0 +1 @@
+@forward 'control';