Skip to content

Pin extended Granite-specific colors to RGB values #923

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Pin extended Granite-specific colors to RGB values #923

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d12b1aa
pin extended colors to rgb values
wpkelso Nov 15, 2025
44e76f6
Merge branch 'main' into wpkelso/pin-expanded-palette
wpkelso Nov 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 103 additions & 52 deletions lib/Styles/Common/_palette.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,209 +1,260 @@
// Internal Palette
$STRAWBERRY_100: #ff8c82;
$STRAWBERRY_200: #f6706a;
$STRAWBERRY_300: #ed5353;
$STRAWBERRY_400: #da3c40;
$STRAWBERRY_500: #c6262e;
$STRAWBERRY_600: #b4161a;
$STRAWBERRY_700: #a10705;
$STRAWBERRY_800: #8e0402;
$STRAWBERRY_900: #7a0000;
$STRAWBERRY_200: mix($STRAWBERRY_100, $STRAWBERRY_300, 50%);
$STRAWBERRY_400: mix($STRAWBERRY_300, $STRAWBERRY_500, 50%);
$STRAWBERRY_600: mix($STRAWBERRY_500, $STRAWBERRY_700, 50%);
$STRAWBERRY_800: mix($STRAWBERRY_700, $STRAWBERRY_900, 50%);

$ORANGE_100: #ffc27d;
$ORANGE_200: #ffb268;
$ORANGE_300: #ffa154;
$ORANGE_400: #f98a3e;
$ORANGE_500: #f37329;
$ORANGE_600: #e05716;
$ORANGE_700: #cc3b02;
$ORANGE_800: #b92e01;
$ORANGE_900: #a62100;
$ORANGE_200: mix($ORANGE_100, $ORANGE_300, 50%);
$ORANGE_400: mix($ORANGE_300, $ORANGE_500, 50%);
$ORANGE_600: mix($ORANGE_500, $ORANGE_700, 50%);
$ORANGE_800: mix($ORANGE_700, $ORANGE_900, 50%);

$BANANA_100: #fff394;
$BANANA_200: #ffea80;
$BANANA_300: #ffe16b;
$BANANA_400: #fcd256;
$BANANA_500: #f9c440;
$BANANA_600: #e6a92a;
$BANANA_700: #d48e15;
$BANANA_800: #c0760a;
$BANANA_900: #ad5f00;
$BANANA_200: mix($BANANA_100, $BANANA_300, 50%);
$BANANA_400: mix($BANANA_300, $BANANA_500, 50%);
$BANANA_600: mix($BANANA_500, $BANANA_700, 50%);
$BANANA_800: mix($BANANA_700, $BANANA_900, 50%);

$LIME_100: #d1ff82;
$LIME_200: #b6ed68;
$LIME_300: #9bdb4d;
$LIME_400: #82c938;
$LIME_500: #68b723;
$LIME_600: #51a414;
$LIME_700: #3a9104;
$LIME_800: #2d7e02;
$LIME_900: #206b00;
$LIME_200: mix($LIME_100, $LIME_300, 50%);
$LIME_400: mix($LIME_300, $LIME_500, 50%);
$LIME_600: mix($LIME_500, $LIME_700, 50%);
$LIME_800: mix($LIME_700, $LIME_900, 50%);

$MINT_100: #89ffdd;
$MINT_200: #66eac9;
$MINT_300: #43d6b5;
$MINT_400: #36c9ac;
$MINT_500: #28bca3;
$MINT_600: #1bab93;
$MINT_700: #0e9a83;
$MINT_800: #078675;
$MINT_900: #007367;
$MINT_200: mix($MINT_100, $MINT_300, 50%);
$MINT_400: mix($MINT_300, $MINT_500, 50%);
$MINT_600: mix($MINT_500, $MINT_700, 50%);
$MINT_800: mix($MINT_700, $MINT_900, 50%);

