@codecademy/gamut
68.5.068.5.1-alpha.0ee3d6.0
−
Removed (1 files)
~
Modified (6 files)
Index: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,16 +1,16 @@
{
"name": "@codecademy/gamut",
"description": "Styleguide & Component library for Codecademy",
- "version": "68.5.0",
+ "version": "68.5.1-alpha.0ee3d6.0",
"author": "Codecademy Engineering <[email protected]>",
"dependencies": {
- "@codecademy/gamut-icons": "9.57.4",
- "@codecademy/gamut-illustrations": "0.58.10",
- "@codecademy/gamut-patterns": "0.10.29",
- "@codecademy/gamut-styles": "17.14.0",
- "@codecademy/variance": "0.26.1",
- "@formatjs/intl-locale": "^5.3.1",
+ "@codecademy/gamut-icons": "9.57.5-alpha.0ee3d6.0",
+ "@codecademy/gamut-illustrations": "0.58.11-alpha.0ee3d6.0",
+ "@codecademy/gamut-patterns": "0.10.30-alpha.0ee3d6.0",
+ "@codecademy/gamut-styles": "17.14.1-alpha.0ee3d6.0",
+ "@codecademy/variance": "0.26.2-alpha.0ee3d6.0",
+ "@formatjs/intl-locale": "5.3.1",
"@react-aria/interactions": "3.25.0",
"@types/marked": "^4.0.8",
"@vidstack/react": "^1.12.12",
"classnames": "^2.2.5",Index: package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/index.module.scss
===================================================================
--- package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/index.module.scss
+++ package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/index.module.scss
@@ -1,8 +1,7 @@
@use "sass:color";
@use "variables";
@use "mixins";
-@use "~@codecademy/gamut-styles/utils" as *;
//
// Base styles
//
@@ -10,9 +9,10 @@
align-items: center;
display: inline-flex;
justify-content: center;
font-weight: variables.$btn-font-weight;
- @include font-smoothing;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
border: 1px solid transparent;
border-radius: variables.$btn-border-radius;
user-select: none;
@include mixins.button-size(
@@ -32,13 +32,13 @@
}
@each $name, $color in variables.$btn-swatches {
@if $name == "brand-yellow" {
- @include mixins.button-variants($name, $color-black, $color);
+ @include mixins.button-variants($name, variables.$color-black, $color);
} @else if color.channel(color.to-space($color, hsl), "lightness") > 68 {
- @include mixins.button-variants($name, $color-black, $color);
+ @include mixins.button-variants($name, variables.$color-black, $color);
} @else {
- @include mixins.button-variants($name, $color-white, $color);
+ @include mixins.button-variants($name, variables.$color-white, $color);
}
}
.round {Index: package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scss
===================================================================
--- package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scss
+++ package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scss
@@ -1,15 +1,14 @@
@use "sass:color";
-@use "~@codecademy/gamut-styles/utils" as *;
@use "variables";
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@mixin button-variant($color, $background, $border: transparent) {
- $active-background: color.mix($color-black, $background);
+ $active-background: color.mix(variables.$color-black, $background);
@if $border == transparent {
$active-border: transparent;
$active-border-hover: transparent;
@@ -23,9 +22,9 @@
box-shadow: 0 2px 4px variables.$btn-box-shadow-color;
}
&:focus-visible {
- box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $background;
+ box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $background;
}
&:focus-visible,
&:hover {
@@ -59,9 +58,9 @@
box-shadow: none;
}
&:focus-visible {
- box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color;
+ box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $color;
}
&:disabled {
color: variables.$btn-disabled-color;
@@ -97,9 +96,10 @@
@content;
}
.link-#{$name} {
font-weight: bold;
- @include font-smoothing;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
color: $background;
text-decoration: underline;
&:disabled {Index: package/dist/AccordionButtonDeprecated/styles.module.scss
===================================================================
--- package/dist/AccordionButtonDeprecated/styles.module.scss
+++ package/dist/AccordionButtonDeprecated/styles.module.scss
@@ -1,31 +1,29 @@
-@use "~@codecademy/gamut-styles/utils" as *;
-
.accordionButton {
align-items: center;
display: flex;
justify-content: space-between;
padding: 0.375rem 1rem;
width: 100%;
&.blue {
- color: $color-blue-200;
+ color: #a5befa;
}
&.yellow {
- background-color: $color-yellow-200;
- border: solid $color-yellow-400;
+ background-color: #fff2b3;
+ border: solid #ffe359;
border-width: 1px 0;
font-weight: normal;
transition: background-color 0.15s ease-in-out;
&:focus-visible {
- border-color: $color-yellow-800;
+ border-color: #b37620;
}
&:focus,
&:hover {
- background-color: $color-yellow-300;
+ background-color: #ffec8c;
}
}
&.large {
@@ -39,9 +37,9 @@
.expansionIcon {
margin-left: 1rem;
}
- @include md-viewport {
+ @media only screen and (min-width: 64rem) {
font-size: 1.75rem;
}
}
}Index: package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/variables.scss
===================================================================
--- package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/variables.scss
+++ package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/variables.scss
@@ -1,26 +1,24 @@
-@use "~@codecademy/gamut-styles/utils" as *;
-
-$btn-padding-x: px-rem(16) !default;
+$btn-padding-x: 1rem !default;
$btn-padding-y: 0.375rem !default;
$btn-font-weight: bold !default;
$btn-line-height: 1.5 !default;
$btn-line-height-lg: calc(4 / 3) !default;
$btn-line-height-sm: 1.5 !default;
-$btn-font-size-base: px-rem(16) !default;
-$btn-font-size-lg: px-rem(20) !default;
-$btn-font-size-sm: px-rem(16) !default;
+$btn-font-size-base: 1rem !default;
+$btn-font-size-lg: 1.25rem !default;
+$btn-font-size-sm: 1rem !default;
$btn-font-size-xs: 0.75rem !default;
$btn-padding-x-sm: 0.75rem !default;
$btn-padding-y-sm: 0.25rem !default;
-$btn-min-width-sm: px-rem(128) !default;
+$btn-min-width-sm: 8rem !default;
$btn-padding-x-lg: 1.25rem !default;
$btn-padding-y-lg: 0.75rem !default;
-$btn-min-width-lg: px-rem(160) !default;
+$btn-min-width-lg: 10rem !default;
$btn-border-radius: 2px !default;
$btn-round-border-radius: 50px !default;
@@ -29,25 +27,28 @@
$btn-outline-hover-state-modifier: 0.9 !default;
$btn-outline-active-state-modifier: 0.6 !default;
$btn-box-shadow-focus-modifier: 0.5 !default;
-$btn-disabled-color: $color-gray-600;
+$btn-disabled-color: #646466;
$btn-box-shadow-color: rgba(0, 0, 0, 0.3);
$btn-swatches: (
// Gamut Next
- "hyper": $color-hyper,
- "red": $color-red,
- "navy": $color-navy,
- "white": $color-white,
- "grey": $color-gray-300,
+ "hyper": #3a10e5,
+ "red": #e91c11,
+ "navy": #10162f,
+ "white": #ffffff,
+ "grey": #c4c3c7,
// Gamut Classic
- "brand-blue": $color-blue-500,
- "brand-red": $brand-red,
- "brand-yellow": $brand-yellow,
- "brand-purple": $brand-purple,
- "brand-dark-blue": $brand-dark-blue,
+ "brand-blue": #3069f0,
+ "brand-red": #fd4d3f,
+ "brand-yellow": #ffd500,
+ "brand-purple": #6400e4,
+ "brand-dark-blue": #141c3a,
// Editor
- "mint": $deprecated-swatches-mint-700,
- "darkmint": $deprecated-swatches-mint-800,
- "greyblue": $deprecated-swatches-grey-blue-600
+ "mint": #34b3a0,
+ "darkmint": #1a7b72,
+ "greyblue": #354551
);
+
+$color-black: #000000;
+$color-white: #ffffff;Index: package/dist/Video/styles/vds_base_theme.scss
===================================================================
--- package/dist/Video/styles/vds_base_theme.scss
+++ package/dist/Video/styles/vds_base_theme.scss
@@ -1,6 +1,4 @@
-@use "~@codecademy/gamut-styles/utils" as *;
-
@import "~@vidstack/react/player/styles/default/theme.css";
@import "~@vidstack/react/player/styles/default/layouts/video.css";
@import "~@vidstack/react/player/styles/default/layouts/audio.css";
@@ -25,9 +23,9 @@
border-radius: var(--media-button-border-radius);
}
:where(.vds-video-layout[data-sm]) :where(.vds-button) {
- padding: 0px px-rem(4px) !important;
+ padding: 0px 4px !important;
}
// Small layout volume / time slider
:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track) {