@viasat/beam-styles 2.0.0

package/components/tooltip.module.scss

@@ -0,0 +1,112 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Tooltip';
+
+$tooltipBaseClass: '#{constants.$prefix}tooltip';
+$arrow-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="4" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 3.515c.69.647 1.81.647 2.5 0L10 0H0l3.75 3.515Z" fill="%23202E39"/></svg>');
+
+$sizes: (
+  xs: tokens.$bm-comp-tooltip-size-icon-trigger-xs,
+  sm: tokens.$bm-comp-tooltip-size-icon-trigger-sm,
+  md: tokens.$bm-comp-tooltip-size-icon-trigger-md,
+  lg: tokens.$bm-comp-tooltip-size-icon-trigger-lg,
+  xl: tokens.$bm-comp-tooltip-size-icon-trigger-xl,
+);
+
+%icon-trigger-base {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  cursor: pointer;
+  color: tokens.$bm-comp-tooltip-color-icon-trigger;
+}
+
+.#{$tooltipBaseClass} {
+  z-index: 999;
+
+  background-color: tokens.$bm-comp-tooltip-color-bg;
+  border-radius: tokens.$bm-comp-tooltip-radius;
+
+  max-width: tokens.$bm-comp-tooltip-size-width;
+  padding: tokens.$bm-comp-tooltip-space-y tokens.$bm-comp-tooltip-space-x;
+
+  color: tokens.$bm-comp-tooltip-color-text;
+  font: tokens.$bm-comp-tooltip-typo-body;
+
+  // doesn't actually directly do anything in CSS;
+  // just a sanity check so we don't ever lose this var in prod
+  // due to a plugin like purgeCSS
+  offset: tokens.$bm-comp-tooltip-space-offset;
+
+  // animation styling
+  // see https://floating-ui.com/docs/useTransition#usetransitionstatus
+  transition-property: opacity;
+
+  &[data-status='open'] {
+    transition-duration: 0s;
+  }
+
+  &[data-status='close'] {
+    transition-duration: 0.2s;
+  }
+
+  &[data-status='initial'],
+  &[data-status='close'] {
+    opacity: 0;
+  }
+
+  &__arrow {
+    // doesn't actually directly do anything in CSS;
+    // just a sanity check so we don't ever lose this var in prod
+    // due to a plugin like purgeCSS
+    offset: tokens.$bm-comp-tooltip-space-arrow;
+
+    @include mixins.svg-icon($arrow-mask);
+
+    // slight scale to prevent gaps
+    scale: 1.05;
+
+    width: tokens.$bm-comp-tooltip-size-arrow-width;
+    height: tokens.$bm-comp-tooltip-size-arrow-height;
+    background-color: tokens.$bm-comp-tooltip-color-bg;
+  }
+
+  &__icon-trigger {
+    @extend %icon-trigger-base;
+
+    svg {
+      background: none;
+      border: none;
+    }
+
+    &:focus-visible {
+      border-radius: tokens.$bm-sem-radius-round;
+      @include mixins.simulated-inset-outline($offset: 0px);
+    }
+
+    &--disabled {
+      opacity: tokens.$bm-sem-opacity-disabled;
+      cursor: inherit;
+    }
+
+    @each $size, $sizeValue in $sizes {
+      &--#{$size} {
+        border-radius: 100%;
+
+        // This ensures it works with the slot
+        height: $sizeValue;
+        width: $sizeValue;
+
+        svg {
+          height: $sizeValue;
+          width: $sizeValue;
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@viasat/beam-styles",
+  "version": "2.0.0",
+  "description": "SCSS modules and component styles for the Beam Design System",
+  "license": "MIT",
+  "author": "Viasat",
+  "homepage": "https://react.beam.viasat.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://git.viasat.com/vega/beam",
+    "directory": "libs/styles"
+  },
+  "bugs": {
+    "url": "https://git.viasat.com/vega/beam/issues"
+  },
+  "keywords": [
+    "design-system",
+    "beam",
+    "styles",
+    "scss",
+    "sass",
+    "css",
+    "css-modules"
+  ],
+  "main": "./styles.css",
+  "module": "./styles.css",
+  "exports": {
+    ".": "./styles.css",
+    "./*": "./*"
+  },
+  "files": [
+    "**/*.scss",
+    "**/*.css",
+    "**/*.css.map",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}