Giter Site home page Giter Site logo

nordtheme / hyper Goto Github PK

View Code? Open in Web Editor NEW
117.0 5.0 13.0 627 KB

An arctic, north-bluish clean and elegant Hyper theme plugin.

Home Page: https://www.nordtheme.com/ports/hyper

License: MIT License

JavaScript 93.37% Shell 6.63%
nord arctic color theme colortheme hyper hyperterm hyper-plugin hyper-theme terminal

hyper's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

hyper's Issues

Bug: Padding on the cursor

lien

Hello, first of all, really nice theme πŸ‘

As you can see on the picture, my cursor's real position and his visual position are different.
I used the theme hyper-dark-dracula before and i didn't have this problem :/

If i can help, let me know ;)

My config :

  • OSX Sierra 10.12.3
  • Hyper.app Version 1.2.1 (1.2.1.1527)
  • i use oh-my-zsh with the theme pure

my hyper config :

module.exports = {
  config: {
    fontSize: 11,
    fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
    cursorColor: 'rgba(248,28,229,0.8)',
    cursorShape: 'BEAM',

    foregroundColor: '#fff',
    backgroundColor: '#000',
    borderColor: '#333',
    css: '',
    termCSS: '',
    showHamburgerMenu: '',
    showWindowControls: 'false',
    padding: '12px 14px 0px 14px',
    colors: {
      black: '#000000',
      red: '#ff0000',
      green: '#33ff00',
      yellow: '#ffff00',
      blue: '#0066ff',
      magenta: '#cc00ff',
      cyan: '#00ffff',
      white: '#d0d0d0',
      lightBlack: '#808080',
      lightRed: '#ff0000',
      lightGreen: '#33ff00',
      lightYellow: '#ffff00',
      lightBlue: '#0066ff',
      lightMagenta: '#cc00ff',
      lightCyan: '#00ffff',
      lightWhite: '#ffffff'
    },
    shell: '',
    shellArgs: ['--login'],
    env: {},
    bell: 'false',
    copyOnSelect: true
  },
  plugins:["nord-hyper", "hypercwd", "hyperterm-1password", "hyper-statusline"],

  localPlugins: []
};

cursorBlink overwritten by theme

Instead of checking config.cursorBlink, the theme checks nordHyper.cursorBlink, which is always set to true. I can modify the nord-hyper index.js, but it will be overwritten on update.

This should not overwrite the main hyper settings.

EDIT: Ah, I see now. #12 . I guess I'll just wait until the next release, or create a local version of the plugin.

Migrate to MIT license

Subtask of nordtheme/nord#55

Adapt to the MIT license migration of the main Nord project. Detailed information can be found in the main task ticket.

Tasks

  • Update all license SVG badges
  • Update the LICENSE.md content
  • Update- and simplify all source code comment header

Documentation redesign

The documentation is partially outdated for both style guidelines and topicality and should be adapted to the latest design guidelines and redesiged.

It should be deployed as GitHub Page to the gh-pages branch.

Use custom fontFamily?

According to index.js, nord-hyper uses Source Code Pro or Hack font first. If users set the custom fontFamily, it won't use it. Are there any solutions? Thanks a lot.

PS: I found a typo in the README, and it should be ⌘ + , instead of ⌘ +.

Documentation redesign

The documentation is partially outdated for both style guidelines and topicality and should be adapted to the latest documentation design guidelines.

How to use one of the other schemes

How to use one of the other schemes shown in the image in the readme file?
I would like to use the m40 color scheme, it's not clear how to achieve this

Prefer user config before theme defaults

Currently most user configurations will be overriden by the theme defaults which prevents the user from setting e.g. a custom font.
The theme should prefer the user configurations for the cursorShape, fontSize and fontFamily attributes before setting theme defaults.

This is a follow up to #2.

[Suggestion] Make cursor blink toggleable

Currently, I have a fork that disables cursor blink. It would be preferable if the blink was a feature that could be toggled in a configuration option.

I can implement this, but I won't get around to it until the weekend.

index script

Implement the main index.js script.
This should support smooth tab transitions and cursor blinking.

Change Default Text Cursor Color