$BLUEBERRY_100: #8cd5ff;
$BLUEBERRY_200: #78c8ff;
$BLUEBERRY_300: #64baff;
$BLUEBERRY_400: #4da2f2;
$BLUEBERRY_500: #3689e6;
$BLUEBERRY_600: #226ed2;
$BLUEBERRY_700: #0d52bf;
$BLUEBERRY_800: #0640ac;
$BLUEBERRY_900: #002e99;
$BLUEBERRY_200: mix($BLUEBERRY_100, $BLUEBERRY_300, 50%);
$BLUEBERRY_400: mix($BLUEBERRY_300, $BLUEBERRY_500, 50%);
$BLUEBERRY_600: mix($BLUEBERRY_500, $BLUEBERRY_700, 50%);
$BLUEBERRY_800: mix($BLUEBERRY_700, $BLUEBERRY_900, 50%);

$GRAPE_100: #e4c6fa;
$GRAPE_200: #d8b2f8;
$GRAPE_300: #cd9ef7;
$GRAPE_400: #b986ec;
$GRAPE_500: #a56de2;
$GRAPE_600: #8c53ca;
$GRAPE_700: #7239b3;
$GRAPE_800: #5c319a;
$GRAPE_900: #452981;
$GRAPE_200: mix($GRAPE_100, $GRAPE_300, 50%);
$GRAPE_400: mix($GRAPE_300, $GRAPE_500, 50%);
$GRAPE_600: mix($GRAPE_500, $GRAPE_700, 50%);
$GRAPE_800: mix($GRAPE_700, $GRAPE_900, 50%);

$BUBBLEGUM_100: #fe9ab8;
$BUBBLEGUM_200: #f980aa;
$BUBBLEGUM_300: #f4679d;
$BUBBLEGUM_400: #e9528e;
$BUBBLEGUM_500: #de3e80;
$BUBBLEGUM_600: #cd316e;
$BUBBLEGUM_700: #bc245d;
$BUBBLEGUM_800: #a6194a;
$BUBBLEGUM_900: #910e38;
$BUBBLEGUM_200: mix($BUBBLEGUM_100, $BUBBLEGUM_300, 50%);
$BUBBLEGUM_400: mix($BUBBLEGUM_300, $BUBBLEGUM_500, 50%);
$BUBBLEGUM_600: mix($BUBBLEGUM_500, $BUBBLEGUM_700, 50%);
$BUBBLEGUM_800: mix($BUBBLEGUM_700, $BUBBLEGUM_900, 50%);

$LATTE_100: #efdfc4;
$LATTE_200: #ebd2aa;
$LATTE_300: #e7c591;
$LATTE_400: #dbb478;
$LATTE_500: #cfa25e;
$LATTE_600: #c29146;
$LATTE_700: #b6802e;
$LATTE_800: #9b6617;
$LATTE_900: #804b00;
$LATTE_200: mix($LATTE_100, $LATTE_300, 50%);
$LATTE_400: mix($LATTE_300, $LATTE_500, 50%);
$LATTE_600: mix($LATTE_500, $LATTE_700, 50%);
$LATTE_800: mix($LATTE_700, $LATTE_900, 50%);

$COCOA_100: #a3907c;
$COCOA_200: #96806d;
$COCOA_300: #8a715e;
$COCOA_400: #7e6251;
$COCOA_500: #715344;
$COCOA_600: #644638;
$COCOA_700: #57392d;
$COCOA_800: #4a2d24;
$COCOA_900: #3d211b;
$COCOA_200: mix($COCOA_100, $COCOA_300, 50%);
$COCOA_400: mix($COCOA_300, $COCOA_500, 50%);
$COCOA_600: mix($COCOA_500, $COCOA_700, 50%);
$COCOA_800: mix($COCOA_700, $COCOA_900, 50%);

$SILVER_100: #fafafa;
$SILVER_200: #e7e7e7;
$SILVER_300: #d4d4d4;
$SILVER_400: #c0c0c1;
$SILVER_500: #abacae;
$SILVER_600: #94969a;
$SILVER_700: #7e8087;
$SILVER_800: #6a6c74;
$SILVER_900: #555761;
$SILVER_200: mix($SILVER_100, $SILVER_300, 50%);
$SILVER_400: mix($SILVER_300, $SILVER_500, 50%);
$SILVER_600: mix($SILVER_500, $SILVER_700, 50%);
$SILVER_800: mix($SILVER_700, $SILVER_900, 50%);

