@skyscanner/bpk-foundations-web 21.1.0 → 22.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/bpk-foundations-web",
-  "version": "21.1.0",
+  "version": "22.1.0",
   "description": "Common Backpack design tokens for colors, spacing, font, etc.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,8 +17,8 @@
     "tokens": "gulp"
   },
   "dependencies": {
-    "@skyscanner/bpk-foundations-common": "^21.1.0",
+    "@skyscanner/bpk-foundations-common": "^22.1.0",
     "color": "^5.0.0"
   },
-  "gitHead": "7aa9bed74509741e4013c50d88658c2d7785514d"
+  "gitHead": "23551b231a7cb5277da41a8e9165a0eb32832065"
 }

package/tokens/base.common.js

@@ -19,9 +19,6 @@
  */
 
 module.exports = {
-  colorWhite: "rgb(255, 255, 255)",
-  colorSkyBlue: "rgb(0, 98, 227)",
-  colorBlack: "rgb(1, 9, 19)",
   privateBadgeBackgroundNormalDay: "rgb(239, 243, 248)",
   privateBadgeBackgroundNormalNight: "rgb(36, 51, 70)",
   canvasDay: "rgb(255, 255, 255)",
@@ -70,8 +67,10 @@ module.exports = {
   textLinkDay: "rgb(0, 98, 227)",
   textHeroDay: "rgb(0, 98, 227)",
   textPrimaryNight: "rgb(255, 255, 255)",
+  textSuccessNight: "rgb(98, 241, 198)",
   textDisabledDay: "rgba(0, 0, 0, 0.2)",
   textPrimaryDay: "rgb(22, 22, 22)",
+  textSuccessDay: "rgb(12, 131, 138)",
   textErrorNight: "rgb(255, 100, 156)",
   textErrorDay: "rgb(231, 8, 102)",
   textPrimaryInverseNight: "rgb(1, 9, 19)",
@@ -218,6 +217,7 @@ module.exports = {
   colorMonteverde: "rgb(0, 166, 152)",
   backgroundElevation03DarkColor: "rgb(58, 58, 60)",
   colorSkyGrayTint01: "rgb(68, 69, 96)",
+  colorBlack: "rgb(1, 9, 19)",
   backgroundElevation02DarkColor: "rgb(44, 44, 46)",
   colorSkyGrayTint02: "rgb(104, 105, 127)",
   lineDarkColor: "rgb(72, 72, 74)",
@@ -242,6 +242,7 @@ module.exports = {
   textPrimaryLightColor: "rgb(17, 18, 54)",
   colorBlackTint04: "rgb(72, 72, 74)",
   backgroundAlternativeSecondaryLightColor: "rgb(255, 255, 255)",
+  colorWhite: "rgb(255, 255, 255)",
   colorBlackTint05: "rgb(99, 99, 102)",
   colorBlackTint06: "rgb(142, 142, 147)",
   colorPanjin: "rgb(209, 67, 91)",
@@ -254,6 +255,7 @@ module.exports = {
   backgroundElevation02LightColor: "rgb(255, 255, 255)",
   backgroundElevation03LightColor: "rgb(255, 255, 255)",
   colorPetra: "rgb(255, 171, 149)",
+  colorSkyBlue: "rgb(0, 98, 227)",
   textTertiaryDarkColor: "rgb(142, 142, 147)",
   backgroundTertiaryDarkColor: "rgb(44, 44, 46)",
   backgroundSecondaryDarkColor: "rgb(29, 27, 32)",
@@ -280,13 +282,15 @@ module.exports = {
   durationXs: "50ms",
   durationSm: "200ms",
   durationBase: "400ms",
-  borderRadiusXs: ".25rem",
-  borderRadiusSm: ".5rem",
-  borderRadiusMd: ".75rem",
-  borderRadiusLg: "1.5rem",
-  borderRadiusXl: "2.5rem",
   borderSizeSm: "1px",
   borderSizeLg: "2px",
+  borderRadiusFull: "100%",
+  borderRadiusXl: "2.5rem",
+  borderRadiusMd: ".75rem",
+  borderRadiusNavTabs: "1.125rem",
+  borderRadiusSm: ".5rem",
+  borderRadiusXs: ".25rem",
+  borderRadiusLg: "1.5rem",
   borderSizeXl: "3px",
   boxShadowSm: "0px 1px 3px 0px rgba(37,32,31,.3)",
   boxShadowLg: "0px 4px 14px 0px rgba(37,32,31,.25)",

package/tokens/base.default.scss

@@ -17,12 +17,6 @@
  * limitations under the License.
  * 
  */
-/// @group colors
-$bpk-color-white: rgb(255, 255, 255) !default;
-/// @group colors
-$bpk-color-sky-blue: rgb(0, 98, 227) !default;
-/// @group colors
-$bpk-color-black: rgb(1, 9, 19) !default;
 /// @group badge-colors
 $bpk-private-badge-background-normal-day: rgb(239, 243, 248) !default;
 /// @group badge-colors
@@ -120,10 +114,14 @@ $bpk-text-hero-day: rgb(0, 98, 227) !default;
 /// @group text-colors
 $bpk-text-primary-night: rgb(255, 255, 255) !default;
 /// @group text-colors
+$bpk-text-success-night: rgb(98, 241, 198) !default;
+/// @group text-colors
 $bpk-text-disabled-day: rgba(0, 0, 0, 0.2) !default;
 /// @group text-colors
 $bpk-text-primary-day: rgb(22, 22, 22) !default;
 /// @group text-colors
+$bpk-text-success-day: rgb(12, 131, 138) !default;
+/// @group text-colors
 $bpk-text-error-night: rgb(255, 100, 156) !default;
 /// @group text-colors
 $bpk-text-error-day: rgb(231, 8, 102) !default;
@@ -415,6 +413,8 @@ $bpk-color-monteverde: rgb(0, 166, 152) !default;
 $bpk-background-elevation-03-dark-color: rgb(58, 58, 60) !default;
 /// @group colors
 $bpk-color-sky-gray-tint-01: rgb(68, 69, 96) !default;
+/// @group colors
+$bpk-color-black: rgb(1, 9, 19) !default;
 /// @group text-colors
 $bpk-background-elevation-02-dark-color: rgb(44, 44, 46) !default;
 /// @group colors
@@ -464,6 +464,8 @@ $bpk-color-black-tint-04: rgb(72, 72, 74) !default;
 /// @group colors
 $bpk-background-alternative-secondary-light-color: rgb(255, 255, 255) !default;
 /// @group colors
+$bpk-color-white: rgb(255, 255, 255) !default;
+/// @group colors
 $bpk-color-black-tint-05: rgb(99, 99, 102) !default;
 /// @group colors
 $bpk-color-black-tint-06: rgb(142, 142, 147) !default;
@@ -487,6 +489,8 @@ $bpk-background-elevation-02-light-color: rgb(255, 255, 255) !default;
 $bpk-background-elevation-03-light-color: rgb(255, 255, 255) !default;
 /// @group colors
 $bpk-color-petra: rgb(255, 171, 149) !default;
+/// @group colors
+$bpk-color-sky-blue: rgb(0, 98, 227) !default;
 /// @group text-colors
 $bpk-text-tertiary-dark-color: rgb(142, 142, 147) !default;
 /// @group colors
@@ -539,20 +543,24 @@ $bpk-duration-xs: 50ms !default;
 $bpk-duration-sm: 200ms !default;
 /// @group animations
 $bpk-duration-base: 400ms !default;
+/// @group borders
+$bpk-border-size-sm: 1px !default;
+/// @group borders
+$bpk-border-size-lg: 2px !default;
 /// @group radii
-$bpk-border-radius-xs: .25rem !default;
+$bpk-border-radius-full: 100% !default;
 /// @group radii
-$bpk-border-radius-sm: .5rem !default;
+$bpk-border-radius-xl: 2.5rem !default;
 /// @group radii
 $bpk-border-radius-md: .75rem !default;
 /// @group radii
-$bpk-border-radius-lg: 1.5rem !default;
+$bpk-border-radius-nav-tabs: 1.125rem !default;
 /// @group radii
-$bpk-border-radius-xl: 2.5rem !default;
-/// @group borders
-$bpk-border-size-sm: 1px !default;
-/// @group borders
-$bpk-border-size-lg: 2px !default;
+$bpk-border-radius-sm: .5rem !default;
+/// @group radii
+$bpk-border-radius-xs: .25rem !default;
+/// @group radii
+$bpk-border-radius-lg: 1.5rem !default;
 /// @group borders
 $bpk-border-size-xl: 3px !default;
 /// @group box-shadows

package/tokens/base.es6.d.ts

@@ -17,9 +17,6 @@
  * limitations under the License.
  * 
  */
-export declare const colorWhite = "rgb(255, 255, 255)" as const;
-export declare const colorSkyBlue = "rgb(0, 98, 227)" as const;
-export declare const colorBlack = "rgb(1, 9, 19)" as const;
 export declare const privateBadgeBackgroundNormalDay = "rgb(239, 243, 248)" as const;
 export declare const privateBadgeBackgroundNormalNight = "rgb(36, 51, 70)" as const;
 export declare const canvasDay = "rgb(255, 255, 255)" as const;
@@ -68,8 +65,10 @@ export declare const textDisabledNight = "rgba(255, 255, 255, 0.2)" as const;
 export declare const textLinkDay = "rgb(0, 98, 227)" as const;
 export declare const textHeroDay = "rgb(0, 98, 227)" as const;
 export declare const textPrimaryNight = "rgb(255, 255, 255)" as const;
+export declare const textSuccessNight = "rgb(98, 241, 198)" as const;
 export declare const textDisabledDay = "rgba(0, 0, 0, 0.2)" as const;
 export declare const textPrimaryDay = "rgb(22, 22, 22)" as const;
+export declare const textSuccessDay = "rgb(12, 131, 138)" as const;
 export declare const textErrorNight = "rgb(255, 100, 156)" as const;
 export declare const textErrorDay = "rgb(231, 8, 102)" as const;
 export declare const textPrimaryInverseNight = "rgb(1, 9, 19)" as const;
@@ -216,6 +215,7 @@ export declare const colorValensole = "rgb(165, 155, 200)" as const;
 export declare const colorMonteverde = "rgb(0, 166, 152)" as const;
 export declare const backgroundElevation03DarkColor = "rgb(58, 58, 60)" as const;
 export declare const colorSkyGrayTint01 = "rgb(68, 69, 96)" as const;
+export declare const colorBlack = "rgb(1, 9, 19)" as const;
 export declare const backgroundElevation02DarkColor = "rgb(44, 44, 46)" as const;
 export declare const colorSkyGrayTint02 = "rgb(104, 105, 127)" as const;
 export declare const lineDarkColor = "rgb(72, 72, 74)" as const;
@@ -240,6 +240,7 @@ export declare const colorBlackTint03 = "rgb(58, 58, 60)" as const;
 export declare const textPrimaryLightColor = "rgb(17, 18, 54)" as const;
 export declare const colorBlackTint04 = "rgb(72, 72, 74)" as const;
 export declare const backgroundAlternativeSecondaryLightColor = "rgb(255, 255, 255)" as const;
+export declare const colorWhite = "rgb(255, 255, 255)" as const;
 export declare const colorBlackTint05 = "rgb(99, 99, 102)" as const;
 export declare const colorBlackTint06 = "rgb(142, 142, 147)" as const;
 export declare const colorPanjin = "rgb(209, 67, 91)" as const;
@@ -252,6 +253,7 @@ export declare const lineLightColor = "rgb(205, 205, 215)" as const;
 export declare const backgroundElevation02LightColor = "rgb(255, 255, 255)" as const;
 export declare const backgroundElevation03LightColor = "rgb(255, 255, 255)" as const;
 export declare const colorPetra = "rgb(255, 171, 149)" as const;
+export declare const colorSkyBlue = "rgb(0, 98, 227)" as const;
 export declare const textTertiaryDarkColor = "rgb(142, 142, 147)" as const;
 export declare const backgroundTertiaryDarkColor = "rgb(44, 44, 46)" as const;
 export declare const backgroundSecondaryDarkColor = "rgb(29, 27, 32)" as const;
@@ -278,13 +280,15 @@ export declare const colorSkyBlueShade02 = "rgb(4, 39, 89)" as const;
 export declare const durationXs = "50ms" as const;
 export declare const durationSm = "200ms" as const;
 export declare const durationBase = "400ms" as const;
-export declare const borderRadiusXs = ".25rem" as const;
-export declare const borderRadiusSm = ".5rem" as const;
-export declare const borderRadiusMd = ".75rem" as const;
-export declare const borderRadiusLg = "1.5rem" as const;
-export declare const borderRadiusXl = "2.5rem" as const;
 export declare const borderSizeSm = "1px" as const;
 export declare const borderSizeLg = "2px" as const;
+export declare const borderRadiusFull = "100%" as const;
+export declare const borderRadiusXl = "2.5rem" as const;
+export declare const borderRadiusMd = ".75rem" as const;
+export declare const borderRadiusNavTabs = "1.125rem" as const;
+export declare const borderRadiusSm = ".5rem" as const;
+export declare const borderRadiusXs = ".25rem" as const;
+export declare const borderRadiusLg = "1.5rem" as const;
 export declare const borderSizeXl = "3px" as const;
 export declare const boxShadowSm = "0px 1px 3px 0px rgba(37,32,31,.3)" as const;
 export declare const boxShadowLg = "0px 4px 14px 0px rgba(37,32,31,.25)" as const;
@@ -540,15 +544,13 @@ privateChipOnDarkOnDismissIconDay,
 privateChipOnDarkOnDismissIconNight,
 } as const;
 export declare const colors = {
-colorWhite,
-colorSkyBlue,
-colorBlack,
 colorSkyBlueShade03,
 colorPrimaryGradientLight,
 colorErfoud,
 colorValensole,
 colorMonteverde,
 colorSkyGrayTint01,
+colorBlack,
 colorSkyGrayTint02,
 lineDarkColor,
 colorSagano,
@@ -567,6 +569,7 @@ backgroundDarkColor,
 colorBlackTint03,
 colorBlackTint04,
 backgroundAlternativeSecondaryLightColor,
+colorWhite,
 colorBlackTint05,
 colorBlackTint06,
 colorPanjin,
@@ -576,6 +579,7 @@ colorGlencoe,
 colorTochigi,
 lineLightColor,
 colorPetra,
+colorSkyBlue,
 backgroundTertiaryDarkColor,
 backgroundSecondaryDarkColor,
 backgroundAlternativeLightColor,
@@ -732,11 +736,13 @@ export declare const panels = {
 panelBorderColor,
 } as const;
 export declare const radii = {
-borderRadiusXs,
-borderRadiusSm,
+borderRadiusFull,
+borderRadiusXl,
 borderRadiusMd,
+borderRadiusNavTabs,
+borderRadiusSm,
+borderRadiusXs,
 borderRadiusLg,
-borderRadiusXl,
 } as const;
 export declare const ratingBarColors = {
 privateBarTrackDefaultDay,
@@ -815,8 +821,10 @@ textDisabledNight,
 textLinkDay,
 textHeroDay,
 textPrimaryNight,
+textSuccessNight,
 textDisabledDay,
 textPrimaryDay,
+textSuccessDay,
 textErrorNight,
 textErrorDay,
 textPrimaryInverseNight,

package/tokens/base.es6.js

@@ -17,9 +17,6 @@
  * limitations under the License.
  * 
  */
-export const colorWhite = "rgb(255, 255, 255)";
-export const colorSkyBlue = "rgb(0, 98, 227)";
-export const colorBlack = "rgb(1, 9, 19)";
 export const privateBadgeBackgroundNormalDay = "rgb(239, 243, 248)";
 export const privateBadgeBackgroundNormalNight = "rgb(36, 51, 70)";
 export const canvasDay = "rgb(255, 255, 255)";
@@ -68,8 +65,10 @@ export const textDisabledNight = "rgba(255, 255, 255, 0.2)";
 export const textLinkDay = "rgb(0, 98, 227)";
 export const textHeroDay = "rgb(0, 98, 227)";
 export const textPrimaryNight = "rgb(255, 255, 255)";
+export const textSuccessNight = "rgb(98, 241, 198)";
 export const textDisabledDay = "rgba(0, 0, 0, 0.2)";
 export const textPrimaryDay = "rgb(22, 22, 22)";
+export const textSuccessDay = "rgb(12, 131, 138)";
 export const textErrorNight = "rgb(255, 100, 156)";
 export const textErrorDay = "rgb(231, 8, 102)";
 export const textPrimaryInverseNight = "rgb(1, 9, 19)";
@@ -216,6 +215,7 @@ export const colorValensole = "rgb(165, 155, 200)";
 export const colorMonteverde = "rgb(0, 166, 152)";
 export const backgroundElevation03DarkColor = "rgb(58, 58, 60)";
 export const colorSkyGrayTint01 = "rgb(68, 69, 96)";
+export const colorBlack = "rgb(1, 9, 19)";
 export const backgroundElevation02DarkColor = "rgb(44, 44, 46)";
 export const colorSkyGrayTint02 = "rgb(104, 105, 127)";
 export const lineDarkColor = "rgb(72, 72, 74)";
@@ -240,6 +240,7 @@ export const colorBlackTint03 = "rgb(58, 58, 60)";
 export const textPrimaryLightColor = "rgb(17, 18, 54)";
 export const colorBlackTint04 = "rgb(72, 72, 74)";
 export const backgroundAlternativeSecondaryLightColor = "rgb(255, 255, 255)";
+export const colorWhite = "rgb(255, 255, 255)";
 export const colorBlackTint05 = "rgb(99, 99, 102)";
 export const colorBlackTint06 = "rgb(142, 142, 147)";
 export const colorPanjin = "rgb(209, 67, 91)";
@@ -252,6 +253,7 @@ export const lineLightColor = "rgb(205, 205, 215)";
 export const backgroundElevation02LightColor = "rgb(255, 255, 255)";
 export const backgroundElevation03LightColor = "rgb(255, 255, 255)";
 export const colorPetra = "rgb(255, 171, 149)";
+export const colorSkyBlue = "rgb(0, 98, 227)";
 export const textTertiaryDarkColor = "rgb(142, 142, 147)";
 export const backgroundTertiaryDarkColor = "rgb(44, 44, 46)";
 export const backgroundSecondaryDarkColor = "rgb(29, 27, 32)";
@@ -278,13 +280,15 @@ export const colorSkyBlueShade02 = "rgb(4, 39, 89)";
 export const durationXs = "50ms";
 export const durationSm = "200ms";
 export const durationBase = "400ms";
-export const borderRadiusXs = ".25rem";
-export const borderRadiusSm = ".5rem";
-export const borderRadiusMd = ".75rem";
-export const borderRadiusLg = "1.5rem";
-export const borderRadiusXl = "2.5rem";
 export const borderSizeSm = "1px";
 export const borderSizeLg = "2px";
+export const borderRadiusFull = "100%";
+export const borderRadiusXl = "2.5rem";
+export const borderRadiusMd = ".75rem";
+export const borderRadiusNavTabs = "1.125rem";
+export const borderRadiusSm = ".5rem";
+export const borderRadiusXs = ".25rem";
+export const borderRadiusLg = "1.5rem";
 export const borderSizeXl = "3px";
 export const boxShadowSm = "0px 1px 3px 0px rgba(37,32,31,.3)";
 export const boxShadowLg = "0px 4px 14px 0px rgba(37,32,31,.25)";
@@ -540,15 +544,13 @@ privateChipOnDarkOnDismissIconDay,
 privateChipOnDarkOnDismissIconNight,
 };
 export const colors = {
-colorWhite,
-colorSkyBlue,
-colorBlack,
 colorSkyBlueShade03,
 colorPrimaryGradientLight,
 colorErfoud,
 colorValensole,
 colorMonteverde,
 colorSkyGrayTint01,
+colorBlack,
 colorSkyGrayTint02,
 lineDarkColor,
 colorSagano,
@@ -567,6 +569,7 @@ backgroundDarkColor,
 colorBlackTint03,
 colorBlackTint04,
 backgroundAlternativeSecondaryLightColor,
+colorWhite,
 colorBlackTint05,
 colorBlackTint06,
 colorPanjin,
@@ -576,6 +579,7 @@ colorGlencoe,
 colorTochigi,
 lineLightColor,
 colorPetra,
+colorSkyBlue,
 backgroundTertiaryDarkColor,
 backgroundSecondaryDarkColor,
 backgroundAlternativeLightColor,
@@ -732,11 +736,13 @@ export const panels = {
 panelBorderColor,
 };
 export const radii = {
-borderRadiusXs,
-borderRadiusSm,
+borderRadiusFull,
+borderRadiusXl,
 borderRadiusMd,
+borderRadiusNavTabs,
+borderRadiusSm,
+borderRadiusXs,
 borderRadiusLg,
-borderRadiusXl,
 };
 export const ratingBarColors = {
 privateBarTrackDefaultDay,
@@ -815,8 +821,10 @@ textDisabledNight,
 textLinkDay,
 textHeroDay,
 textPrimaryNight,
+textSuccessNight,
 textDisabledDay,
 textPrimaryDay,
+textSuccessDay,
 textErrorNight,
 textErrorDay,
 textPrimaryInverseNight,

package/tokens/base.raw.json

@@ -300,6 +300,9 @@
     "LETTER_SPACING_TIGHT": {
       "value": "-0.02em"
     },
+    "BORDER_RADIUS_FULL": {
+      "value": "100%"
+    },
     "FONT_SIZE_LG": {
       "value": "1.25rem"
     },
@@ -384,6 +387,9 @@
     "SPACING_MD": {
       "value": ".5rem"
     },
+    "BORDER_RADIUS_NAV_TABS": {
+      "value": "1.125rem"
+    },
     "BORDER_RADIUS_SM": {
       "value": ".5rem"
     },
@@ -467,27 +473,6 @@
     }
   },
   "props": {
-    "COLOR_WHITE": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(255, 255, 255)",
-      "originalValue": "{!WHITE}",
-      "name": "COLOR_WHITE"
-    },
-    "COLOR_SKY_BLUE": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(0, 98, 227)",
-      "originalValue": "{!SKY_BLUE}",
-      "name": "COLOR_SKY_BLUE"
-    },
-    "COLOR_BLACK": {
-      "type": "color",
-      "category": "colors",
-      "value": "rgb(1, 9, 19)",
-      "originalValue": "{!BLACK}",
-      "name": "COLOR_BLACK"
-    },
     "PRIVATE_BADGE_BACKGROUND_NORMAL_DAY": {
       "type": "color",
       "category": "badge-colors",
@@ -824,6 +809,13 @@
       "originalValue": "{!WHITE}",
       "name": "TEXT_PRIMARY_NIGHT"
     },
+    "TEXT_SUCCESS_NIGHT": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "rgb(98, 241, 198)",
+      "originalValue": "{!NIGHT_GREEN_SPOT}",
+      "name": "TEXT_SUCCESS_NIGHT"
+    },
     "TEXT_DISABLED_DAY": {
       "type": "color",
       "category": "text-colors",
@@ -838,6 +830,13 @@
       "originalValue": "{!CHARCOAL}",
       "name": "TEXT_PRIMARY_DAY"
     },
+    "TEXT_SUCCESS_DAY": {
+      "type": "color",
+      "category": "text-colors",
+      "value": "rgb(12, 131, 138)",
+      "originalValue": "{!GREEN_SPOT}",
+      "name": "TEXT_SUCCESS_DAY"
+    },
     "TEXT_ERROR_NIGHT": {
       "type": "color",
       "category": "text-colors",
@@ -1867,6 +1866,13 @@
       "originalValue": "{!SKY_GRAY_TINT_01}",
       "name": "COLOR_SKY_GRAY_TINT_01"
     },
+    "COLOR_BLACK": {
+      "type": "color",
+      "category": "colors",
+      "value": "rgb(1, 9, 19)",
+      "originalValue": "#010913",
+      "name": "COLOR_BLACK"
+    },
     "BACKGROUND_ELEVATION_02_DARK_COLOR": {
       "type": "color",
       "category": "text-colors",
@@ -2059,6 +2065,13 @@
       "originalValue": "{!WHITE}",
       "name": "BACKGROUND_ALTERNATIVE_SECONDARY_LIGHT_COLOR"
     },
+    "COLOR_WHITE": {
+      "type": "color",
+      "category": "colors",
+      "value": "rgb(255, 255, 255)",
+      "originalValue": "#ffffff",
+      "name": "COLOR_WHITE"
+    },
     "COLOR_BLACK_TINT_05": {
       "value": "rgb(99, 99, 102)",
       "deprecated": true,
@@ -2155,6 +2168,13 @@
       "originalValue": "{!PETRA}",
       "name": "COLOR_PETRA"
     },
+    "COLOR_SKY_BLUE": {
+      "type": "color",
+      "category": "colors",
+      "value": "rgb(0, 98, 227)",
+      "originalValue": "#0062e3",
+      "name": "COLOR_SKY_BLUE"
+    },
     "TEXT_TERTIARY_DARK_COLOR": {
       "value": "rgb(142, 142, 147)",
       "deprecated": true,
@@ -2360,19 +2380,33 @@
       "originalValue": "{!ANIMATION_DURATION_BASE}",
       "name": "DURATION_BASE"
     },
-    "BORDER_RADIUS_XS": {
+    "BORDER_SIZE_SM": {
       "type": "size",
-      "value": ".25rem",
+      "value": "1px",
+      "category": "borders",
+      "originalValue": "{!BORDER_SIZE_SM}",
+      "name": "BORDER_SIZE_SM"
+    },
+    "BORDER_SIZE_LG": {
+      "type": "size",
+      "value": "2px",
+      "category": "borders",
+      "originalValue": "{!BORDER_SIZE_LG}",
+      "name": "BORDER_SIZE_LG"
+    },
+    "BORDER_RADIUS_FULL": {
+      "type": "size",
+      "value": "100%",
       "category": "radii",
-      "originalValue": "{!BORDER_RADIUS_XS}",
-      "name": "BORDER_RADIUS_XS"
+      "originalValue": "{!BORDER_RADIUS_FULL}",
+      "name": "BORDER_RADIUS_FULL"
     },
-    "BORDER_RADIUS_SM": {
+    "BORDER_RADIUS_XL": {
       "type": "size",
-      "value": ".5rem",
+      "value": "2.5rem",
       "category": "radii",
-      "originalValue": "{!BORDER_RADIUS_SM}",
-      "name": "BORDER_RADIUS_SM"
+      "originalValue": "{!BORDER_RADIUS_XL}",
+      "name": "BORDER_RADIUS_XL"
     },
     "BORDER_RADIUS_MD": {
       "type": "size",
@@ -2381,33 +2415,33 @@
       "originalValue": "{!BORDER_RADIUS_MD}",
       "name": "BORDER_RADIUS_MD"
     },
-    "BORDER_RADIUS_LG": {
+    "BORDER_RADIUS_NAV_TABS": {
       "type": "size",
-      "value": "1.5rem",
+      "value": "1.125rem",
       "category": "radii",
-      "originalValue": "{!BORDER_RADIUS_LG}",
-      "name": "BORDER_RADIUS_LG"
+      "originalValue": "{!BORDER_RADIUS_NAV_TABS}",
+      "name": "BORDER_RADIUS_NAV_TABS"
     },
-    "BORDER_RADIUS_XL": {
+    "BORDER_RADIUS_SM": {
       "type": "size",
-      "value": "2.5rem",
+      "value": ".5rem",
       "category": "radii",
-      "originalValue": "{!BORDER_RADIUS_XL}",
-      "name": "BORDER_RADIUS_XL"
+      "originalValue": "{!BORDER_RADIUS_SM}",
+      "name": "BORDER_RADIUS_SM"
     },
-    "BORDER_SIZE_SM": {
+    "BORDER_RADIUS_XS": {
       "type": "size",
-      "value": "1px",
-      "category": "borders",
-      "originalValue": "{!BORDER_SIZE_SM}",
-      "name": "BORDER_SIZE_SM"
+      "value": ".25rem",
+      "category": "radii",
+      "originalValue": "{!BORDER_RADIUS_XS}",
+      "name": "BORDER_RADIUS_XS"
     },
-    "BORDER_SIZE_LG": {
+    "BORDER_RADIUS_LG": {
       "type": "size",
-      "value": "2px",
-      "category": "borders",
-      "originalValue": "{!BORDER_SIZE_LG}",
-      "name": "BORDER_SIZE_LG"
+      "value": "1.5rem",
+      "category": "radii",
+      "originalValue": "{!BORDER_RADIUS_LG}",
+      "name": "BORDER_RADIUS_LG"
     },
     "BORDER_SIZE_XL": {
       "type": "size",

package/tokens/base.scss

@@ -17,12 +17,6 @@
  * limitations under the License.
  * 
  */
-/// @group colors
-$bpk-color-white: rgb(255, 255, 255);
-/// @group colors
-$bpk-color-sky-blue: rgb(0, 98, 227);
-/// @group colors
-$bpk-color-black: rgb(1, 9, 19);
 /// @group badge-colors
 $bpk-private-badge-background-normal-day: rgb(239, 243, 248);
 /// @group badge-colors
@@ -120,10 +114,14 @@ $bpk-text-hero-day: rgb(0, 98, 227);
 /// @group text-colors
 $bpk-text-primary-night: rgb(255, 255, 255);
 /// @group text-colors
+$bpk-text-success-night: rgb(98, 241, 198);
+/// @group text-colors
 $bpk-text-disabled-day: rgba(0, 0, 0, 0.2);
 /// @group text-colors
 $bpk-text-primary-day: rgb(22, 22, 22);
 /// @group text-colors
+$bpk-text-success-day: rgb(12, 131, 138);
+/// @group text-colors
 $bpk-text-error-night: rgb(255, 100, 156);
 /// @group text-colors
 $bpk-text-error-day: rgb(231, 8, 102);
@@ -415,6 +413,8 @@ $bpk-color-monteverde: rgb(0, 166, 152);
 $bpk-background-elevation-03-dark-color: rgb(58, 58, 60);
 /// @group colors
 $bpk-color-sky-gray-tint-01: rgb(68, 69, 96);
+/// @group colors
+$bpk-color-black: rgb(1, 9, 19);
 /// @group text-colors
 $bpk-background-elevation-02-dark-color: rgb(44, 44, 46);
 /// @group colors
@@ -464,6 +464,8 @@ $bpk-color-black-tint-04: rgb(72, 72, 74);
 /// @group colors
 $bpk-background-alternative-secondary-light-color: rgb(255, 255, 255);
 /// @group colors
+$bpk-color-white: rgb(255, 255, 255);
+/// @group colors
 $bpk-color-black-tint-05: rgb(99, 99, 102);
 /// @group colors
 $bpk-color-black-tint-06: rgb(142, 142, 147);
@@ -487,6 +489,8 @@ $bpk-background-elevation-02-light-color: rgb(255, 255, 255);
 $bpk-background-elevation-03-light-color: rgb(255, 255, 255);
 /// @group colors
 $bpk-color-petra: rgb(255, 171, 149);
+/// @group colors
+$bpk-color-sky-blue: rgb(0, 98, 227);
 /// @group text-colors
 $bpk-text-tertiary-dark-color: rgb(142, 142, 147);
 /// @group colors
@@ -539,20 +543,24 @@ $bpk-duration-xs: 50ms;
 $bpk-duration-sm: 200ms;
 /// @group animations
 $bpk-duration-base: 400ms;
+/// @group borders
+$bpk-border-size-sm: 1px;
+/// @group borders
+$bpk-border-size-lg: 2px;
 /// @group radii
-$bpk-border-radius-xs: .25rem;
+$bpk-border-radius-full: 100%;
 /// @group radii
-$bpk-border-radius-sm: .5rem;
+$bpk-border-radius-xl: 2.5rem;
 /// @group radii
 $bpk-border-radius-md: .75rem;
 /// @group radii
-$bpk-border-radius-lg: 1.5rem;
+$bpk-border-radius-nav-tabs: 1.125rem;
 /// @group radii
-$bpk-border-radius-xl: 2.5rem;
-/// @group borders
-$bpk-border-size-sm: 1px;
-/// @group borders
-$bpk-border-size-lg: 2px;
+$bpk-border-radius-sm: .5rem;
+/// @group radii
+$bpk-border-radius-xs: .25rem;
+/// @group radii
+$bpk-border-radius-lg: 1.5rem;
 /// @group borders
 $bpk-border-size-xl: 3px;
 /// @group box-shadows