Is the text cursor color controlled by the Nord theme or Hyper itself? If Nord, is it possible to change? It defaults to pink which seems very counter to the aesthetic the Nord theme is looking to achieve. I'm pretty sure it's possible to change the color of the text cursor in the hyper config file, but what about in the Nord theme itself? Not sure if there's an obstruction doing it that way versus the theme itself.

macOS 13 (Ventura)
Hyper Terminal - Nord Theme
Screenshot 2023-04-30 at 6 19 46 PM

Replace gulp.js with npm scripts

gulp.js is meant to be used as streaming build tool for larger projects with many tasks to combine them to a simple workflow. Nord Hyper is a small project with only one build /development task where gulp.js is more overhead / too heavy weight.

The lint task should be replaced with a simple npm script command to run eslint.

I can not distinguish the windows if both windows of an app and Hyper have the same background colour

Issue Type

Improvement

Description

One windows of any app which has Nord theme and another window of Hyper have the same background colour and i can not distinguish the windows. For example, see the screenshot:

image

Steps to Reproduce

  1. Open any app with Nord theme and Hyper
  2. Notice and compare the windows and the background colour

Expected Behaviour

You can not distinguish because they have the same background colour and Hyper does not have drop shadow or border.

Yes, I was aware that there is a border, but border is too thin, then I can not see the bord or the shadow.

Actual Behaviour

Same windows background colours. There is no border or drop shadow in Hyper.

Environment and Versions

  • What is the version of Nord Hyper you are running? The latest
  • What is the name and the version of your OS? Ubuntu 18.04 GNOME 3, KDE Plasma and XFCE
  • Have you tried to reproduce it on different OS environments and if yes is the behaviour the same for all? Yes
  • Which Node.js and Hyper version are you running? Hyper 2.1.0 (Canary) and Node 9.11.1
  • Are you using any additional CLI arguments for Node.js? No

Stack Trace and Error Messages

No warning and error messages

References

Border and drop shadow

Potential solution

Add a border colour, border-radius and width or drop shadow enabling.

Additional information

I made a pull request unrelated to Hyper Nord and called you to review. I refer to the nordtheme/nord#103

GitHub Open Source community standards

Adapt to the recommended community standards using the Open Source Guide to complete the projects community profile.

Code of Conduct

It should include sections about

  • what we believe in and how we act
  • unacceptable behavior
  • the responsibilities of the maintainer
  • the enforcement of the Code of Conduct
  • consequences for violations
  • the scope of the Code of Conduct

Contributing Guidelines

It should include sections about

Style cursorAccentColor & selectionColor

Issue type: feature

Description

I would like to add styling for the cursorAccentColor and the selectionColor as these are the only colors not being styled.

For cursorAccentColor, it would be the user's preference or the backgroundColor (#2E3440).
For selectionColor, it would be the user's preference or the cursorColor (#D8DEE9).

Potential Solution

I will be submitting a pull request shortly with these changes.

Adapt remaining `arcticicestudio` "fade-out" changes

With the retirement of the Arctic Ice Studio personal & Nord project brand various migrations to the svengreb GitHub account of other projects were also completed within the last weeks. There are also changes in Nord projects like nordtheme/web that other projects depended on and can now be adapted as well.
Therefore all Nord projects must adapt these changes which includes…

"hyper-statusline" plugin support

The hyper-statusline plugin should be supported with optimized style integration.

  1. The background should be colorized with nord1
  2. The font should be colorized with nord4
  3. The Git status indicator icons should be colored with nord13 for the dirty state and nord7 for the modified- and remote-compare state (icon_push and icon_pull CSS classes).
  4. The transition should match the tab animation

Add Prettier

Prettier should be used in development with the Prettier β†’ ESLint formatting flow.

Full reloading hyper with cursor blink breaks display

Full reloading Hyper using cmd + shift + r breaks the display of the terminal when the cursor blinks. I've disabled this feature setting the flag to false in the .hyper.js file and I can full reload without breaking the display.