$SLATE_100: #95a3ab;
$SLATE_200: #7e8e98;
$SLATE_300: #667885;
$SLATE_400: #576978;
$SLATE_500: #485a6c;
$SLATE_600: #384758;
$SLATE_700: #273445;
$SLATE_800: #1a2432;
$SLATE_900: #0e141f;
$SLATE_200: mix($SLATE_100, $SLATE_300, 50%);
$SLATE_400: mix($SLATE_300, $SLATE_500, 50%);
$SLATE_600: mix($SLATE_500, $SLATE_700, 50%);
$SLATE_800: mix($SLATE_700, $SLATE_900, 50%);

$BLACK_100: #666;
$BLACK_200: #5a5a5a;
$BLACK_300: #4d4d4d;
$BLACK_400: #404040;
$BLACK_500: #333;
$BLACK_600: #262626;
$BLACK_700: #1a1a1a;
$BLACK_800: #0d0d0d;
$BLACK_900: #000;
$BLACK_200: mix($BLACK_100, $BLACK_300, 50%);
$BLACK_400: mix($BLACK_300, $BLACK_500, 50%);
$BLACK_600: mix($BLACK_500, $BLACK_700, 50%);
$BLACK_800: mix($BLACK_700, $BLACK_900, 50%);

// Exported Gtk
@define-color STRAWBERRY_100 #{$STRAWBERRY_100};
@define-color STRAWBERRY_200 #{$STRAWBERRY_200};
@define-color STRAWBERRY_300 #{$STRAWBERRY_300};
@define-color STRAWBERRY_400 #{$STRAWBERRY_400};
@define-color STRAWBERRY_500 #{$STRAWBERRY_500};
@define-color STRAWBERRY_600 #{$STRAWBERRY_600};
@define-color STRAWBERRY_700 #{$STRAWBERRY_700};
@define-color STRAWBERRY_800 #{$STRAWBERRY_800};
@define-color STRAWBERRY_900 #{$STRAWBERRY_900};

@define-color ORANGE_100 #{$ORANGE_100};
@define-color ORANGE_200 #{$ORANGE_200};
@define-color ORANGE_300 #{$ORANGE_300};
@define-color ORANGE_400 #{$ORANGE_400};
@define-color ORANGE_500 #{$ORANGE_500};
@define-color ORANGE_600 #{$ORANGE_600};
@define-color ORANGE_700 #{$ORANGE_700};
@define-color ORANGE_800 #{$ORANGE_800};
@define-color ORANGE_900 #{$ORANGE_900};

@define-color BANANA_100 #{$BANANA_100};
@define-color BANANA_200 #{$BANANA_200};
@define-color BANANA_300 #{$BANANA_300};
@define-color BANANA_400 #{$BANANA_400};
@define-color BANANA_500 #{$BANANA_500};
@define-color BANANA_600 #{$BANANA_600};
@define-color BANANA_700 #{$BANANA_700};
@define-color BANANA_800 #{$BANANA_800};
@define-color BANANA_900 #{$BANANA_900};

@define-color LIME_100 #{$LIME_100};
@define-color LIME_200 #{$LIME_200};
@define-color LIME_300 #{$LIME_300};
@define-color LIME_400 #{$LIME_400};
@define-color LIME_500 #{$LIME_500};
@define-color LIME_600 #{$LIME_600};
@define-color LIME_700 #{$LIME_700};
@define-color LIME_900 #{$LIME_900};

@define-color MINT_100 #{$MINT_100};
@define-color MINT_200 #{$MINT_200};
@define-color MINT_300 #{$MINT_300};
@define-color MINT_400 #{$MINT_400};
@define-color MINT_500 #{$MINT_500};
@define-color MINT_600 #{$MINT_600};
@define-color MINT_700 #{$MINT_700};
@define-color MINT_800 #{$MINT_800};
@define-color MINT_900 #{$MINT_900};

