roundabout,
created on Saturday, 3 April 2021, 00:09:52 (1617408592),
received on Sunday, 11 May 2025, 13:23:03 (1746969783)
Author identity: nana-4 <hnmaigo@gmail.com>
2858108765c96b283c488c08949a31ebc8d2ebc8
src/_st-theme.scss
@@ -1,24 +1,5 @@
@use "theme";
//
// Font families
//
$font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif;
$font-family-large: Roboto, "M+ 1c", Cantarell, Sans-Serif;
//
// Font sizes
//
$font-size: 14px;
$font-size-subheading: 16px;
@if theme.$compact {
$font-size: 14px; // or should be 13px?
$font-size-subheading: 15px;
}
//
// Override sizes
//
src/cinnamon/meson.build
@@ -4,6 +4,7 @@ cinnamon_scss_depend_files = files([
'../_theme.scss',
'../_theme-color.scss',
'../gnome-shell/sass/_drawing.scss',
'../gnome-shell/sass/_typography.scss',
'sass/_common.scss',
'sass/_extends.scss',
])
src/cinnamon/sass/_common.scss
@@ -2,14 +2,15 @@
@use "../../theme-color";
@use "../../st-theme";
@use "../../gnome-shell/sass/drawing";
@use "../../gnome-shell/sass/typography";
@use "extends";
// defines font family and standard font size across the whole theme
// em is preferred for better support for text scaling
stage {
@include drawing.type(body2);
@include typography.body2;
font-family: st-theme.$font-family;
font-family: typography.$font-family;
color: theme-color.$on-surface;
}
.cinnamon-link {
@@ -60,7 +61,7 @@ StScrollView {
@extend %slider-shared;
}
#Tooltip {
@include drawing.type(caption);
@include typography.caption;
padding: 6px 8px;
color: theme-color.$on-tooltip;
@@ -135,7 +136,7 @@ StScrollView {
}
}
.popup-subtitle-menu-item {
@include drawing.type(subtitle2);
@include typography.subtitle2;
}
.popup-menu-icon {
icon-size: 1.14em;
@@ -145,7 +146,7 @@ StScrollView {
.popup-submenu-menu-item:open {
}
.popup-alternating-menu-item:alternate {
@include drawing.type(subtitle2);
@include typography.subtitle2;
}
// toggles in menus
.toggle-switch {
@@ -450,7 +451,7 @@ StScrollView {
}
// keyboard layout applet
.panel-status-button {
@include drawing.type(subtitle2);
@include typography.subtitle2;
-natural-hpadding: 4px;
-minimum-hpadding: 4px;
color: theme-color.hint(theme-color.$on-titlebar);
@@ -488,7 +489,7 @@ StScrollView {
}
.window-caption {
@include drawing.type(caption);
@include typography.caption;
background-color: rgba(0, 0, 0, 0.01);
color: theme-color.hint(theme-color.$on-titlebar);
@@ -587,7 +588,7 @@ StScrollView {
}
// also covers the year label
.datemenu-date-label {
@include drawing.type(headline6);
@include typography.headline6;
height: st-theme.$menuitem-size - 2px * 2;
margin: 2px;
@@ -600,7 +601,7 @@ StScrollView {
}
}
.calendar-month-label {
@include drawing.type(subtitle2);
@include typography.subtitle2;
height: st-theme.$menuitem-size - 6px * 2;
margin: 2px;
@@ -629,7 +630,7 @@ StScrollView {
}
}
.calendar-day-base {
@include drawing.type(caption);
@include typography.caption;
text-align: center;
width: st-theme.$menuitem-size;
@@ -648,7 +649,7 @@ StScrollView {
}
}
.calendar-week-number {
@include drawing.type(caption);
@include typography.caption;
width: st-theme.$menuitem-size - 7px;
height: st-theme.$menuitem-size;
@@ -660,7 +661,7 @@ StScrollView {
text-align: center;
}
.calendar-day-heading {
@include drawing.type(caption);
@include typography.caption;
width: st-theme.$menuitem-size;
height: st-theme.$menuitem-size - 7px;
@@ -965,7 +966,7 @@ StScrollView {
}
.keyboard-key {
@extend %icon-button-shared;
@include drawing.type(button);
@include typography.button;
}
.keyboard-layout {
spacing: 8px;
@@ -1057,10 +1058,10 @@ StScrollView {
}
}
.menu-selected-app-title {
@include drawing.type(caption);
@include typography.caption;
}
.menu-selected-app-description {
@include drawing.type(caption);
@include typography.caption;
max-width: 150px;
}
@@ -1087,7 +1088,7 @@ StScrollView {
}
// the window list applet. Some third party applets inherit some of this theming.
.window-list-box {
@include drawing.type(caption);
@include typography.caption;
spacing: 4px;
padding: 0 3px;
@@ -1146,7 +1147,7 @@ StScrollView {
padding-bottom: 6px;
}
&-number-label {
@include drawing.type(caption);
@include typography.caption;
z-index: 99;
}
@@ -1354,7 +1355,7 @@ StScrollView {
}
}
.applet-label {
@include drawing.type(subtitle2);
@include typography.subtitle2;
color: theme-color.hint(theme-color.$on-titlebar);
}
@@ -1368,7 +1369,7 @@ StScrollView {
// desklets - the base .desklet selector is for 'undecorated' desklets however some subtle background themeing is desirable
// to maintain visibility irrespctive of wallpaper and to allow for the highlighting scheme to work
.desklet {
@include drawing.type(caption);
@include typography.caption;
color: theme-color.$on-titlebar;
border: none;
@@ -1380,7 +1381,7 @@ StScrollView {
// these do not inherit from .desklet
.desklet-with-borders {
@extend %desklet-shared;
@include drawing.type(caption);
@include typography.caption;
background-color: theme-color.$surface-z8;
border-radius: theme.$corner-radius;
@@ -1390,7 +1391,7 @@ StScrollView {
}
.desklet-with-borders-and-header {
@extend %desklet-shared;
@include drawing.type(caption);
@include typography.caption;
background-color: theme-color.$surface-z8;
border-radius-bottomleft: 2px;
@@ -1400,7 +1401,7 @@ StScrollView {
}
}
.desklet-header {
@include drawing.type(headline6);
@include typography.headline6;
@extend %desklet-shared;
background-color: theme-color.$surface-z8;
@@ -1438,10 +1439,10 @@ StScrollView {
padding-bottom: 16px;
}
.about-title {
@include drawing.type(headline6);
@include typography.headline6;
}
.about-uuid {
@include drawing.type(caption);
@include typography.caption;
}
.about-icon {
padding-right: 20px;
@@ -1464,7 +1465,7 @@ StScrollView {
@extend %osd-info-workspace-shared;
}
.expo-workspaces-name-entry {
@include drawing.type(body1);
@include typography.body1;
background-color: theme-color.entry-fill(theme-color.$on-dark);
color: theme-color.$on-dark;
@@ -1627,7 +1628,7 @@ StScrollView {
border: none;
}
.user-label {
@include drawing.type(subtitle2);
@include typography.subtitle2;
color: theme-color.$on-surface;
}
src/cinnamon/sass/_extends.scss
@@ -2,10 +2,11 @@
@use "../../theme-color";
@use "../../st-theme";
@use "../../gnome-shell/sass/drawing";
@use "../../gnome-shell/sass/typography";
%button-shared {
@include drawing.button(normal);
@include drawing.type(button);
@include typography.button;
min-height: theme.$medium-size;
padding: 0 16px;
@@ -138,7 +139,7 @@
box-shadow: theme.$shadow-z8;
}
%osd-info-workspace-shared {
@include drawing.type(headline6);
@include typography.headline6;
@extend %osd-panel-shared;
text-align: center;
src/gnome-shell/meson.build
@@ -62,6 +62,7 @@ gnome_shell_scss_depend_files = files([
'sass/_drawing.scss',
'sass/_extensions.scss',
'sass/_gnome-shell.scss',
'sass/_typography.scss',
])
foreach theme: themes
src/gnome-shell/sass/_drawing.scss
@@ -4,105 +4,6 @@
@use "../../theme-color";
@use "../../st-theme";
// provide font size in pt, with px fallback
@function pt($size: st-theme.$font-size) {
@return ($size * 0.75 / 1px) * 1pt;
}
// provide icon size in em, with px fallback
@function em($size: 16px) {
@return ($size / st-theme.$font-size) * 1em;
}
// Typography
// based on:
// https://material.io/design/typography/the-type-system.html
@mixin type($style) {
@if $style == headline1 {
// font-family: $font-family-large;
font-size: 96px;
font-weight: 300;
// line-height: 1;
}
@if $style == headline2 {
// font-family: $font-family-large;
font-size: 60px;
font-weight: 300;
// line-height: 1;
}
@if $style == headline3 {
// font-family: $font-family-large;
font-size: 48px;
font-weight: 400;
// line-height: 50px;
}
@if $style == headline4 {
// font-family: $font-family-large;
font-size: 34px;
font-weight: 400;
// line-height: 40px;
}
@if $style == headline5 {
font-size: pt(24px);
font-weight: 400;
// line-height: 32px;
}
@if $style == headline6 {
font-size: pt(20px);
font-weight: 500;
// line-height: 32px;
}
@if $style == subtitle1 {
font-size: pt(st-theme.$font-size-subheading);
font-weight: 400;
// line-height: 28px;
}
@if $style == subtitle2 {
font-size: pt(st-theme.$font-size);
font-weight: 500;
// line-height: 22px;
}
@if $style == body1 {
font-size: pt(st-theme.$font-size-subheading);
font-weight: 400;
// line-height: 24px;
}
@if $style == body2 {
font-size: pt(st-theme.$font-size);
font-weight: 400;
// line-height: 20px;
}
@if $style == caption {
font-size: pt(12px);
font-weight: 400;
// line-height: 20px;
}
@if $style == button {
font-size: pt(st-theme.$font-size);
font-weight: 500;
// line-height: 36px;
}
@if $style == overline {
font-size: pt(12px);
font-weight: 400;
// line-height: 32px;
}
}
@mixin entry($t, $fc: theme-color.$primary) {
//
// entry
src/gnome-shell/sass/_typography.scss
@@ -0,0 +1,102 @@
// Based on:
// https://material.io/design/typography/the-type-system.html
@use "../../theme";
$font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif;
$_rem: 14px;
$_subtitle-size: 16px;
@if theme.$compact {
$_rem: 14px; // or should be 13px?
$_subtitle-size: 15px;
}
// provide font size in pt, with px fallback
@function _pt($size) {
@return ($size * .75 / 1px) * 1pt;
}
// provide icon size in em, with px fallback
@function icon-size($size: 16px) {
@return ($size / $_rem) * 1em;
}
@mixin headline1 {
font-size: 96px;
font-weight: 300;
// line-height: 1;
}
@mixin headline2 {
font-size: 60px;
font-weight: 300;
// line-height: 1;
}
@mixin headline3 {
font-size: 48px;
font-weight: 400;
// line-height: 50px;
}
@mixin headline4 {
font-size: 34px;
font-weight: 400;
// line-height: 40px;
}
@mixin headline5 {
font-size: _pt(24px);
font-weight: 400;
// line-height: 32px;
}
@mixin headline6 {
font-size: _pt(20px);
font-weight: 500;
// line-height: 32px;
}
@mixin subtitle1 {
font-size: _pt($_subtitle-size);
font-weight: 400;
// line-height: 28px;
}
@mixin subtitle2 {
font-size: _pt($_rem);
font-weight: 500;
// line-height: 22px;
}
@mixin body1 {
font-size: _pt($_subtitle-size);
font-weight: 400;
// line-height: 24px;
}
@mixin body2 {
font-size: _pt($_rem);
font-weight: 400;
// line-height: 20px;
}
@mixin caption {
font-size: _pt(12px);
font-weight: 400;
// line-height: 20px;
}
@mixin button {
font-size: _pt($_rem);
font-weight: 500;
// line-height: 36px;
}
@mixin overline {
font-size: _pt(12px);
font-weight: 400;
// line-height: 32px;
}
src/gnome-shell/sass/components/base/_base.scss
@@ -21,7 +21,7 @@
@use "../../../../theme-color";
@use "../../../../st-theme";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
// Stage
stage {
@@ -30,8 +30,8 @@ stage {
@if gnome-shell.$version >= 3.36 {
font-size: 1em;
} @else {
@include drawing.type(body2);
font-family: st-theme.$font-family;
@include typography.body2;
font-family: typography.$font-family;
}
}
src/gnome-shell/sass/components/base/_button.scss
@@ -2,6 +2,7 @@
@use "../../../../theme";
@use "../../drawing";
@use "../../typography";
%button,
.button {
@@ -11,7 +12,7 @@
border: 0;
border-radius: theme.$corner-radius;
@include drawing.type(button);
@include typography.button;
@include drawing.button(flat-normal);
&:focus {
src/gnome-shell/sass/components/base/_entry.scss
@@ -4,6 +4,7 @@
@use "../../../../theme-color";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
%entry,
StEntry {
@@ -14,7 +15,7 @@ StEntry {
color: theme-color.$on-surface;
selection-background-color: theme-color.$selected-overlay;
selected-color: theme-color.$on-surface;
@include drawing.type(body1);
@include typography.body1;
@include drawing.entry(normal);
&:hover {
src/gnome-shell/sass/components/dialog/_dialog.scss
@@ -4,12 +4,12 @@
@use "../../../../theme-color";
@use "../../../../st-theme";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
@use "../base/button";
@use "../base/entry";
.headline {
@include drawing.type(headline6);
@include typography.headline6;
}
.modal-dialog {
@@ -63,7 +63,7 @@
}
.end-session-dialog-subject {
@include drawing.type(headline6);
@include typography.headline6;
}
.end-session-dialog-list {
@@ -152,13 +152,13 @@
spacing: 18px;
.message-dialog-title {
@include drawing.type(headline6);
@include typography.headline6;
text-align: inherit;
$lightweight: if(gnome-shell.$version >= 3.38, ".lightweight", ".leightweight");
&#{$lightweight} {
@include drawing.type(headline6);
@include typography.headline6;
}
}
@@ -318,7 +318,7 @@
.message-dialog-title {
color: inherit;
@include drawing.type(headline6);
@include typography.headline6;
}
}
@@ -474,7 +474,7 @@
}
.mount-dialog-subject {
@include drawing.type(headline6);
@include typography.headline6;
}
.mount-dialog {
src/gnome-shell/sass/components/dialog/_network-dialog.scss
@@ -3,7 +3,7 @@
@use "../../../../theme";
@use "../../../../theme-color";
@use "../../../../st-theme";
@use "../../drawing";
@use "../../typography";
.nm-dialog {
max-height: 34em;
@@ -31,7 +31,7 @@
// header
.nm-dialog-header {
@include drawing.type(headline6);
@include typography.headline6;
}
.nm-dialog-subheader {
src/gnome-shell/sass/components/gdm/_login-dialog.scss
@@ -5,6 +5,7 @@
@use "../../../../st-theme";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
.login-dialog-banner-view {
padding-top: 24px;
@@ -139,7 +140,7 @@
margin-top: 1em;
border-radius: theme.$corner-radius;
color: theme-color.hint(theme-color.$on-system);
@include drawing.type(button);
@include typography.button;
&:focus {
background-color: theme-color.focus-overlay(theme-color.$on-system);
@@ -222,7 +223,7 @@
.user-widget.horizontal .user-widget-label {
padding-left: 16px;
@include drawing.type(headline6);
@include typography.headline6;
text-align: left;
&:ltr {
@@ -238,14 +239,14 @@
.user-widget.vertical .user-widget-label {
padding-top: 16px;
@include drawing.type(headline5);
@include typography.headline5;
text-align: center;
}
} @else {
.login-dialog-username,
.user-widget-label {
padding-left: 16px;
@include drawing.type(headline6);
@include typography.headline6;
text-align: left;
}
src/gnome-shell/sass/components/gdm/_screen-shield.scss
@@ -3,7 +3,7 @@
@use "../../../../theme";
@use "../../../../theme-color";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
@use "../base/scrollbar";
@if gnome-shell.$version >= 3.36 {
@@ -17,12 +17,12 @@
.unlock-dialog-clock-time {
padding-top: 42px;
@include drawing.type(headline1);
@include typography.headline1;
font-feature-settings: "tnum";
}
.unlock-dialog-clock-date {
@include drawing.type(headline4);
@include typography.headline4;
}
.unlock-dialog-clock-hint {
@@ -103,13 +103,13 @@
}
.screen-shield-clock-time {
@include drawing.type(headline1);
@include typography.headline1;
text-shadow: theme.$shadow-z2;
font-feature-settings: "tnum";
}
.screen-shield-clock-date {
@include drawing.type(headline4);
@include typography.headline4;
}
.screen-shield-notifications-container {
src/gnome-shell/sass/components/menu/_calendar.scss
@@ -4,7 +4,7 @@
@use "../../../../theme-color";
@use "../../../../st-theme";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
$column-spacing: 8px;
$column-margin: 0 8px;
@@ -104,7 +104,7 @@ $column-margin: 0 8px;
// date label
.date-label {
@include drawing.type(headline5);
@include typography.headline5;
}
}
@@ -186,7 +186,7 @@ $column-margin: 0 8px;
padding: 0;
border: 0;
border-radius: st-theme.$menuitem-size / 2;
@include drawing.type(caption);
@include typography.caption;
font-feature-settings: "tnum";
text-align: center;
@@ -221,7 +221,7 @@ $column-margin: 0 8px;
border-radius: st-theme.$menuitem-size / 2;
background-color: transparent;
color: theme-color.disabled(theme-color.$on-surface);
@include drawing.type(caption);
@include typography.caption;
font-weight: bold;
text-align: center;
@@ -345,7 +345,7 @@ $column-margin: 0 8px;
.event-time {
color: theme-color.hint(theme-color.$on-surface);
@include drawing.type(caption);
@include typography.caption;
font-feature-settings: "tnum";
}
}
@@ -433,7 +433,7 @@ $column-margin: 0 8px;
padding-top: 0;
padding-bottom: 0;
color: theme-color.hint(theme-color.$on-surface);
@include drawing.type(caption);
@include typography.caption;
font-feature-settings: "tnum";
}
src/gnome-shell/sass/components/misc/_keyboard.scss
@@ -4,6 +4,7 @@
@use "../../../../theme-color";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
// draw keys using button function
#keyboard {
@@ -193,7 +194,7 @@
// suggestions
.word-suggestions {
@include drawing.type(subtitle1);
@include typography.subtitle1;
spacing: 12px;
min-height: 20pt;
}
src/gnome-shell/sass/components/misc/_looking-glass.scss
@@ -4,7 +4,7 @@
@use "../../../../theme-color";
@use "../../../../st-theme";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
@use "../base/button";
@use "../base/entry";
@@ -136,7 +136,7 @@
}
.lg-extension-name {
@include drawing.type(headline6);
@include typography.headline6;
}
.lg-extension-meta {
src/gnome-shell/sass/components/notification/_notification.scss
@@ -4,7 +4,7 @@
@use "../../../../theme-color";
@use "../../../../st-theme";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
@use "../base/button";
@use "../base/entry";
@@ -115,7 +115,7 @@
.chat-meta-message {
padding-left: 4px;
color: theme-color.hint(theme-color.$on-surface);
@include drawing.type(caption);
@include typography.caption;
&:rtl {
padding-left: 0;
src/gnome-shell/sass/components/osd/_osd.scss
@@ -3,7 +3,7 @@
@use "../../../../theme";
@use "../../../../theme-color";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
@mixin panel {
padding: 12px;
@@ -28,7 +28,7 @@
}
.osd-monitor-label {
@include drawing.type(headline3);
@include typography.headline3;
}
@if gnome-shell.$version >= 3.30 {
src/gnome-shell/sass/components/osd/_switcher.scss
@@ -3,7 +3,7 @@
@use "../../../../theme";
@use "../../../../theme-color";
@use "../../../../st-theme";
@use "../../drawing";
@use "../../typography";
@use "osd";
.switcher-popup {
@@ -69,7 +69,7 @@
.input-source-switcher-symbol {
width: 96px;
height: 96px;
@include drawing.type(headline3);
@include typography.headline3;
}
// Window cycler highlight
src/gnome-shell/sass/components/overview/_app-grid.scss
@@ -6,6 +6,7 @@
@use "../../../../color-palette";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
@use "../base/button";
@use "overview";
@@ -87,7 +88,7 @@
.folder-name-label,
.folder-name-entry {
@include drawing.type(headline6);
@include typography.headline6;
}
.folder-name-entry {
src/gnome-shell/sass/components/overview/_overview.scss
@@ -4,7 +4,7 @@
@use "../../../../theme-color";
@use "../../../../st-theme";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
@use "../base/scrollbar";
$color: theme-color.$system;
@@ -53,7 +53,7 @@ $on-color: theme-color.$on-system;
}
@mixin status-text {
@include drawing.type(headline3);
@include typography.headline3;
color: theme-color.disabled($on-color);
}
src/gnome-shell/sass/components/overview/_search-results.scss
@@ -2,7 +2,7 @@
@use "../../../../theme-color";
@use "../../gnome-shell";
@use "../../drawing";
@use "../../typography";
@use "overview";
@use "app-grid";
@@ -102,7 +102,7 @@ $searchResultsContent: if(gnome-shell.$version >= 3.34, "#searchResultsContent",
.list-search-result-title {
spacing: 12px;
color: inherit;
@include drawing.type(subtitle1);
@include typography.subtitle1;
}
// list item description