Here's my .hyper.js:

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 14,

    // font family with optional fallbacks
    fontFamily: '"Meslo LG S for Powerline", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: '',

    // `BEAM` for |, `UNDERLINE` for _, `BLOCK` for β–ˆ
    cursorShape: 'BEAM',

    // set to true for blinking cursor
    cursorBlink: false,

    // color of the text
    foregroundColor: '#fff',

    // terminal background color
    backgroundColor: '#282c34',

    // border color (window, tabs)
    borderColor: '#282c34',

    // custom css to embed in the main window
    css: '',

    // custom css to embed in the terminal window
    termCSS: 'x-row {line-height: normal;}',

    // set to `true` if you're using a Linux set up
    // that doesn't shows native menus
    // default: `false` on Linux, `true` on Windows (ignored on macOS)
    showHamburgerMenu: '',

    // set to `false` if you want to hide the minimize, maximize and close buttons
    // additionally, set to `'left'` if you want them on the left, like in Ubuntu
    // default: `true` on windows and Linux (ignored on macOS)
    showWindowControls: '',

    // custom padding (css format, i.e.: `top right bottom left`)
    padding: '12px 14px',

    // the full list. if you're going to provide the full color palette,
    // including the 6 x 6 color cubes and the grayscale map, just provide
    // an array here instead of a color map object
    colors: {
        black: '#000000',
        red: '#ff0000',
        green: '#33ff00',
        yellow: '#ffff00',
        blue: '#0066ff',
        magenta: '#cc00ff',
        cyan: '#00ffff',
        white: '#d0d0d0',
        lightBlack: '#808080',
        lightRed: '#ff0000',
        lightGreen: '#33ff00',
        lightYellow: '#ffff00',
        lightBlue: '#0066ff',
        lightMagenta: '#cc00ff',
        lightCyan: '#00ffff',
        lightWhite: '#ffffff'
    },
    // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
    // if left empty, your system's login shell will be used by default
    shell: '/usr/local/bin/zsh',

    // for setting shell arguments (i.e. for using interactive shellArgs: ['-i'])
    // by default ['--login'] will be used
    shellArgs: ['--login'],

    // for environment variables
    env: {},

    // set to false for no bell
    bell: 'SOUND',

    // if true, selected text will automatically be copied to the clipboard
    copyOnSelect: true,

    // URL to custom bell
    // bellSoundURL: 'http://example.com/bell.mp3',

    // for advanced config flags please refer to https://hyper.is/#cfg

    // Plugins configuration
    nordHyper: {
	     cursorBlink: false,
    },

    hyperlinks: {
        defaultBrowser: true
    }
  },

  // a list of plugins to fetch and install from npm
  // format: [@org/]project[#version]
  // examples:
  //   `hyperpower`
  //   `@company/project`
  //   `project#1.0.1`
  plugins: [
    'hyperline',
    'hyperlinks',
    //'hyperterm-atom-dark',
    'nord-hyper'
  ],

  // in development, you can create a directory under
  // `~/.hyper_plugins/local/` and include it here
  // to load it and avoid it being `npm install`ed
  localPlugins: [],
};

out

CSS class deprecation warnings with Hyper 2.0

Issue type: feature

Description

After updating to Hyper 2.0, several CSS classes are being reported as deprecated. Since this is not reported as an "error", I have marked this issue as a feature.

Steps to Reproduce

  1. Upgrade to Hyper 2.0.0 (stable)
  2. Install nord-hyper plugin (0.5.0)
  3. Open Developer Tools within Hyper View -> Developer Tools
  4. Warning is printed in console output

Expected Behavior

No deprecation warnings reported

Actual Behavior

Deprecated CSS class warnings are logged

Environment and Versions

  • What is the version of Nord Hyper you are running? 0.5.0
  • What is the name and the version of your OS? macOS 10.12.6
    • Have you tried to reproduce it on different OS environments and if yes is the behavior the same for all? No
  • Which Node.js and Hyper version are you running? Hyper 2.0.0 (stable), Node v10.0.0
    • Are you using any additional CLI arguments for Node.js? No

Stack Trace and Error Messages

Warning: "nord-hyper" plugin uses some deprecated CSS classes (cursor-node, ::selection).

References

I discovered this CSS mapping within the hyper project: config.js

Potential Solution

I will create a pull request which changes the deprecated CSS classes to those indicated in the hyper config.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.