@define-color BLUEBERRY_100 #{$BLUEBERRY_100};
@define-color BLUEBERRY_200 #{$BLUEBERRY_200};
@define-color BLUEBERRY_300 #{$BLUEBERRY_300};
@define-color BLUEBERRY_400 #{$BLUEBERRY_400};
@define-color BLUEBERRY_500 #{$BLUEBERRY_500};
@define-color BLUEBERRY_600 #{$BLUEBERRY_600};
@define-color BLUEBERRY_700 #{$BLUEBERRY_700};
@define-color BLUEBERRY_800 #{$BLUEBERRY_800};
@define-color BLUEBERRY_900 #{$BLUEBERRY_900};

@define-color GRAPE_100 #{$GRAPE_100};
@define-color GRAPE_200 #{$GRAPE_200};
@define-color GRAPE_300 #{$GRAPE_300};
@define-color GRAPE_400 #{$GRAPE_400};
@define-color GRAPE_500 #{$GRAPE_500};
@define-color GRAPE_600 #{$GRAPE_600};
@define-color GRAPE_700 #{$GRAPE_700};
@define-color GRAPE_800 #{$GRAPE_800};
@define-color GRAPE_900 #{$GRAPE_900};

@define-color BUBBLEGUM_100 #{$BUBBLEGUM_100};
@define-color BUBBLEGUM_200 #{$BUBBLEGUM_200};
@define-color BUBBLEGUM_300 #{$BUBBLEGUM_300};
@define-color BUBBLEGUM_400 #{$BUBBLEGUM_400};
@define-color BUBBLEGUM_500 #{$BUBBLEGUM_500};
@define-color BUBBLEGUM_600 #{$BUBBLEGUM_600};
@define-color BUBBLEGUM_700 #{$BUBBLEGUM_700};
@define-color BUBBLEGUM_800 #{$BUBBLEGUM_800};
@define-color BUBBLEGUM_900 #{$BUBBLEGUM_900};

@define-color LATTE_100 #{$LATTE_100};
@define-color LATTE_200 #{$LATTE_200};
@define-color LATTE_300 #{$LATTE_300};
@define-color LATTE_400 #{$LATTE_400};
@define-color LATTE_500 #{$LATTE_500};
@define-color LATTE_600 #{$LATTE_600};
@define-color LATTE_700 #{$LATTE_700};
@define-color LATTE_800 #{$LATTE_800};
@define-color LATTE_900 #{$LATTE_900};

@define-color COCOA_100 #{$COCOA_100};
@define-color COCOA_200 #{$COCOA_200};
@define-color COCOA_300 #{$COCOA_300};
@define-color COCOA_400 #{$COCOA_400};
@define-color COCOA_500 #{$COCOA_500};
@define-color COCOA_600 #{$COCOA_600};
@define-color COCOA_700 #{$COCOA_700};
@define-color COCOA_800 #{$COCOA_800};
@define-color COCOA_900 #{$COCOA_900};

@define-color SILVER_100 #{$SILVER_100};
@define-color SILVER_200 #{$SILVER_200};
@define-color SILVER_300 #{$SILVER_300};
@define-color SILVER_400 #{$SILVER_400};
@define-color SILVER_500 #{$SILVER_500};
@define-color SILVER_600 #{$SILVER_600};
@define-color SILVER_700 #{$SILVER_700};
@define-color SILVER_800 #{$SILVER_800};
@define-color SILVER_900 #{$SILVER_900};

@define-color SLATE_100 #{$SLATE_100};
@define-color SLATE_200 #{$SLATE_200};
@define-color SLATE_300 #{$SLATE_300};
@define-color SLATE_400 #{$SLATE_400};
@define-color SLATE_500 #{$SLATE_500};
@define-color SLATE_600 #{$SLATE_600};
@define-color SLATE_700 #{$SLATE_700};
@define-color SLATE_800 #{$SLATE_800};
@define-color SLATE_900 #{$SLATE_900};

@define-color BLACK_100 #{$BLACK_100};
@define-color BLACK_200 #{$BLACK_200};
@define-color BLACK_300 #{$BLACK_300};
@define-color BLACK_400 #{$BLACK_400};
@define-color BLACK_500 #{$BLACK_500};
@define-color BLACK_600 #{$BLACK_600};
@define-color BLACK_700 #{$BLACK_700};
@define-color BLACK_800 #{$BLACK_800};
@define-color BLACK_900 #{"" + $BLACK_900};