@drivy/cobalt 0.13.0

package/index.js

@@ -0,0 +1,160 @@
+export { default as Accordion } from './components/Accordion/index.js';
+export { default as Alerter, useAlerts } from './components/Alerter/index.js';
+export { BasicCell } from './components/BasicCell/index.js';
+export { BulletList, BulletListItem } from './components/BulletList/index.js';
+export { Button, ButtonGroup } from './components/Button/index.js';
+export { default as BrandButton } from './components/Buttons/BrandButton/index.js';
+export { default as GhostButton } from './components/Buttons/GhostButton/index.js';
+export { default as InversedButton } from './components/Buttons/InversedButton/index.js';
+export { default as DefaultButton } from './components/Buttons/DefaultButton/index.js';
+export { Callout } from './components/Callout/index.js';
+export { default as Cell, Cells } from './components/Cell/index.js';
+export { CdwChoice } from './components/CdwChoice/index.js';
+export { EmptyState } from './components/EmptyState/index.js';
+export { Flag } from './components/Flag/index.js';
+export { Flash } from './components/Flash/index.js';
+export { default as Helper } from './components/Helper/index.js';
+export { CalendarRangePicker } from './components/Calendar/CalendarRangePicker/CalendarRangePicker.js';
+export { Card, CardSection } from './components/Card/index.js';
+export { BUNDLED_ICONS, Icon, IconColorsOptions, isIconSource } from './components/Icon/index.js';
+export { default as Modal } from './components/Modal/index.js';
+export { default as ModalOpenerButton } from './components/ModalOpenerButton/index.js';
+export { Note } from './components/Note/index.js';
+export { Pill, PillGroup } from './components/Pill/index.js';
+export { PriceTable, PriceTableRow } from './components/PriceTable/index.js';
+export { ProgressBar } from './components/ProgressBar/index.js';
+export { Tab, Tabs } from './components/Tabs/index.js';
+export { Tag } from './components/Tag/index.js';
+export { TextContainer } from './components/TextContainer/index.js';
+export { Chip } from './components/Chip/index.js';
+export { Autocomplete } from './components/Form/Autocomplete/index.js';
+export { Checkbox, ChoiceList, Radio } from './components/Form/Checkmark.js';
+export { CheckablePillsGroup, CheckboxPill, RadioPill } from './components/Form/CheckablePill.js';
+export { ComposedField } from './components/Form/ComposedField.js';
+export { withFieldLabelAndHint } from './components/Form/field.js';
+export { Fieldset } from './components/Form/Fieldset.js';
+export { Hint } from './components/Form/Hint.js';
+export { Select } from './components/Form/Select.js';
+export { default as Slider, SliderValueMeta } from './components/Form/Slider.js';
+export { Stepper, StepperMeta } from './components/Form/Stepper.js';
+export { TextArea } from './components/Form/TextArea.js';
+export { TextInput } from './components/Form/TextInput.js';
+export { ToggleSwitch } from './components/Form/ToggleSwitch.js';
+export { CalendarView } from './components/Calendar/CalendarView/index.js';
+export { default as Popover } from './components/Popover/index.js';
+export { default as HorizontalList, HorizontalListPaddingBlock } from './components/HorizontalList/index.js';
+export { default as useBreakpoint } from './hooks/useBreakpoint.js';
+export { default as AirportIcon } from './components/Icon/__generated__/AirportIcon.js';
+export { default as ArrowLeftIcon } from './components/Icon/__generated__/ArrowLeftIcon.js';
+export { default as ArrowRightIcon } from './components/Icon/__generated__/ArrowRightIcon.js';
+export { default as BinIcon } from './components/Icon/__generated__/BinIcon.js';
+export { default as BriefcaseIcon } from './components/Icon/__generated__/BriefcaseIcon.js';
+export { default as BulbIcon } from './components/Icon/__generated__/BulbIcon.js';
+export { default as CameraIcon } from './components/Icon/__generated__/CameraIcon.js';
+export { default as CarCheckIcon } from './components/Icon/__generated__/CarCheckIcon.js';
+export { default as CarDrivyOpenIcon } from './components/Icon/__generated__/CarDrivyOpenIcon.js';
+export { default as CarGroupIcon } from './components/Icon/__generated__/CarGroupIcon.js';
+export { default as CarIcon } from './components/Icon/__generated__/CarIcon.js';
+export { default as CarLockIcon } from './components/Icon/__generated__/CarLockIcon.js';
+export { default as CarSearchIcon } from './components/Icon/__generated__/CarSearchIcon.js';
+export { default as CarTypeAntiqueIcon } from './components/Icon/__generated__/CarTypeAntiqueIcon.js';
+export { default as CarTypeCabrioletIcon } from './components/Icon/__generated__/CarTypeCabrioletIcon.js';
+export { default as CarTypeCampervanIcon } from './components/Icon/__generated__/CarTypeCampervanIcon.js';
+export { default as CarTypeCityIcon } from './components/Icon/__generated__/CarTypeCityIcon.js';
+export { default as CarTypeConvertibleIcon } from './components/Icon/__generated__/CarTypeConvertibleIcon.js';
+export { default as CarTypeCoupeIcon } from './components/Icon/__generated__/CarTypeCoupeIcon.js';
+export { default as CarTypeFamilyIcon } from './components/Icon/__generated__/CarTypeFamilyIcon.js';
+export { default as CarTypeFourFourIcon } from './components/Icon/__generated__/CarTypeFourFourIcon.js';
+export { default as CarTypeMinibusIcon } from './components/Icon/__generated__/CarTypeMinibusIcon.js';
+export { default as CarTypeSedanIcon } from './components/Icon/__generated__/CarTypeSedanIcon.js';
+export { default as CarTypeUtilityIcon } from './components/Icon/__generated__/CarTypeUtilityIcon.js';
+export { default as CheckCircleIcon } from './components/Icon/__generated__/CheckCircleIcon.js';
+export { default as CheckIcon } from './components/Icon/__generated__/CheckIcon.js';
+export { default as ChevronDownIcon } from './components/Icon/__generated__/ChevronDownIcon.js';
+export { default as ChevronLeftIcon } from './components/Icon/__generated__/ChevronLeftIcon.js';
+export { default as ChevronRightIcon } from './components/Icon/__generated__/ChevronRightIcon.js';
+export { default as ChevronUpIcon } from './components/Icon/__generated__/ChevronUpIcon.js';
+export { default as CloseIcon } from './components/Icon/__generated__/CloseIcon.js';
+export { default as ContactMailIcon } from './components/Icon/__generated__/ContactMailIcon.js';
+export { default as ContactPhoneIcon } from './components/Icon/__generated__/ContactPhoneIcon.js';
+export { default as ContextualPaperclipIcon } from './components/Icon/__generated__/ContextualPaperclipIcon.js';
+export { default as ContextualQuestionIcon } from './components/Icon/__generated__/ContextualQuestionIcon.js';
+export { default as ContextualWarningCircleFilledIcon } from './components/Icon/__generated__/ContextualWarningCircleFilledIcon.js';
+export { default as ContextualWarningCircleIcon } from './components/Icon/__generated__/ContextualWarningCircleIcon.js';
+export { default as CreditCardIcon } from './components/Icon/__generated__/CreditCardIcon.js';
+export { default as DirectionsIcon } from './components/Icon/__generated__/DirectionsIcon.js';
+export { default as DotsHorizontalIcon } from './components/Icon/__generated__/DotsHorizontalIcon.js';
+export { default as DotsVerticalIcon } from './components/Icon/__generated__/DotsVerticalIcon.js';
+export { default as DownloadIcon } from './components/Icon/__generated__/DownloadIcon.js';
+export { default as EarthIcon } from './components/Icon/__generated__/EarthIcon.js';
+export { default as EditIcon } from './components/Icon/__generated__/EditIcon.js';
+export { default as ExternalLinkIcon } from './components/Icon/__generated__/ExternalLinkIcon.js';
+export { default as EyeIcon } from './components/Icon/__generated__/EyeIcon.js';
+export { default as FiltersIcon } from './components/Icon/__generated__/FiltersIcon.js';
+export { default as FlagIcon } from './components/Icon/__generated__/FlagIcon.js';
+export { default as GeolocationIcon } from './components/Icon/__generated__/GeolocationIcon.js';
+export { default as GraphUpIcon } from './components/Icon/__generated__/GraphUpIcon.js';
+export { default as IncidentIcon } from './components/Icon/__generated__/IncidentIcon.js';
+export { default as InfoFilledIcon } from './components/Icon/__generated__/InfoFilledIcon.js';
+export { default as InfoIcon } from './components/Icon/__generated__/InfoIcon.js';
+export { default as InstantIcon } from './components/Icon/__generated__/InstantIcon.js';
+export { default as KeyIcon } from './components/Icon/__generated__/KeyIcon.js';
+export { default as LocalityIcon } from './components/Icon/__generated__/LocalityIcon.js';
+export { default as LocationMapIcon } from './components/Icon/__generated__/LocationMapIcon.js';
+export { default as LocationParkingIcon } from './components/Icon/__generated__/LocationParkingIcon.js';
+export { default as LocationPinIcon } from './components/Icon/__generated__/LocationPinIcon.js';
+export { default as LogoutIcon } from './components/Icon/__generated__/LogoutIcon.js';
+export { default as MeetDriverIcon } from './components/Icon/__generated__/MeetDriverIcon.js';
+export { default as MeetOwnerIcon } from './components/Icon/__generated__/MeetOwnerIcon.js';
+export { default as MenuListIcon } from './components/Icon/__generated__/MenuListIcon.js';
+export { default as MileageIcon } from './components/Icon/__generated__/MileageIcon.js';
+export { default as MiscGiftIcon } from './components/Icon/__generated__/MiscGiftIcon.js';
+export { default as NotificationIcon } from './components/Icon/__generated__/NotificationIcon.js';
+export { default as OptionAirConditioningIcon } from './components/Icon/__generated__/OptionAirConditioningIcon.js';
+export { default as OptionAudioInputIcon } from './components/Icon/__generated__/OptionAudioInputIcon.js';
+export { default as OptionBabySeatIcon } from './components/Icon/__generated__/OptionBabySeatIcon.js';
+export { default as OptionBikeRackIcon } from './components/Icon/__generated__/OptionBikeRackIcon.js';
+export { default as OptionCdPlayerIcon } from './components/Icon/__generated__/OptionCdPlayerIcon.js';
+export { default as OptionChainsIcon } from './components/Icon/__generated__/OptionChainsIcon.js';
+export { default as OptionCruiseControlIcon } from './components/Icon/__generated__/OptionCruiseControlIcon.js';
+export { default as OptionGpsIcon } from './components/Icon/__generated__/OptionGpsIcon.js';
+export { default as OptionHasTrailerIcon } from './components/Icon/__generated__/OptionHasTrailerIcon.js';
+export { default as OptionHitchIcon } from './components/Icon/__generated__/OptionHitchIcon.js';
+export { default as OptionRoofBoxIcon } from './components/Icon/__generated__/OptionRoofBoxIcon.js';
+export { default as OptionSkiRackIcon } from './components/Icon/__generated__/OptionSkiRackIcon.js';
+export { default as OptionSnowTireIcon } from './components/Icon/__generated__/OptionSnowTireIcon.js';
+export { default as OptionWheelchairAccessibleIcon } from './components/Icon/__generated__/OptionWheelchairAccessibleIcon.js';
+export { default as PeopleUserIcon } from './components/Icon/__generated__/PeopleUserIcon.js';
+export { default as PhotosIcon } from './components/Icon/__generated__/PhotosIcon.js';
+export { default as PlugIcon } from './components/Icon/__generated__/PlugIcon.js';
+export { default as RefreshIcon } from './components/Icon/__generated__/RefreshIcon.js';
+export { default as ResetIcon } from './components/Icon/__generated__/ResetIcon.js';
+export { default as RideIcon } from './components/Icon/__generated__/RideIcon.js';
+export { default as SearchIcon } from './components/Icon/__generated__/SearchIcon.js';
+export { default as ServiceBatteryIcon } from './components/Icon/__generated__/ServiceBatteryIcon.js';
+export { default as ServiceCleaningIcon } from './components/Icon/__generated__/ServiceCleaningIcon.js';
+export { default as ServiceFuelIcon } from './components/Icon/__generated__/ServiceFuelIcon.js';
+export { default as ServiceHealingIcon } from './components/Icon/__generated__/ServiceHealingIcon.js';
+export { default as ServiceLockedIcon } from './components/Icon/__generated__/ServiceLockedIcon.js';
+export { default as ServiceTollsIcon } from './components/Icon/__generated__/ServiceTollsIcon.js';
+export { default as ServiceUnlockedIcon } from './components/Icon/__generated__/ServiceUnlockedIcon.js';
+export { default as SettingsIcon } from './components/Icon/__generated__/SettingsIcon.js';
+export { default as ShareIcon } from './components/Icon/__generated__/ShareIcon.js';
+export { default as ShopIcon } from './components/Icon/__generated__/ShopIcon.js';
+export { default as SocialFacebookIcon } from './components/Icon/__generated__/SocialFacebookIcon.js';
+export { default as SocialLinkedinIcon } from './components/Icon/__generated__/SocialLinkedinIcon.js';
+export { default as SocialTwitterIcon } from './components/Icon/__generated__/SocialTwitterIcon.js';
+export { default as SocialWhatsappIcon } from './components/Icon/__generated__/SocialWhatsappIcon.js';
+export { default as StarIcon } from './components/Icon/__generated__/StarIcon.js';
+export { default as SubwayIcon } from './components/Icon/__generated__/SubwayIcon.js';
+export { default as TimeAlertIcon } from './components/Icon/__generated__/TimeAlertIcon.js';
+export { default as TimeBackwardsIcon } from './components/Icon/__generated__/TimeBackwardsIcon.js';
+export { default as TimeCalendarIcon } from './components/Icon/__generated__/TimeCalendarIcon.js';
+export { default as TimeForwardIcon } from './components/Icon/__generated__/TimeForwardIcon.js';
+export { default as TrainIcon } from './components/Icon/__generated__/TrainIcon.js';
+export { default as UserShieldIcon } from './components/Icon/__generated__/UserShieldIcon.js';
+export { default as VerifiedSealIcon } from './components/Icon/__generated__/VerifiedSealIcon.js';
+export { default as WrenchIcon } from './components/Icon/__generated__/WrenchIcon.js';
+export { useAccordionItemContext } from '@reach/accordion';
+export { default as LoadingIcon } from './components/Icon/__generated__/LoadingIcon.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -0,0 +1,135 @@
+{
+  "name": "@drivy/cobalt",
+  "version": "0.13.0",
+  "description": "Opinionated design system for Drivy's projects.",
+  "main": "src/index.js",
+  "types": "types/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "module": "src/index.js",
+  "license": "MIT",
+  "author": {
+    "name": "Tim Petricola",
+    "email": "tim@drivy.com",
+    "url": "https://github.com/TimPetricola"
+  },
+  "dependencies": {
+    "@juggle/resize-observer": "3.3.1",
+    "@reach/accordion": "0.16.1",
+    "@reach/alert": "0.16.0",
+    "@reach/combobox": "0.16.1",
+    "@reach/dialog": "0.16.0",
+    "@reach/portal": "0.16.0",
+    "@reach/slider": "0.16.0",
+    "@reach/tabs": "0.16.1",
+    "@reach/visually-hidden": "0.16.0",
+    "@react-spring/web": "9.2.5",
+    "@tippyjs/react": "4.2.5",
+    "classnames": "2.3.1",
+    "date-fns": "2.24.0",
+    "lodash.throttle": "4.1.1",
+    "nanoid": "3.1.28",
+    "postcss": "8.3.9",
+    "tailwindcss": "2.2.16",
+    "tippy.js": "6.3.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@drivy/babel-preset-app": "0.4.6",
+    "@drivy/eslint-config": "1.5.5",
+    "@drivy/prettier-config": "1.1.3",
+    "@drivy/stylelint-config": "1.0.13",
+    "@drivy/ts-config": "1.1.3",
+    "@percy/storybook": "3.3.1",
+    "@rollup/plugin-json": "4.1.0",
+    "@rushstack/eslint-patch": "1.0.7",
+    "@storybook/addon-essentials": "6.3.8",
+    "@storybook/addons": "6.3.8",
+    "@storybook/builder-webpack5": "6.4.0-alpha.33",
+    "@storybook/manager-webpack5": "6.4.0-alpha.33",
+    "@storybook/react": "6.3.8",
+    "@svgr/cli": "5.5.0",
+    "@testing-library/jest-dom": "5.14.1",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/react-hooks": "7.0.2",
+    "@types/classnames": "2.3.0",
+    "@types/jest": "27.0.2",
+    "@types/lodash.throttle": "4.1.6",
+    "@types/react": "17.0.27",
+    "autoprefixer": "10.3.7",
+    "core-js": "3.18.1",
+    "css-loader": "6.3.0",
+    "eslint": "7.32.0",
+    "jest": "27.2.4",
+    "np": "7.5.0",
+    "postcss-flexbugs-fixes": "5.0.2",
+    "postcss-loader": "6.1.1",
+    "prettier": "2.4.1",
+    "raw-loader": "4.0.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-test-renderer": "17.0.2",
+    "regenerator-runtime": "0.13.9",
+    "rollup": "2.58.0",
+    "rollup-plugin-copy": "3.4.0",
+    "rollup-plugin-postcss": "4.0.1",
+    "rollup-plugin-svgo": "1.1.0",
+    "rollup-plugin-typescript2": "0.30.0",
+    "sass": "1.42.1",
+    "sass-loader": "12.1.0",
+    "style-loader": "3.3.0",
+    "stylelint": "13.13.1",
+    "svgo": "2.7.0",
+    "ts-jest": "27.0.5",
+    "typescript": "4.4.3"
+  },
+  "scripts": {
+    "build": "./scripts/build.sh",
+    "build:dev": "yarn build && yalc publish dist/",
+    "build:publish": "yarn build && yarn np --contents dist",
+    "deploy": "./scripts/publishToBranch.sh",
+    "lint": "yarn lint:prettier && yarn lint:css && yarn lint:js",
+    "lint:prettier": "prettier --list-different \"src/**/*.scss\"",
+    "lint:css": "stylelint \"src/**/*.scss\"",
+    "lint:js": "eslint src/components --ext ts,tsx,js,jsx --max-warnings 0 ",
+    "scss:vars": "node -e 'console.log(require(\"./utils/tailwindcssThemeHelpers.js\").getFlattenedTheme())'",
+    "preicon": "git fetch --all --quiet && git pull --quiet && yarn",
+    "icon": "./scripts/processIcon.sh",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "build-storybook",
+    "build:icons": "./scripts/buildIcons.sh",
+    "test": "jest",
+    "percy": "build-storybook && percy-storybook --widths=320,1280",
+    "typecheck": "tsc",
+    "version": "cp package.json dist/package.json"
+  },
+  "keywords": [
+    "drivy",
+    "cobalt"
+  ],
+  "homepage": "https://github.com/drivy/cobalt",
+  "bugs": {
+    "url": "https://github.com/drivy/cobalt/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/drivy/cobalt.git"
+  },
+  "files": [
+    "tokens/**/*",
+    "**/*.{scss,css,d.ts,js,js.map,svg,png,woff,woff2}",
+    ".stylelintrc.js"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "resolutions": {
+    "@types/react": "17.0.27"
+  }
+}

package/styles/components/Accordion/index.scss

@@ -0,0 +1,83 @@
+@import "@reach/accordion/styles.css";
+
+.cobalt- {
+  &accordion {
+    width: 100%;
+  }
+
+  &accordion__header {
+    @include c-text-title-xs;
+
+    width: 100%;
+    display: flex;
+    padding: spacing(sm);
+    border: 0;
+
+    font-family: font-family(base);
+
+    cursor: cursor(pointer);
+
+    // Disable reach-ui styles
+    background: color(transparent);
+
+    &-content {
+      width: 100%;
+
+      text-align: left;
+    }
+
+    // Animated +/- icon
+    &-icon {
+      position: relative;
+
+      width: 14px;
+      height: 14px;
+      min-width: 14px;
+      min-height: 14px;
+      margin: auto;
+
+      &::before,
+      &::after {
+        position: absolute;
+
+        content: "";
+
+        background-color: color(graphite, light);
+
+        transition: transform 0.25s ease-out;
+      }
+      /* Vertical line */
+      &::before {
+        top: 0;
+        left: 50%;
+
+        width: 2px;
+        height: 100%;
+        margin-left: -1px;
+      }
+      /* horizontal line */
+      &::after {
+        top: 50%;
+        left: 0;
+
+        width: 100%;
+        height: 2px;
+        margin-top: -1px;
+      }
+
+      &--opened::before {
+        transform: rotate(270deg);
+      }
+
+      &--opened::after {
+        transform: rotate(360deg);
+      }
+    }
+  }
+
+  &accordion__panel {
+    // make the child margins affecting the panel height computing
+    overflow: auto;
+    border-top: border(grey);
+  }
+}

package/styles/components/Alerter/index.scss

@@ -0,0 +1,54 @@
+.cobalt- {
+  &alerts {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: zx(alert);
+
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    margin-top: spacing(sm);
+    pointer-events: none;
+
+    &--mobile {
+      align-items: center;
+    }
+  }
+
+  &alert {
+    @include c-text-body-md;
+    z-index: zx(alert);
+
+    display: inline-block;
+    padding: spacing(sm);
+    margin-bottom: spacing(sm);
+    margin-left: spacing(sm);
+    margin-right: spacing(sm);
+    min-width: 14rem;
+    max-width: 50rem;
+
+    color: color(white);
+
+    box-shadow: elevation(lg);
+    border-radius: border-radius(md);
+    background-color: color(graphite);
+    pointer-events: auto;
+
+    &__wrapper {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    &__icon {
+      flex: none;
+      margin: unset !important;
+    }
+
+    &__content {
+      margin-left: spacing(xs);
+    }
+  }
+}

package/styles/components/BasicCell/index.scss

@@ -0,0 +1,61 @@
+.cobalt- {
+  &BasicCell {
+    display: flex;
+    align-items: center;
+  }
+
+  &BasicCell__Main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  &BasicCell__Title {
+    @include text-style-title-tiny;
+  }
+
+  &BasicCell__Content {
+    @include text-style-body;
+    @include text-style--bodySubdued;
+  }
+
+  &BasicCell__Thumb {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    border-radius: 50%;
+
+    img {
+      display: block;
+      width: 44px;
+      height: 44px;
+    }
+  }
+
+  &BasicCell__LeftAddon {
+    padding-right: spacing(tight);
+  }
+
+  &BasicCell__RightAddonIcon {
+    padding-left: spacing(tight);
+    margin-left: auto;
+  }
+
+  &BasicCell--large {
+    .cobalt-BasicCell__Title {
+      @include text-style-title-small;
+      margin-bottom: spacing(unit);
+    }
+
+    .cobalt-BasicCell__Thumb {
+      img {
+        width: 64px;
+        height: 64px;
+      }
+    }
+  }
+}

package/styles/components/BulletList/index.scss

@@ -0,0 +1,32 @@
+.cobalt- {
+  &BulletListItem {
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child) {
+      margin-bottom: spacing(tight);
+    }
+
+    .cobalt-BulletList--iconPositionTop & {
+      align-items: flex-start;
+    }
+  }
+
+  &BulletListItem__Icon {
+    display: flex;
+    flex-shrink: 0;
+    margin-right: spacing(extra-tight);
+  }
+
+  &BulletListItem__Content {
+    svg {
+      vertical-align: middle;
+    }
+
+    svg,
+    use,
+    g {
+      fill: rgba(color(graphite), 0.5);
+    }
+  }
+}